Home Store Project Ideas Project Guide Ask An Expert Blog Careers Teachers Parents Students

Geometry Applet Advanced Example

Coding Your Own Diagram: Example 2

This page will complete your introduction to the Geometry Applet by showing you how to code the diagram shown Diagram 1. For more information about the diagram itself, see:
Thinking in (Semi-)Circles: The Area of the Arbelos

Diagram 1: Circle CD has the same area as the arbelos (the white-shaded region between the three semicircles).

Diagram 1 shows an arbelos. What is an arbelos? The arbelos is the white region in the figure, bounded by three semicircles. The diameters of the three semicircles are all on the same line segment, AB, and each semicircle is tangent to the other two. An interesting property of the arbelos is that its area is equal to the area of the circle with diameter CD (see Figure 2). CD is along the line tangent to semicircles AC and BC (CD is thus perpendicular to AB). C is the point of tangency, and D is the point of intersection with semicircle AB.

We'd like to draw this diagram with the Geometry Applet. Take a piece of blank paper and make a quick sketch of Diagram 1. You can see right off the bat that we'll need points A, B, C and D. Since we'd like line segment AB to remain horizontal, we'll use two invisible points (call them "La" and "Lz") to define a much longer horizontal line. We'll use the "fixed" point construction point construction for these two points, since they will be invisible. (Although the points are "fixed", the diagram can still be dragged and the points will move with it.) The required construction data consists of an x- and a y-coordinate. The y-coordinates of La and Lz will be equal (making the line horizontal) and set so that the line appears near the bottom of the diagram. The x-coordinates can be anything we wish (since the points will be invisible), but let's place them near the left and right edges of the diagram, respectively (so that we can see them in case we need to for debugging). Pencil in points La and Lz and label them "fixed, invisible"; you can also note the initial x, y coordinates for each point.

We want points A and B to slide along the line defined by La and Lz, so that the arbelos can be resized. We'll use the "lineSlider" point construction for these two points. The required construction data consists of the endpoints of the line, plus initial coordinates for the points. Label points A and B, "lineSlider"; you can also note the initial x, y coordinates for each point.

Next, we need to define points C and D. One of these points needs to be moveable, too, so that inside boundary of the arbelos can be resized. If you study the point construction table, you'll see that we could do this by defining point C as a lineSegmentSlider between points A and B. However, this would lead to difficulty in defining point D, which must always lie on the circle with diameter AB. The solution is to make D the moveable point, using the "circleSlider" point construction method. Then C can be defined relative to D using the "foot" point construction method. Use the point construction table to look up the required construction data for a "circleSlider" point. You'll see that for a "circleSlider", we need to specify a circle, plus the initial x, y coordinates for the point. How do we define a circle? Let's check the circle construction table to see. Aha! we can use either the "radius" or "circumcircle" construction method, but in either case we'll need to define an additional point. Let's use the "radius" method, and obtain the center point for the circle by using the "midpoint" point construction method. With midpoint, we can define a new point (call it ABm) exactly half-way between A and B. We can then define a circle (call it circAB), using ABm and either A or B to define the radius. We'll make the circle invisible, because the arbelos appears above the horizontal line. (Point D can still travel all the way around circAB (try it!), but we can live with that.) Next, we can define D as a circleSlider on circAB. Finally, we can define C as the "foot" of a line dropped from D, and perpendicular to line AB. Add notes on the sketch for C, D and circAB.

To complete the diagram, all we need to do is to draw the three semicircles, circle CD and the line connecting A and B. If you check the sector construction table, you'll see that the required construction data for each semicircle is the center point, plus the two endpoints. We already have all of the desired endpoints, plus one center point (ABm). We can use the midpoint construction method to create center points for the inner semicircles, semiAC and semiBC. The outer semicircle, semiAB, should be colored white and drawn first. The inner semicircles semiAC and semiBC will be colored like the background and drawn on top of semiAB. This way, the arbelos will stand out clearly. By now, you should be able to figure out how to draw circle CD on your own. The line segment is also easy.

Now try using what you've learned to write the code for this diagram yourself. If you get stuck, you can refer to the code listing (or use your browser's view page source feature to see how a diagram was created), but try to do it on your own: you'll learn faster by doing it yourself!

Here is a listing of the code that was used to create Diagram 1:

Line #   Contents
01:   <APPLET CODE=Geometry codebase="./" ARCHIVE=Math_GeometryApplet.zip HEIGHT=230 WIDTH=410>
02:   <PARAM NAME=background VALUE="200,3,95">
03:   <PARAM NAME=title VALUE="Figure 1: The Area of the Arbelos">
05:   <!-- create a horizontal line for the base of the arbelos -->
06:   <PARAM NAME="e[1]" VALUE="La;point;free;-1000,205;0;0">
07:   <PARAM NAME="e[2]" VALUE="Lz;point;free;100000,205;0;0">
09:   <!-- define and connect A and B, the horizontal endpoints of the arbelos -->
10:   <PARAM NAME="e[3]" VALUE="A;point;lineSlider;La,Lz,30,205">
11:   <PARAM NAME="e[4]" VALUE="B;point;lineSlider;La,Lz,380,205;black">
12:   <PARAM NAME="e[5]" VALUE="AB;line;connect;A,B;0;0;gray">
14:   <!-- construct the outer semicircle, colored white -->
15:   <PARAM NAME="e[6]" VALUE="ABm;point;midpoint;A,B;0;0">
16:   <PARAM NAME="e[7]" VALUE="semiBA;sector;sector;ABm,B,A;0;0;blue;160,0,100">
18:   <!-- define point D as circleSlider, use it to locate point C -->
19:   <PARAM NAME="e[8]" VALUE="circAB;circle;radius;ABm,ABm,B;0;0;0;0">
20:   <PARAM NAME="e[9]" VALUE="D;point;circleSlider;circAB,340,0;">
21:   <PARAM NAME="e[10]" VALUE="C;point;foot;D,AB">
23:   <!-- construct the inner semicircles, colored with background value, so
24:        that only the arbelos will be colored white -->
25:   <PARAM NAME="e[11]" VALUE="ACm;point;midpoint;A,C;0;0">
26:   <PARAM NAME="e[12]" VALUE="CBm;point;midpoint;C,B;0;0">
27:   <PARAM NAME="e[13]" VALUE="semiCA;sector;sector;ACm,C,A;0;0;blue;200,3,95">
28:   <PARAM NAME="e[14]" VALUE="semiCB;sector;sector;CBm,B,C;0;0;blue;200,3,95">
30:   <!-- construct circle CD, whose area equals that of the arbelos -->
31:   <PARAM NAME="e[15]" VALUE="CDm;point;midpoint;C,D;0;0">
32:   <PARAM NAME="e[16]" VALUE="circCD;circle;radius;CDm,CDm,D;0;0;125,92,65;0">
33:   <PARAM NAME="e[17]" VALUE="CD;line;connect;C,D;0;0;black">
34:   </APPLET>

For more information on programming applets, please visit the Geometry Applet Programming Reference.