An Animated Bezier Curve Demo


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 from Wikipedia… too bad you can’t interact!

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.

The real guts of the script are BezierCanvas.js, which depends on jQuery and Highcharts.

About Sam

Sam is on the AppNexus UI team, with a focus on building out a modular, scalable, and developer-friendly framework. In addition to Javascript, he's fluent in PHP, MySQL, and will start with Python any day now. He also curates an assortment of items at his desk which includes several kinds of silly putty, a very tall tower of cans, and some gallium.

This entry was posted in Uncategorized. Bookmark the permalink.

  • Richard Charles Hudson

    Love those example animations!!

  • Dmitry Krasnikov

    Do you have a script when any DOM element could be flowed by drawn path with proper rotation? any chance to USE drawn curve?

  • T

    The toolbar covers over the default positions for some of the points, a small fault that renders the applet unusable.

  • aknsha