Processing: Creative Coding and Computational Art

mouse trails
if (isTrailable){
fill(150, 16);
rect(width/2, height/2, width, height);
}
else {
background(150);
}
The if...else statement paints either a semi-opaque layer or an opaque layer, based on
the state of the isTrailable Boolean variable. Clicking the trails check box button controls
whether the variable is true or false. Within the draw() function, the drawing of
each of the buttons is handled with the following code:
stroke(100);
//btn 1 - decreases speed
fill(btn1Background);
rect(btn1X, btn1Y, btn1W, btn1H);
fill(75);
text("speed -", btn1X-17, btn1Y+btn1H/4);
//btn2 - increases speed
fill(btn2Background);
rect(btn2X, btn2Y, btn2W, btn2H);
fill(75);
text("speed +", btn2X-17, btn2Y+btn2H/4);
//btn3 - check box controls mouse trails
fill(255);
rect(btn3X, btn3Y, btn3W, btn3H);
fill(75);
text("trails", btn3X+10, btn3Y+btn3H/4);
if (isTrailsSelected){
// draw x in box
line(btn3X-btn3W/2, btn3Y-btn3H/2, btn3X+btn3W/2, btn3Y+btn3H/2);
line(btn3X-btn3W/2, btn3Y+btn3H/2, btn3X+btn3W/2, btn3Y-btn3H/2);
}
The last snippet in the preceding code controls whether the check box is filled or empty,
based on another Boolean variable, isTrailsSelected.
Each time the square exits the screen, either right or left, it is mapped back to the opposite
side so that it will keep moving. Also, just for some variety, the color and y position of
the box change randomly:
if (x>width){
x = 0;
y = random(h/2, 70);
movingSquareBackground = color(random(255),➥
INTERACTIVITY
587
12