Processing: Creative Coding and Computational Art

}
}
}
}
}
// bottom display window edge
if (nodeYPos[i]>height-nodeRadius){
nodeYPos[i] = height-nodeRadius;
xSpeed[i]+=jitter[i];
xSpeed[i]*=friction;
jitter[i]*=friction;
ySpeed[i]*=-1;
ySpeed[i]*=elasticity[i];
The final function in the sketch, moveShape(), controls the movement of the shape. I
nested all the motion code in the conditional block (isShapeClosed), which evaluates to
true only if the shape is closed. The actual motion code should look familiar, as similar
code was covered in Chapter 11. The for loop ensures that speed values are added to
each of the shape’s nodes (the lines connecting the nodes rely on the nodes’ coordinates
for their placement), and the collision code makes each node bounce off the sides and
bottom of the display window. The animation uses gravity and jitter, which simulate the
shape falling with acceleration and deflecting off an irregular ground surface. The array
variables elasticity[] and friction[] eventually bring the individual nodes to a stop at
the bottom of the display window.
Adding interface elements
Next, I’ll look at creating more elaborate interface elements, such as interactive buttons.
Processing doesn’t come with any native prebuilt buttons, but you can easily build them,
as I sort of did in the last example when I tested if the mouse was pressed on the initially
plotted node. The only difference between detecting a mouse event on a button and
detecting a mouse event on the entire display window is in the evaluation of the size of
the bounded hit area (the area that detects the event). Of course, when building a user
interface, you generally want to give the user more control than they get by simply clicking
the screen.
When creating a button, you can use Processing’s drawing/text functions or import a
graphic—I’ll discuss both approaches in this chapter. This first sketch creates a single button
that starts a simple animation of a rectangle moving across the screen:
// Start Button
// button
float btnX, btnY, btnW, btnH;
// moving rectangle
float x = 25;
INTERACTIVITY
579
12