Drawing Pretty Lines

I want to redo my homepage and for that project I'd like to be able to do a bit of drawing. One simple way to do this is to use something like Flash, but I'd like to keep it in straight HTML if possible. I was thinking I'd make some tables and fill the cells. The problem is making pretty lines. This page is about that…

To start out with, I need some basic functions for making tables and filling cells…

The simplest method for drawing lines is to simply plot the line through the grid and any square that the line crosses, darken.

The math for this is pretty straightforward. First define a few things:

• A rectangle defined by the upper left corner at and the lower right at
• A line defined by the two points and
• Assuming that originates inside and exits, there is a single point of intersection,

If you imagine to be embedded in a grid there are eight possible squares that could exit into.

Three of these (6, 7, 8) can be eliminated by guaranteeing that is to the left of . This is done by simply switching the two if

Define and a grid space with lines every and units. A grid square can be identified as where the square is the space bordered by the four lines: or, in other words:

For a given point , and

To draw my line, I need the set of all

I think it would be pretty easy to find iteratively… Let's work first with the case where and since we can already eliminate 6-8 by chosing which point to call this means the ray is going down and right. It will enter 3, 4 or 5 next. To figure out which, use .

1. Start off in
2. If and then we are at the end of the line and can stop.
3. Otherwise, find the intersection of the lines and which is The important figure is: and it's relationship to the bottom border of the rectangle, The next square is:
4. Repeat

The thing is that I was planning on drawing lines by filling in chunks of tables, but I can do it with groups of dots much more easily. What would that look like?