Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
274
Figure 7-26. Bézier curve plot showing anchor
and control points
I utilized Java’s Point class in the example as a simple data structure. The Point class is not
part of the Processing API, but I find it handy to use because it provides direct access to an
x and a y property, which I used to help keep track of the different anchor and control
points. You can create a new Point object by simply writing Point pt1 = new Point(150,
300);. The two arguments you pass, 150 and 300, will be the values of the x and y properties,
respectively. So, to access the x and y values, I just write pt1.x and pt1.y. The rest of
the code in the sketch is stuff you’ve seen numerous times before in earlier examples (and
will see a lot more of).
If you’ve ever used a pen tool in a graphics application like Illustrator, Photoshop, or
FreeHand (and I assume most of you have), then you’ve experienced Bézier curves, and
maybe you’ve even messed directly with their control points. Bézier curves are named
after Pierre Bézier, a French mathematician and engineer who worked for the car manufacturer
Renault. To learn more about Bézier and his curve, check out http://cg.scs.
carleton.ca/~luc/bezier.html.
There is a dynamic tension in a Bézier curve, determined by the placement of the control
points (the small ellipse handles in the example) and their relative position to the anchor
points (the small squares at ends of curve). You’ll notice in the example that the curve
seems to bend toward the control points. The situation is actually a little more complicated
than that. The extra lines I rendered between the control points and the anchor
points represent the slopes of the curves at the anchor points (also known as tangent
lines). Slope is the change in y over the change in x (the rise over the run). Finding slopes
of curves is a little tricky, since the curves are constantly changing, unlike straight lines, in
which the slope is constant. On curves, you can take slope readings at distinct points. For
a more generalized approach to solving for the slope of a curve, you need basic calculus—
so I’ll stop there. In a sense, the Bézier curve between the two anchor points is calculated
by blending, or interpolating, the two slopes of the curve at the anchor points, as well as
factoring in the distance between the anchor and control points.