Compass and Straightedge geometry meets HTML5

This is a proof of concept build of an HTML5 engine to perform classical Greek compass and straightedge calculations, as described in this Wikipedia article. In brief, an initial set of points can be created, and then points can be connected by lines, circles can be drawn with one point as center and another as one point in the circumference, and finally the points where circles and/or lines intersect can be added as new points. With those simple rules, angles and line segments can be bisected, and certain regular (equilateral) shapes can be created.

I have created a rudimentary language to describe the adding of points, lines, and circles, and finding their intersections, which I discuss briefly after the demo below. Without further ado, choose a sample "program" to run to bisect an angle or create a regular shape. If you're a fan of Gauss, be sure to check out the heptadecagon.

Display area

Frame delay (ms)


Samples
Bisect an angle
Construct a regular triangle
Pentagon
Heptadecagon
Instructions

The language

• point [x] [y] [name]
  This creates a point at canvas position [x,y], and labels it [name]. This is intended only to be used for creating starting points to be used by the remaining commands. In HTML5 canvases, point 0,0 is the upper-left corner, and numbers increase as you move right and down.
• line [a] [b]
  This draws a line between points a and b.
• circle [a] [b]
  This draws a circle centered at point a, with point b as a point on the circumference (line ab describes the circle's radius)
• intersect [circle|line] [a] [b] [circle|line] [c] [d]
  Identify's the intersection points between two circles, two lines, or a circle and a line (for this last combination, specify the circle first). This doesn't add any new points, it just identifies the intersections. A separate "point" command must follow an intersect command to add new points
• point i [0|1] [a]
  This creates a new point [a] based on the two possible results of the last "intersect" command. You will need to test whether intersect point 0 or 1 is the one you need. In fact, if you're building your own program, you'll want to do several tests as you go. I recommend setting the frame delay to 0 before testing to speed things up.
• : [text]
  Sets the current "label" in the display area, used for giving the audience an idea about what they're looking at.
• # [comment]
  Comments in the instructions that aren't shown in the display area

Enjoy!