Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
586
//button 3
if (mouseX>btn3X-btn3W/2 && mouseX< btn3X+btn3W/2 && ➥
mouseY>btn3Y-btn3H/2 && mouseY< btn3Y+btn3H/2){
cursor(HAND);
}
else {
cursor(ARROW);
}
}
Figure 12-2. Final Interactive Button Example sketch
The finished interactive buttons example is likely a little intimidating, mostly due to its
length. One of the (annoying) difficulties of coding graphical interfaces is the sheer
amount of required code. Although verbose, interface code is not overly complex. Much
of the code is redundant. For example, the last sketch included three buttons (one of
which operated as a check box) which all shared a lot of common functionality.
// font used for button text
PFont myFont;
// buttons
float btn1X, btn1Y, btn1W, btn1H;
float btn2X, btn2Y, btn2W, btn2H;
float btn3X, btn3Y, btn3W, btn3H;
color btnUpState = color(200, 200, 200);
color btnOverState = color(200, 200, 50);
color btnDownState = color(255, 150, 20);
color btn1Background = btnUpState;
color btn2Background = btnUpState;
All three buttons are defined by btn#x, btn#y, btn#w, and btn#h properties. (The # symbol
just represents the different button numbers.) I could have made this example more efficient
and elegant by creating a Button or even Widget class, since all the objects have the
same four properties. This would be an excellent thing to try on your own. The rest of
the example should be straightforward, and stuff you’ve seen before. For example, notice
the following conditional statement within the draw() function: