I’m bad at drawing curved lines in ActionScript. I’m always too lazy to figure out how to calculate exactly where the control point should go when using curveTo. Because of this, most of my experiments have relied on drawing a lot of short straight line segments to simulate curves, rather than figuring out how to draw the curves properly. For example, my tree experiments are drawn entirely with straight line segments.
While revisiting my grass simulations I decided to bite the bullet and figure out an easy way to work with curves. The result is a couple of “spikes” or isolated test cases that demonstrate the logic behind converting a series of straight lines into a nice looking curve.
The basic concept is to bisect each of the straight lines, then draw a curve between the bisections, using the original points as the curve’s control point. Nothing new I’m sure, but it works really well for me, because I can continue to think in straight lines, but draw in curves.
Click to add points. Click and drag points to move them.
I also extended this logic to work with fills, which is handy for drawing for drawing things like grass, seaweed, and tentacle monsters (I’m looking at you Peter Organa). To do this, you need to calculate the average angle for each point based on the next and previous points, then draw your curves along points tangential to that angle. If that doesn’t make a lot of sense, the example below should clear it up. It’s not perfect (still need to deal with the “flip” point that results in crossed lines), but it’s been good enough for some of my recent experiments.
You can download the test files here.