Cubic Bézier curve sections

(here is a proof of concept implementation of the same applet using SVG and Javascript: cubic Bezier curve sections using SVG and Javascript)

(and a port of this applet to the iPhone: Bezier curve iPhone App)

Up to 34 control points may be set, giving a maximum of 11 cubic Bézier curve sections (the last point of each section is the first point of the next section).

Click on "Display convex hull" and move the points around to see that a Bézier curve always stays within the convex hull of its control points.

Click on "Display C1 continuity hint" to see a line going through the third and fourth point of each section. The second point of the next section should be at the other end of this line in order for the curve to be C1 continuous at the connecting point. This point will snap to the end of the line and its number will turn yellow when close enough.

Click here for a list of all applets.

Your browser does not support Java applets, or you have disabled Java.

Patrick Min, CS Department, Princeton University
Last modified: Wed Jul 21 03:41:41 EDT 2010