Bézier Curves provide a smooth path through a series of points. They are used in computer graphics, to draw fonts, smooth paths for robots to follow. This example uses quadratic and cubic Bézier Curves to represent dancing figures, to create curvy stick men, notice that even though one can make dramatic changes to poisitions, the lines remain smooth and predictable.

This example uses the HTML5 canvas bezierCurveTo function to draw a cubic bezier curve. Such a curve has four control points: a start point and an end point and two intermediary control points.

If you click the 'Outline' checkbox then a number of lines appear. Notice that the red line is drawn between successive yellow lines and a blue line is drawn between successive red lines. If you move the 'position' slider then the red lines move proportionally along the yellow lines and the blue lines proportionally along the red, and the black dot moves proportionally along the blue. Curve itself is traced out by the black dot.

The convex hull is the bounding box of the control points.

Notice that the red line interpolates the blue and the green line interpolates the red. I believe the midpoint of each red line would trace out a quadratic bezier curve and the midpoint of each green line would trace out a cubic bezier curve.

...