Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
580
float y = 30;
float w = 10;
float h = w;
float xSpeed = 0;
void setup(){
size(600, 100);
btnX = width/2;
btnY = height-20;
btnW = 50;
btnH = 20;
}
void draw(){
background(200);
rectMode(CENTER);
fill(250);
stroke(150);
rect(btnX, btnY, btnW, btnH);
fill(0);
noStroke();
rect(x, y, w, h);
x+=xSpeed;
}
void mousePressed(){
if (mouseX>btnX-btnW/2 && mouseX< btnX+btnW/2 && ➥
mouseY>btnY-btnH/2 && mouseY< btnY+btnH/2){
xSpeed+=.2;
}
}
In this sketch, each time the mouse is pressed on the rectangle at the bottom of the
screen, the smaller square’s speed increases by .02. The mouse detection is now working
based on the bounds of the button. However, since no feedback is provided, the user
might not understand that the sketch is working (or even that the rectangle is supposed to
be a button). You could improve the sketch by giving the user some more visual cues, such
as changing the cursor icon during detected mouse events, adding different rendering
states to the button (up, over, and down), giving the button a label, and providing some
output based on the current speed of the moving square. The following sketch is a modified
version of the last that handles these improvements in two steps. The new and altered
code is shown in bold.
// Interactive Button (step 1)
// button
float btnX, btnY, btnW, btnH;