Processing Sketch

Setting Up the Sketch

First we set up the sketch as we would any Processing sketch with setup() and draw() functions.

void setup() {
    size( 800, 600 );
}

void draw() {

}

Drawing with the Mouse

Now we are ready to add some interaction.

Etch A Sketch Screenshot

Exercise 1

Create a new Processing sketch. Use the ellipse() shape to draw a trail of circles wherever the mouse goes.

Exercise 2

If you haven’t already, use variables to control the colour and diameter of the circles.

Clearing with a Key Press

Now that we have a trail of circles wherever the mouse moved, we need to add functionality to clear the screen. We will use the keyPressed() function.

void keyPressed() {

}

The keyPressed() function is called whenever a key on the keyboard is pressed.

Exercise 3

Using the background() function, clear the screen every time a key is pressed.

Exercise 4

If you haven’t done so already, use a variable or multiple variables to set the background color.

Full Source Code

color bgColor = color( 0 ); // color of background
color penColor = color( 60, 120, 20 ); // color of our pen

/* setup
everything here happens only once when
the sketch starts
*/
void setup() {
   size( 800, 600 );
   background( bgColor ); // set the background color
   noStroke(); // turn off outline around shapes
   fill( penColor ); // set pen color
}

/* draw
   everything here happens repeatedly
*/
void draw() {
  ellipse( mouseX, mouseY, 30, 30 );
}

/* keyPressed
   this function is called whenever a key is pressed
*/
void keyPressed() {
  background( bgColor );
}