| Home >

Coding Your Own Diagram: Example 1

This page gives a step-by-step introduction to creating a diagram using the Geometry Applet.

A computer program is a kind of code. It is a set of statements that can be read and executed, either by another program (e.g., the operating system), or by hardware (a processor). So how do you code a program that the Geometry Applet can run? It's actually pretty easy, there are just two parts: 1) initialization code, and 2) a list of the elements that make up the figure. That's it!

Let's take a look at an actual program. We'll use the simple right-angle figure that you saw on the previous page as our first example. [Since the Geometry Applet is designed to appear on a webpage, the code is written in HTML (Hyper-Text Markup Language) format. Here we'll only consider the parts of the page specific to the Geometry Applet, but you can open the file you saved ("RightAngle.html") in a text editor (such as Notepad) to learn about HTML tags and comments, and how to set the Title for your page.]

Here is the initialization code:

Line #	Contents
01:	<CENTER>
02:	<APPLET CODE=Geometry CODEBASE="./" ARCHIVE=Geometry.zip HEIGHT=150 WIDTH=250>
03:	<PARAM NAME=title VALUE="Perpendicular Lines">

Line 1 is not strictly part of the program. It is an HTML tag that tells the browser to put what follows in the center of the page (horizontally). HTML tags are enclosed by special characters: "<" and ">", (most keyboards have these characters above the comma (",") and period ("."), respectively). HTML tags like this one usually come in pairs, a start tag and an end tag. When we're done with the figure, we'll use the </CENTER> end tag.

Line 2 is where the program actually starts. The HTML start tag for the applet has several attributes that are used to initialize the program.

• CODE=Geometry : this is the name of the main Java module (.class file) for the applet.
• CODEBASE="./" : this is the directory (folder) where the Java module is located; it is set to the current directory (i.e., the same directory as the .html file containing the applet).
• ARCHIVE=Geometry.zip : the Geometry Applet modules are conveniently stored in a zip archive (uncompressed).
• HEIGHT=150 : the height of the figure, in pixels.
• WIDTH=250 : the width of the figure, in pixels.

Line 3 is another piece of initialization code. This line sets an option for the program, i.e., it is not absolutely necessary, but you, the programmer, can choose to use it if you wish. Line 3 also shows the basic format that you'll be seeing throughout the rest of the program:
<PARAM NAME=Something VALUE=Something>.

Line 3 sets a value for the "title" parameter, which is used to name the window that pops up when the figure is lifted off the page. Here, the title is set to "Perpendicular Lines". You can set the title as you wish.

In addition to setting the title, there are other options available which you can read about here: Geometry Applet Programming Reference.

Now that we have the program initialized and the "title" option set, it's time to start listing the elements that will make up our diagram. For two-dimensional geometrical figures, there are five available element types (or classes, speaking technically). They are:

1. point,
2. line,
3. circle,
4. polygon, and
5. sector (portion of a circle).

Each of these five elements can be defined in different ways (called subclasses in technical terms). For example, a circle can be defined by specifying its center point and radius, or by specifying three points along its circumference.

Here is the list of elements that is used to construct our sample "Right Angle" figure:

Line #	Contents
04:	<PARAM NAME=e[1] VALUE="A;point;free;40,110">
05:	<PARAM NAME=e[2] VALUE="C;point;free;210,110">
06:	<PARAM NAME=e[3] VALUE="AC;line;connect;A,C">
07:	<PARAM NAME=e[4] VALUE="B;point;lineSlider;AC,125,110">
08:	<PARAM NAME=e[5] VALUE="D';point;perpendicular;B,A;0;0">
09:	<PARAM NAME=e[6] VALUE="D;point;lineSlider;B,D',125,40">
10:	<PARAM NAME=e[7] VALUE="BD;line;connect;B,D">
11:	</APPLET>
12:	</CENTER>

The diagram is made from seven elements: 5 points and 2 lines. Four of the points (A–D) are visible in the diagram, and one (D') is invisible. Points A and C are "free" points (they can be dragged anywhere on the diagram), and points B and D are "lineSlider" points (they can be dragged along a defined line). Point D' is a "perpendicular" point (it will always be perpendicular to the line segment BA). Each of the lines is made by connecting two points.

As you can see, the format for each element is straightforward. The elements are named sequentially, starting with e[1]. The value for each element is a description of how the applet should construct that element. The value is formatted as a list of arguments, separated by semicolons, and enclosed in quotes (a trailing semicolon for the last argument is optional).

The first three arguments are always: 1) the label for the element, 2) the class (point, line, circle, polygon or sector) of the element, and 3) the subclass of the element. For example, line 4 defines A, the left endpoint of the horizontal line segment:
<PARAM NAME=e[1] VALUE="A;point;free;40,110">
The label is "A", the class is "point", and the subclass is "free".

The fourth argument is a list of one or more parameters used to define that particular subclass. Here, the fourth argument is: "40,110", and I bet you already guessed that these are the initial x- and y-coordinates for point A. They instruct the applet to place point A 40 pixels in from the left-hand edge and 110 pixels down from the top edge of the diagram. This follows a standard convention for defining pixels positions on the screen: the top-left corner is (0, 0), the x-axis (positive numbers only) points to the right, and the y-axis (again, positive numbers only) points down. Line 5, which defines C, the right endpoint of the horizontal line segment, is very similar.

Line 6 defines line segment AC. The label is "AC", the class is "line", and the subclass is "connect". The fourth argument is "A,C", which, of course, defines the two endpoints. Line 10 is similar.

Line  7 defines B, an example of the "lineSlider" subclass. Here the fourth argument has three parameters: "AC,125,110". They are: 1) the line along which the point can slide, 2) the initial x-coordinate, and 3) the initial y-coordinate.

Line 8 defines D', an example of the "perpendicular" class. Here the fourth argument has two parameters: "B,A", the endpoints of the line segment to which D' is perpendicular. By definition, D' will be both perpendicular and equal in length to line segment BA.

Line 8 also contains two additional arguments. Arguments 5 and 6 are optional arguments (you can see that all of the other elements leave them out, thereby accepting the default values for these arguments). Here, arguments 5 and 6 are: "0;0"; the first zero instructs the applet to make the label for the point invisible, and the second zero instructs the applet to make the point itself invisible. Alternatively, we could use these arguments to specify the color of the label and the point, respectively, by using a non-zero value.

There are two more optional arguments, neither of which is used in this example. Argument 7 specifies the color for the one-dimensional part(s) (if any) of an element (i.e., a line segment or the outline of a circle, polygon or sector). Argument 8 specifies the color of the two-dimensional portion (if any) of an element (i.e., the inside of a circle, polygon or sector).

Lines 11 and 12 are the corresponding end tags for lines 1 and 2. They designate the completion of the applet and of the centered region, respectively. With that, our diagram is complete!

We'll try a more complicated figure soon, but first take a few minutes to read through these programming tips: Geometry Applet Programming Tips.