home

dao

demo:

epsilon
1.0

motivation:

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')

how it works:

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.

future steps:

home