I was reading over one of the tutorials over at html5rocks.com (if you haven't had a look through them before I'd thoroughly recommend it!) and came across an article by Ilmari Heikkinen on creating a "kiosk-mode" for chromeexperiments.com (another thoroughly recommended site!). The article itself was pretty interesting but it was a pretty insignificant part that caught my eye.

Bezier curves are something that I've long come across in painting programs, and more recently in timing functions for CSS3 transitions. However, I've never fully understood how my inane clicking eventually turned into a smooth curve.

In the article, Ilmari describes how he's used a Bezier curve to create a nice sweeping/swishy effect. He talks about how he created the effect and has a go at defining how a Bezier curve is created -

If you're not familiar with how Bézier curves work, the idea is that you recursively interpolate between the curve control points using a parameter (called t) that ranges between 0 and 1, with 0 mapping to the first control point and1 to the last control point.

Now it's probably just me, but I finished that definition none the wiser than when I'd started! Lukily Imari followed up with this excellent animation from Wikipedia -

Thoroughly inspired by my new-found understanding of Bezier curves, I couldn't help but draw one on the whiteboard in the office. As you might expect, it attracted some odd looks from the other guys in the office. I started explaining how I'd never understood how they worked etc. etc.. It quickly became obvious that I hadn't been alone in my ignorance, something which initially made me feel a lot better about myself, and then gave me an idea - what's one better than a whiteboard? Why HTML5 canvas that's what!

Or if you prefer a lot more points!

The demo is available at bezierdemo.appspot.com. Fair warning that it hasn't been extensively tested, requires a canvas-capable browser and the code is "functional" (although I do plan on tidying it up if I get the time).