Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
280
Another way you can generate more complex curves, without depending solely on stringing
so many Bézier segments together, is to use higher-degree polynomials. Higher-degree
curves provide more inflection points (the places where curves change direction), and also
require more control points. The number of control points is determined by the polynomial
degree minus 1—that’s why the standard Bézier, third-degree curve has two control
handles. The ability for a curve to change direction a number of times should make it useful
as a design or animation tool. However, the complexity and computational cost of
using these higher-degree curves offsets most of the benefits. Thus, you’re pretty much
stuck with the cubic (third-degree) and quadratic (second-degree) curves you’ve already
looked at.
However, there is one other important approach to creating smooth, continuous curves
that simplifies some of the challenges of simply stringing together Bézier curves. This
approach is encapsulated (within Processing) in the curve() function. I’ll show you how
the curve() function actually works in a minute, but first I’ll jump in with a curve() example
(see Figure 7-30) that plots the same curve generated in the preceding Bézier example
to help highlight the difference between the two functions:
// Catmull-Rom spline curve
size(500, 500);
background(255);
Point p0 = new Point(150, 100);
Point p1 = new Point(350, 100);
Point p2 = new Point(350, 300);
Point p3 = new Point(150, 300);
Point p4 = new Point(100, 400);
//curve segments
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 );
//control points
ellipse(p0.x, p0.y, 10, 10);
ellipse(p1.x, p1.y, 10, 10);
ellipse(p2.x, p2.y, 10, 10);
ellipse(p3.x, p3.y, 10, 10);
ellipse(p4.x, p4.y, 10, 10);