Processing: Creative Coding and Computational Art

As usual, I declare global variables at the top of the program, before the setup() function.
The nodeXPos[] and nodeYPos[] arrays hold the shape coordinate data as the shapes are
plotted. The initialNode color variable is used to dynamically set a color on the initial
plotted node when it is moused over—this functions like a rollover effect. (Later in the
chapter, I’ll look at more examples of custom interactive buttons in Processing.) The
Boolean variable isShapeClosed maintains the status of the closed state of the shape,
which is important, as animation only occurs when this variable is true. The dynamics variables
(most of which were discussed in Chapter 11) handle the animation. Many of the
variables are arrays, since animation is applied to each individual node. Since it’s not
known how many nodes will be plotted for each shape, these arrays are initialized with
zero length. Later in the sketch, as the user plots a node, values (and length) are added to
the array using Processing’s append() function.
void setup(){
size(400, 600);
frameRate(30);
smooth();
}
The setup() function is nice and simple—hopefully, it doesn’t need any explanation.
void draw(){
// create simple shape trails
fill(255, 36);
rect(0, 0, width, height);
if (nodeXPos.length>1){
// draw line between nodes
drawEdge();
// check if mouse is over original node
checkOverInitialNode();
// animate shape
moveShape();
}
// draw node
drawNode();
}
The draw() function is relatively simple as well, considering the amount of stuff happening
in this sketch. By creating some custom functions, I was able to keep the draw()
function pretty lean. I wrapped the three custom function calls (drawEdge(),
checkOverInitialNode(), and moveShape()) in a conditional block to ensure that at least
two nodes are plotted prior to connecting the nodes with lines. drawEdge() calls a function
that handles the drawing of the lines between the nodes. I called this function prior to
actually drawing the nodes so that the nodes appear on top of the connecting lines.
checkOverInitialNode() checks if the mouse is over the initial node, allowing the color
of the node to be changed. moveShape() animates the shape after it’s closed. Below the
conditional block, I called drawNode(), which, as you might suspect, draws the nodes.
INTERACTIVITY
575
12