Objectives

On completion of this lab you should be able to code animated drawings using the following constructs:

• mouse events
• key events

Mouse events

• In this step, we will implement the code examples 6.1 to 6.4 inclusive from your lectures.

Example 6.1

• Create a new Processing sketch in your workspace and call it Example_6_1.

• Enter the following code into your sketchbook (don't copy and paste...write the code out):

void setup() {
  size(100,100);
}

void draw() {
   background(0);
   stroke(255);
   fill(128);
   if (mousePressed){
       rect(45,45,34,34); 
   }
   else{
       ellipse(45,45,34,34);     
   }
}

• Run your code. Does it work as you would expect? From looking at the code, what do you think should happen?

Example 6.2

• Create a new Processing sketch in your workspace and call it Example_6_2.

• Enter the following code into your sketchbook (don't copy and paste...write the code out):

void setup() {
  size(100,100);
}

void draw() {
  background(204);
  if (mousePressed == true)    
  {
       fill(255); // white
   } else {
       fill(0);     // black
   }
   rect(25, 25, 50, 50);
}

• Run your code. Does it work as you would expect? From looking at the code, what do you think should happen?

Example 6.3

• Create a new Processing sketch in your workspace and call it Example_6_3.

• Enter the following code into your sketchbook (don't copy and paste...write the code out):

void setup() {
  size(100,100);
}

void draw() { 
   if (mousePressed){
       if (mouseButton == LEFT) 
            fill(0);      // black
       else if (mouseButton == RIGHT)
            fill(255);    // white
   }        
   else { 
       fill(126);     // gray
    }
    rect(25, 25, 50, 50);
}

• Run your code. Does it work as you would expect? From looking at the code, what do you think should happen?

Example 6.4

• Create a new Processing sketch in your workspace and call it Example_6_4.

• Enter the following code into your sketchbook (don't copy and paste...write the code out):

void setup() {
  size(500,400);
  background(0);
}

void draw() {

  if (mousePressed) {
    background(0);
  }

  stroke(255);
  fill(45,45,45);
  ellipse(mouseX, mouseY, 100, 100);
}

• Run your code. Does it work as you would expect? From looking at the code, what do you think should happen?

• Move the stroke and fill function calls from the draw method to the setup method. Run your code. Does it change the functionality of the program? Why?

Exercises

• For each exercise listed below, open a new sketchbook.

• You may need to visit the Processing website for additional information.

Exercise 1

• Create a display window of 500x400, with a black background.

• When the mouse is pressed, draw a red circle (100 pixel diameter) with a white outline. Note: when the mouse is pressed and dragged, multiple circles will be drawn. When the mouse is released and dragged, no circles will be drawn.

Exercise 2

• Create a display window of 500x400, with a black background.

• When the LEFT mouse button is pressed, draw a red circle (50 pixel diameter) with a white outline. Note: when this button is pressed and dragged, multiple circles will be drawn.

• When the RIGHT mouse button is pressed, draw a blue square (length of 50 pixels) with a white outline. Note: when this button is pressed and dragged, multiple squares will be drawn.

• When no button is pressed and the mouse is dragged, nothing is drawn.

Challenge Exercise 1

• Visit the Processing website and read up on the following keyEvents:

  • keyPressed (boolean variable used to determine if a key was pressed).
  • key (which stores a single alphanumeric character i.e. the most recently pressed key).

• In a new sketch, draw a cirlce if the C key was pressed and a rectangle if any other key was pressed.

• Test your code...is the keyboard input case sensitive? Will both an upper case and a lower case c draw a circle?

Solutions

• The solutions for this lab can be found here.

• The file is in Zip format, so when you download it, you will need to unzip it. If you don't have unzipping software installed on your computer, 7Zip is a good choice.