Splines

• curve() function
• curveVertex() function (used within beginShape and endShape)
• bezier() function
• bezierVertex() function (used within beginShape and endShape)

Rom-Catmull splines
This demonstrates a Rom-Catmull spline, which is indicated by series of curveVertex() points. Note well that for a curve going through six vertices, you must formally add eight curveVertex() entries. The first and last are known as control points. Often, you repeat the first and last actual vertices as the control points, but they can be moved elsewhere to further define the tangents at the ends. This type of spline is guaranteed to go directly through all (non-control) points.

In the demo below, you are welcome to drag the labeled points around to see the effect it has on the shape of the curve, or type 'r' to start over with new random placement of the points.

4-point Bezier splines
This demonstrate a traditional Bezier spline with two end vertices and two control vertices. Notice that the curve uses two vertices as endpoints, but it does not necessariliy pass directly through the other control points. Although its more difficult to control where the curve passes through, Bezier splines are often preferred for producing more appealing shapes than Rom-Catmull splines.

This particular animation demonstrates some of the underpinnings of the geometry of how the control points define the curve. In short, if you take the three lines that connect the sequence of vertices (shown in blue), then connect those three midpoints with two more segments (shown in red), and then connect the two midpoints of those segment with one more segment (shown in green), the spline will pass through the mipoint of that line and will be tangent to it.

Note: you may toggle the display of the skeleton with the space key, may rerandomize the points with 'r', and are free to manually drag any of the points around to effect the shape of the curve.

Extended Bezier splines
While a portion of a traditional Bezier spline is defined by a quartet of (vertex, controlVertex, controlVertex, vertex), it is possible to make a longer curve by combining such foursomes that intersect at the true vertices. However, there will be discontinuities unless each (controlVertex, vertex, controlVertex) triple are colinear.

In this demonstration, there are two separate Bezier portions, defined by points (1,2,3,4) and by (4,5,6,7). There will be a discontinuity at vertex 4, unless it happens that vertices (3,4,5) are colinear.

Note: you may toggle the display of the skeleton with the space key, may rerandomize the points with 'r', and are free to manually drag any of the points around to effect the shape of the curve.