JAVASKETCHPAD® – AN INTRODUCTION
A copy of the JavaSketchpad® (JSP) files can be freely downloaded from the site

http://www.dynamicgeometry.com/javasketchpad/about.php

Your download will give you a folder named ‘jsp’ containing various working files that don’t need to be touched. It does contain a 25 page file named ‘JavaSketchpad Grammar.pdf’. This file contains the syntax for the program and is worth printing off for future reference.

I did my construction with Adobe GoLive® but any program which produces web pages will do. Open this file, and look at the Source view. You should see something like this (below right).

Under Source Preferences, you should be able to adjust the font size here to a size you are comfortable working with, and probably add some colour coding to the text. None of this formatting code is of interest to us. We shall be inserting material in the space **.
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Welcome to Adobe GoLive 6</title>
</head>

<body bgcolor="#ffffff">
<p> ** </p>
</body>

</html>

With luck, your web page program will have a browser icon (say, Internet Explorer), which you can click at any time, thus revealing the progress you have made in your construction (or a message that you have made an error). I do have to say that the Java error messages are not always helpful! I like to work with two suitably sized windows open side by side: the code window at left and the browser demonstration window at right.

Above left is the figure generated by a small sample program (below left) which illustrates the simple logical progression of the program commands. This is the material placed at ** . We have included a running commentary on the right. Of course, any programming language has its own syntax which will gradually become familiar with practice. However, we can make some general observations.

• Spaces between characters or between lines are not important, except in the case of commands containing several words.
• Material enclosed in curly brackets {} is not read by the program, so helpful comments can be included.
• JSP automatically gives an object reference number 1, 2, 3 ... to each new object starting from the top. We have placed an entry {#_} beside each new object introduced. This is to help the programmer, not to have any effect on the code. If the numbers are not right, we are in trouble! These numbers are the key to understanding how JSP works.
• Care must be taken with ‘case’. For example [hidden] works but [Hidden] doesn’t.

<applet codebase="jsp" code="GSP.class"

width=200 height=250 align=middle>
<param name=Frame value=1>

<param name=BackRed value=255>
<param name=BackGreen value=255>
<param name=BackBlue value=255>

<param name=Construction value="

{Origin}
{#1} FixedPoint (100, 100) [blue, label('O')];

{Radius}
{#2} FixedPoint (25, 100) [hidden];
{#3} Segment (1, 2) [hidden];


{Drawing of fixed circle centre O and radius 75}
{#4} Circle by radius (1, 3) [blue];

{Movable point P on circle}
{#5} Point on object (4, 0) [label('P'), red];

{Fixed tangent line}
{#6} FixedPoint (175, 50) [hidden];
{#7} FixedPoint (175, 150) [hidden];
{#8} Line (6, 7) [blue];

{Radius OP}
{#9} Segment (1, 5) [red, thick];

{#10} ShowButton (50, 200, 'Show radius') (9);
{#11} HideButton (50, 225, ' Hide radius ') (9);

">
</applet>		 This first line tells the program where to look for the code.
Numbers 200, 250 give the required size.
Want a frame? 1 = frame; 0 = no frame.

These three parameters follow the RGB system for defining background colour.
(255, 255, 255) is white; (0,0,0) is black.

Now the construction begins.

Points are defined by coordinates: left to right, and top to bottom in the JSP window. Items within [ ] are optional.

The circle will need a radius to define it. So we construct a suitable (hidden) segment. Notice that ‘Segment’ calls on points #1 and #2.

The (1, 3) in the circle command requires the centre (#1) and radius (length) (#3).

‘Point’ gives a moveable point, in contrast to ‘FixedPoint’.

The line is determined by the two fixed points (#6) and (#7). For basic colours you can use black, blue, cyan, green, magenta, red, white or yellow.

We construct a (moveable) radius from the origin (#1) to the (moveable) point P (#5).

A couple of buttons show or hide the radius OP (#9).

We close the construction and then the applet.

We see that the structure and logic of JSP is really quite simple. On the other hand, JSP, like any other computer program, is completely unforgiving: the code has to be exactly right! If you try to run a program with a simple construction error (like a wrong bracket), JSP will give a helpful message. On the other hand, it is very easy to include an incorrect Object Reference #, and this will lead to a more mystifying prompt.

If you have downloaded JSP, I encourage you to copy and paste the above program in the appropriate place on an .html page contained in the jsp folder. If it runs successfully, try modifying your program: change the colours, move the points, add objects of your own. In this last case, be careful of your Object Reference numbers.

Enjoy your programming!