For one reason or another, I found myself learning about Bezier Curves. They’re used to render fonts, paths, and also happen to be used in Highcharts when using the “spline” option. Here’s the explicit definition:
While I really do love Mathematics, I tend to find groking mathematical notation a cumbersome process. I learn much quicker if there’s something visual involved. Luckily, beneath the heavily sub and super scripted notation in the Wiki article, lay some nice animated .gifs. In a moment of epiphany, Beizer Curves were understood.
Animated gifs are good, but where’s the interactivity?
First, how Bezier Splines work:
Basically, you have a counter that starts at 0 and goes up to 1, at some small increment which you can choose. Let’s call the counter “t”, and let’s see how to construct it for t=.25. You draw a point .25 the way between point 1 and point 2. You draw another point .25 the way between point 2 and point 3. You do this all the way to the last point. You now have a new set of points. Just follow the same pattern on those new set of points. Continue doing this until you have one point, and that’s the point on the Bezier Curve for t=.25.
There’s no denying these .gifs are very helpful — but don’t they leave just a little to be desired? I want to slow down the animations, add my own points, and drag points around. I figured it was as good excuse as any to dig into the internals of the Highcharts renderer — basically a wrapper for SVG.
I tried Googling lots of permutations of “bezier curve spline demo animation” but found nothing useful. Hopefully this helps out somebody.
Here’s the end result: You can click anywhere to add a point. You can delete points by clicking them, or you can drag points to move them. You can pause/play an animation. You can drag the slider to set t.