Processing: Creative Coding and Computational Art

Figure 7-30.
Spline curve using Processing’s curve() function
The curve() function is a spline curve implementation, or more precisely a Catmull-Rom
spline implementation. The name “Catmull-Rom” comes from computer scientists Edwin
Catmull and Raphael Rom. Catmull later went on to establish a small independent animation
studio in 1986, called Pixar. Thus, you might assume that Catmull-Rom splines are relevant
to 3D animation—and you’d be right. They’re important for efficiently generating
complex, smooth geometry—creating motion paths, among other things. In addition to
curve(), Processing has a related function, called vertexCurve(), that implements the
same Catmull-Rom spline. I think vertexCurve() is a little simpler to use than curve() (I’ll
look at this function after I slog through the curve() function a bit).
In the last example, I created five initial points to hold the curves’ control points. Hopefully
you noticed that there were no control points off the path, as in the earlier bezier()
example. This is one of the main differences between a Bézier curve and a Catmull-Rom
spline curve. After creating the five points, I call my curve() functions. Like the bezier()
function, curve() uses eight parameters—the x and y components of four points.
However, unlike bezier(), curve() doesn’t use a system of anchor and control points.
Instead, all four of the points, in a sense, function as control points. The curve then follows
the path of the control points. Look closely at the curve() calls in my last example. Here
they are again:
curve(p4.x, p4.y, p0.x, p0.y, p1.x, p1.y, p2.x, p2.y);
curve(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p0.x, p0.y);
In the first curve() call, points p0 and p1 are at the left and right edges of the first segment
of the curve. p4 and p2 are the extra control points on either side. In the next
curve() call, I copy p1 to the left point position of the second curve. This will allow the
first curve’s right point and the second curve’s left point to align. I then use p2 for the right
point of the second curve. Since each point also needs a control point on the left and
right, I put p0 to the left of p1, and p3 to the right of p2. This same pattern repeats itself in
the next two calls. The only thing that may look odd is the last p0 in the final curve. Since
CURVES
281
7