Cubic Bezier Curves – Under the Hood from Peter Nowell on Vimeo.

You can drag the markers and open this example in new tab.

The core part of this practise clearly is the bezier curve. To get all points on the curve for 4 control points this would suffice.

However in order to use an arbitary amount of control points I use the following function. It’s recursively, so potentially it’ll explode the max available stack depth (no clue how much that is in js). But for now it’ll do the job.

To use the function simply wrap a loop around with your favorite segments amount.

Now simply draw the points.

Et voilà! The animation idea is inspired by

This is my solution to cg2 exercersise a01.2-1.3.

See Also Practical Guide to Bezier Curves