Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
582
btnBackground = btnOverState;
} else {
cursor(ARROW);
btnBackground = btnUpState;
}
}
The sketch makes a little more sense visually now. Processing’s cursor(cursor icon)
function makes it really easy to change the cursor icon. The different built-in icons are
ARROW, CROSS, HAND, MOVE, TEXT, and WAIT. Please note that once you change the cursor
icon, the new icon will remain until you call the cursor(cursor icon) function again.
The final version of this sketch (shown in Figure 12-2) will make it even more user-friendly,
and will also add a few more interface elements, such as buttons with labels.
Unfortunately, making the sketch simpler for the user can mean more (potentially a lot
more) work for the coder. Creating ergonomically friendly interfaces requires a lot of
code, especially when the language (like Processing) doesn’t rely on a set of prebuilt widgets
(buttons, sliders, spinners, etc.).
Please note that the following Final Interactive Button Example sketch requires that
the Processing font Verdana-10.vlw be installed in the sketch’s data directory. You
can create the font yourself by using Processing’s Create Font command, found under
the Tools menu, or you can download the font from the Download section on the
friends of ED web site (www.friendsofed.com/downloads.html).
// Final Interactive Button Example
// 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;
// moving square
float x = 25;
float w = 10;
float h = w;
// randomly place square y position on screen
float y = random(h/2, 70);