Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
598
nozzleRadius+random(sprayFeather);
py = mouseY-nozzleRadius*2+sin(radians(strokeAngle))* ➥
nozzleRadius+random(sprayFeather);
px2 = pmouseX-nozzleRadius*2+cos(radians(strokeAngle))* ➥
nozzleRadius+random(sprayFeather);
py2 = pmouseY-nozzleRadius*2+sin(radians(strokeAngle))* ➥
nozzleRadius+random(sprayFeather);
line(px, py, px2, py2);
strokeAngle+=1;
}
}
//eraser
else if (isEraserSelected){
stroke(canvasBg);
strokeWeight(sliderValue*4);
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
From within draw(), the value of Processing’s built-in mousePressed Boolean variable can
be checked. As I already discussed, Processing also has a mousePressed() function, which
I use a bit later in the sketch and outside of the draw() function. In the preceding code, I
used an outer if clause to check if the mouse is pressed over the drawing canvas. If this is
true, the nested if clauses check which tool is currently selected. If the pencil tool is
selected, then the process is pretty straightforward: a stroke color and stroke weight are
set, and Processing’s line() function is called. The line() function uses Processing’s
mouse and pmouse x and y variables: line(mouseX, mouseY, pmouseX, pmouseY);. mouseX
and mouseY are the current mouse coordinates, while pmouseX and pmouseY are the mouse
x and y coordinates one frame prior to the current one. These are very convenient variables
that work great for allowing you to easily simulate a drawing tool. Skipping the brush
tool for a moment, the eraser tool works identically to the pencil tool—only the stroke is
a little wider and the stroke color is always the color of the canvas background.
The brush code is a bit more complicated: as the brush is dragged, a series of lines are
drawn somewhat randomly around the mouse position, giving a brushy look to the mark.
I used the trig functions to generate the points around the current mouse position. You’ve
looked at code like this in numerous other places in the book, as well as earlier in the
chapter. The cos() function is used to get the x coordinate and sin() is used to get the y
coordinate. The expression nozzleRadius+random(sprayFeather); controls how far the
lines are drawn around the mouse position. You’ll notice that I subtracted nozzleRadius*2
at the beginning of each of the px, py, px2, and py2 lines. I did this so that the cursor would
appear in the center of the paint mark, not at the top-left corner. Try removing
nozzleRadius*2 from each of the lines if you want to see how the cursor shifts. When
painting with the brush, if you drag it quickly, the brush marks will straighten out, which is
a nice (unexpected) effect, thanks again to the pmouseX and pmouseY variables.
//slider dragging
if (isSliderMovable && mousePressed && mouseX > ➥
sliderBar[0] && mouseX