Processing: Creative Coding and Computational Art

Figure 7-35. Bézier Ellipse sketch, example 2
The program plots a closed ellipse using the bezier() function with a little help from
sin() and cos(). When plotting a circle using a Bézier curve, which you might remember
is a cubic curve (third-degree polynomial), the two control points get placed between the
two anchor points, dividing the curve into equal thirds, from anchor 1 to control 1 to control
2 to anchor 2. If you were using a quadratic curve (second-degree polynomial), as is
used by ActionScript’s curveTo() method, for example, you’d put your single control
point halfway between the two adjacent anchor points. When using cubic Bézier curves,
you can approximate a circle using only four anchor points; a quadratic Bézier requires
eight—however, neither of these generates a perfect circle. In the example, I used two different
radius variables (radius and controlRadius), one for the anchor points and one for
the control points. I did this so that you can eventually morph the ellipse into more interesting
forms by changing the spatial relationships between the control and anchor points.
However, I also wanted to maintain some of the original symmetry, so the variations aren’t
purely random.
The two functions that do most of the work are drawEllipse() and setEllipse().
setEllipse() fills the anchor and control point arrays (px, py, cx, cy, cx2, and cy2) based
on the trig equations. Notice that I instantiated the arrays and initialized their sizes at the
top of the setEllipse() function, based on the number of points passed into the function.
Since this needs to happen at both the start of the sketch and whenever anyone
clicks the screen, it seemed most efficient to create a function, rather than include the
CURVES
293
7