Homework 2: Osgood Curve

Short Description:

This assignment is worth 20 points.

Goals

• Have generated a basic image using a simple graphics API.
• Have built an interface which allows users to interact with the simulation.
• Used HTML, Javascript and the HTML5 Canvas to produce a picture.

Formal Description

• Chapter 6 Eloquent Javascript.s
• Review other javascript class resources.
• Review HTML 5 Canvas resources.

Wikipedia defines an Osgood curve as a non-self-intersecting curve of positive area. This is a class of curves, not just a single curve. Named in honor of William Fogg Osgood, an American mathematician who found an early example such a curve. Osgood was attempting to find a space filling curve. An intuitive definition, and some cool pictures can be found here.

One way to generate an space filling Osgood curve is to start with a list of triangles. These may share edges and vertexes, but should not intersect. Repeat the following

    For each triangle ABC
       Find the longest edge.  
       In the case of a "tie" for longest, select the "first" edge.
       // Assume the edge is AB
       Split that edge at points X and Y such that segments  AX and BY are of equal length.
       Replace ABC with AXC and YBC

If you were trying to fill space, the process would repeat indefinitely. For graphics, stopping when the new edges have length of 1 or less is sufficient.

Your assignment is to employ this algorithm to generate, then display each stage of an example of an Osgood curve. This should be done in javascript, displaying on an 2D HTML5 canvas. You should use HTML to implement a user interface.

You should provide an interface which allows control of the following aspects:

• Gap Size: This is the percentage of the line removed each iteration. A gap size of .1 would remove 10% of the line.
• Background Color: the color of the blank canvas.
• Edge Color: The color used to draw edges.
• Draw Edge: A boolean flag, if on the edges are drawn.
• Fill Color: The color used to fill triangles.
• Fill: A boolean flag, if on the triangles are filled.
• Starting Configuration: a selection of starting shapes. See the discussion below.
• Step: A button that calculates and displays the next iteration of the curve.
• Redraw: A button that redraws the current shape.
• Reset: A button that returns to the starting instance of the current shape. Colors and drawing switches are not reset.

Good design practice says that you should provide default values to your interface from the model. This is somewhat difficult so you may hard code your interface to match your default values.

You must provide a number of different starting configurations. This includes an equilateral triangle. The first segment, AB, is as follows.

    A: (20, height-20)
    B: (width-20, height-20)

To draw a filled polygon in the HTML5 canvas:

context.beginPath();
context.moveTo(p1.x,p1.y);
context.lineTo(p2.x,p2.y);
...
context.lineTo(pn.x,pn.y);
context.closePath();

// fill the polygon 
// only needed if the polygon is filled.
context.fill();
// draw the edge
// only nedged if the edges are to be drawn.
context.stroke();

Documentation

• Problems encountered
• Interesting techniques employed
• Sources of information
• Collaborators
• Notes on additions
• Screen shots of interesting results.

Extras

If you do decide to continue some interesting additions might include

Submission