Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
284
Next, I want to put this material to better use and cover just a few more curve functions.
But don’t worry, most of the really difficult stuff is over (at least in this chapter). I won’t
formally be covering interactivity until Chapter 12. However, it can be helpful in trying to
understand curve concepts to be able to play around with the curves, including yanking on
their control points. I’m not going to go into all the interactive theory here, so some of the
code in the upcoming interactive examples may look odd (and possibly scary). You can
peek ahead to Chapter 12 if you want to, but I’d suggest just playing with the stuff for now,
and get to the learning part a little later. You’re entitled to fool around a bit, in blissful
ignorance.
More curve and Bézier variations
The next two examples, shown in Figures 7-32 and 7-33, are just variations on a theme.
You’ll eventually use the bezier() function to plot a more ambitious sketch consisting of
a very interactive ellipse, which you’ll be able to mess around with in real time. Hopefully
this example will reveal some of the creative potential of having to deal with curve complexity.
First, however, I’ll look at two more functions: bezierVertex() and curveVertex().
These functions are really just alternative forms of the bezier() and curve() functions.
The following example plots three spirals using the bezier() and bezierVertex() functions.
Again, I’ve added extra code to render the control handles to show how their placement
affects the spiral. I didn’t bother to render the anchor points in this example, and I
also doubled up the line() and ellipse() calls to save a few trees.
// bezier() vs. bezierVertex()
size(650, 225);
background(255);
rectMode(CENTER);
strokeWeight(2);
//bezier() - no fill
noFill();
bezier(50, 50, 92, 15, 134, 15, 175, 50);
bezier(175, 50, 215, 92, 215, 134, 175, 175);
bezier(175, 175, 135, 205, 105, 205, 75, 175);
bezier(75, 175, 50, 145, 50, 105, 75, 75);
bezier(75, 75, 100, 54, 125, 54, 150, 75);
bezier(150, 75, 175, 100, 175, 125, 150, 150);
bezier(150, 150, 134, 160, 118, 160, 100, 150);
bezier(100, 150, 92, 140, 92, 130, 100, 115);
//lines connecting anchor points to control handles
strokeWeight(1);
line(50, 50, 92, 15); line(134, 15, 175, 50);
line(175, 50, 215, 92); line(215, 134, 175, 175);
line(175, 175, 135, 205); line(105, 205, 75, 175);
line(75, 175, 50, 145); line(50, 105, 75, 75);
line(75, 75, 100, 54); line(125, 54, 150, 75);
line(150, 75, 175, 100); line(175, 125, 150, 150);
line(150, 150, 134, 160); line(118, 160, 100, 150);
line(100, 150, 92, 140); line(92, 130, 100, 115);