Processing: Creative Coding and Computational Art

Figure 7-32. bezier() vs. bezierVertex() sketch
The bezierVertex() function needs to be called between beginShape() and endShape(),
with the initial call being a single vertex() call. Remember that beginShape() begins
recording coordinate data until endShape() is called, at which time the data is rendered to
the screen and filled by default. Although the shape will be filled, the path defining the
shape will not be closed unless the CLOSE argument is included in the endShape(CLOSE)
call. Of course, visually, you can make the path appear closed by making sure that the
anchor point in the last bezierVertex(controPt1, controlPt2, anchorPt) call is placed
at the same coordinate location as the initial vertex(x, y) call. If the starting and ending
points are not in the same location, using the CLOSE argument will connect the two points
with a straight line, which is what occurs in the second spiral in the last example. By
default, the shape will be filled following the same rule, as illustrated in the third spiral,
even though this spiral is technically not closed. This same pattern of rules holds true for
the curve() and curveVertex() functions. For the sake of thoroughness, here’s a
curve()/curveVertex() version of the last example:
//curve() vs. curveVertex()
size(650, 225);
background(255);
rectMode(CENTER);
strokeWeight(2);
//curve()
noFill();
curve(92, 15, 92, 15, 134, 15, 175, 50);
curve(92, 15, 134, 15, 175, 50, 175, 175);
curve(134, 15, 175, 50, 175, 175, 75, 175);
curve(175, 50, 175, 175, 75, 175, 75, 75);
curve(175, 175, 75, 175, 75, 75, 150, 75);
curve(75, 175, 75, 75, 150, 75, 150, 150);
curve(75, 75, 150, 75, 150, 150, 100, 150);
curve(150, 75, 150, 150, 100, 150, 100, 150);
CURVES
287
7