Processing: Creative Coding and Computational Art

curve() and bezier()
The next two Processing curve functions I’ll look at are curve() and bezier(). I’ll consider
these functions together, as they share some common implementation issues. As you’ve
probably gathered by now, the implementation of curves is a little complex. Fortunately,
Processing’s curve() and bezier() functions simplify curve generation quite a bit. These
functions encapsulate pretty sophisticated mathematical ideas, including cubic polynomials—which
you looked at a little—as well as some calculus. I’m not going to deal with the
calculus here, nor mess directly with polynomials. The functions each require eight arguments,
representing the x and y components of four points. The bezier() function uses
two points (the first two parameters and the last two parameters) to describe the ends of
the curves (anchor points), and two additional points (the middle four parameters) to control
how the curve moves between the endpoints (referred to as control points). Here’s an
example (shown in Figure 7-26). Please note that I took the liberty of connecting the control
and anchor points with lines to help illustrate how the structure works.
//Bézier sketch
size(400, 400);
background(255);
smooth();
/*I used Java's Point class, a convenient
data type for holding x,y coords, with public
access to x and y properties (pt.x or pt.y)*/
Point pt1 = new Point(150, 300);
Point pt2 = new Point(100, 100);
Point pt3 = new Point(300, 100);
Point pt4 = new Point(250, 300);
//plot curve
stroke(0);
bezier(pt1.x, pt1.y, pt2.x, pt2.y, pt3.x, pt3.y, pt4.x, pt4.y);
//draw control points connected to anchor points
stroke(150);
line(pt1.x, pt1.y, pt2.x, pt2.y);
line(pt3.x, pt3.y, pt4.x, pt4.y);
//control points
ellipse(pt2.x, pt2.y, 10, 10);
ellipse(pt3.x, pt3.y, 10, 10);
//anchor points
rectMode(CENTER);
rect(pt1.x, pt1.y, 10, 10);
rect(pt4.x, pt4.y, 10, 10);
CURVES
273
7