Objectives

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

• conditional statements
• relational operators
• logical operators

Conditional statements and boolean expressions

• In this step, we will implement the code examples 5.1 and 5.2 from your lectures.

Conditional Example 5.1

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

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

void setup() {
    size(100, 100);
    noStroke();
    fill(0);
}

void draw() {
    background(204);
    if (mouseX < 50) 
    {
       rect(0, 0, 50, 100); 
    } 
    else 
    {
       rect(50, 0, 50, 100); 
    }
}

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

Conditional Example 5.2

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

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

void setup() {
    size(100, 100);
    noStroke();
    fill(0);
}

void draw() {
    background(204);
    if (mouseX < 33) {
        rect(0, 0, 33, 100); 
    } 
    else if (mouseX < 66) {
        rect(33, 0, 33, 100); 
    } 
    else {
         rect(66, 0, 33, 100); 
    }  
}

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

Conditional statements and logical operators

• In this step, we will implement the code examples 5.3 and 5.4 from your lectures.

Conditional Example 5.3

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

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

void setup() {
  size(100, 100);
  noStroke();
  fill(0);
}

void draw() {
  background(204);
  if ((mouseX > 40) && (mouseX < 80) &&
      (mouseY > 20) && (mouseY < 80)) {
      fill(255);
  } else {
      fill(0);
  }
  rect(40, 20, 40, 60);
}

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

Conditional Example 5.4

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

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

void setup() {
  size(100, 100);
  noStroke();
  fill(0);
}

void draw() {
  background(204);
  if ((mouseX <= 50) && (mouseY <= 50)) {
    rect(0, 0, 50, 50);             // upper-left
  } else if ((mouseX <= 50) && (mouseY > 50)) {
    rect(0, 50, 50, 50);            // lower-left
  } else if ((mouseX > 50) && (mouseY <= 50)) {
    rect(50, 0, 50, 50);            // upper-right
  } else {
    rect(50, 50, 50, 50);           // lower-right
  }
}

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

Exercises

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

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

Exercise 1

• The object of this exercise is to produce an animation that will:

  • Draw circles (diameter 100) as the mouse is moved (the background should not be cleared).
  • As each circle is drawn, vary its colour from the previous one (use mathematical calculations on your RBG colours).

  • To code this exercise, follow these steps:

    • Declare three variables (rColourValue, gColourValue, bColourValue) of type float. Give rColourValue a starting value of 0, gColourValue a starting value of 100, and bColourValue a starting value of 150.

    • In the setup() method, set the size of the window to 500x400, the background to black and the stroke to white.

    • In the draw() method:

      • set the fill to (rColourValue, gColourValue, bColourValue).
      • draw a circle with a diameter of 100 at the current mouse location.
      • write an if statement that will add one to the rColourvalue if it is currently less than 255, otherwise set the rColourValue to zero. Write a similar if statement for the gColourValue and the bColourValue.

• NOTE: Make sure you boundary test this exercise. What we mean by that is...test what happens when your colour reaches 0 or when it reaches 255. Does it reset itself and cycle through the colours again or does it get stuck in drawing only one colour?

Challenge Exercise 1

• Draw a continuously bouncing ball.

• For the moment, the xCoordiate should remain the same value i.e. the ball only bounces vertically, so it is only the yCoordiate that needs to change.

Challenge Exercise 2

• In a new sketch, draw a vertical line that is the height of your display window.

• This vertical line should start in the left most position of your display window and move right, pixel by pixel, until it reaches the right hand side of your display window.

• Upon reaching the right hand side, the vertical line should reverse direction and return, pixel by pixel, to the left hand side of the display window.

• As your vertical line is continually traversing the display window, your grayscale background should be varying very slightly in colour.

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.