epsilon

1.0
Vector graphics are awesome, and it's cool in my mind to represent everything as a series of curves. However, drawing those curves maunally in something like adobe illustrator can get pretty tedious, and drawing curves as a series of points, like in raster graphics, is ugly, takes up more space, and doesn't scale well. I wanted a way to draw curves quickly and cleanly. Thus, dao (chinese pinyn for the word 'path')

There's a small amount of JavaScript/canvas stuff at work here, but that's pretty trivial. I chose JavaScript mostly because it's easy to make a quick and dirty interactive UI with it.

I record every point the mouse passes when a line is "sketched," which results in a large array of [x, y] points. I then feed this array into my implementation of the Ramerâ€“Douglasâ€“Peucker algorithm. Ramer-Douglas-Peucker (RDP) is used to approximate a curve with fewer points that looks similar to a curve with more points. It subdivides the start path recursivly, marking the start and end points for each sublist. If a given point is farther away from the line between these points by a factor of epsilon, it is discarded, otherwise, it is kept. You can play with different epsilon values to see how this number affects the output path.

Next, the simplified series of points is fed into another algorithm which draws quadratic curves parametrically. For a series of three points in the curve, there is a function that defines the best values of f1 and f2 so that the end slopes of the curve the end slopes of each subsequent curve, these values are then plugged into the parametric equation to offset the slope of the curve to be drawn. Thanks to Jeff Ely for providing his formula for quadratic curve fitting this way.

For paths that only consist of two points, I just draw a (parametric) straight line between them.

One problem that I had was how to define the curves at the end of each line, because it isn't so clear what the slope should be, because that doesn't matter.

- Make clearning the sketched line look cleaner. One way I could do this is by reserving an entire canvas for sketching, and place it on top of the canvas with the curves, then clear that canvas entirely with each line sketched. Right now I'm just drawing a white line on top of the gray one, which is pretty ugly in my opinion.
- Allow curves to be adjusted after they're drawn.
- Make straight line segments in the begenning and end of curved paths work better. Usually, these just disappear. This may have something to do with one part of the parametric curve equation going to zero?
- Port to a useful context. I don't usually sketch stuff in the browser, but it would be neat to make a small vector graphic editior, make a c++ program, or possibly, a small handheld e-ink note pad. Small e ink screens and resisitive touch screens can be found easily and cheaply now.