Homework 1: Osgood Curve

Short Description:

Write a program that generates and displays an Osgood curve.

This assignment is worth 20 points.

Goals

When you finish this homework, you should

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

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

Repeat this process.

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.

This is a screenshot of my interface. You need not copy this.

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)

Please note, this triangle will change with the size of the canvas and should be valid as long as the canvas is wider than 40 pixels of sufficient height. Please provide at least two additional different starting configurations.

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

Your interface should built in a html file. This file should contain documentation discussing the project, including information such as

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

Please use relative references to your code in the html file. This will allow me to extract the file in my local environment.

Extras

I find that I want to continue to play with simulations/visualizations of this type. Please do so, but only if you have sufficient time, do not enhance this, or any other project at the expense of your other classes.

If you do decide to continue some interesting additions might include

Submission

When you have finished your assignment, please submit a tar file containing all files needed for this project. Please do not post your project on line until after grades have been assigned.

To create a tar file

Create a directory (or folder)
Place a copy of all related files in this directory
Create the tar file of the directory.

So for example, if osgood.html and osgood.js are my files for this project and are in a directory called hw1 in the current directory, the following screen shot shows how to create an acceptable tar file:

Submit your tar file as an attachment to a message to danbennett360@gmail.com. Please include your name, and the fact that this is homework 1 in the title of the message.