FRI | Conditional Statements

Inspiration #

Bouncing Ball #

Today, we finally get to the dumb fish phase, where we learn how to animate shapes using code with some level of behavior. Let’s create the classic DVD logo animation that entertained me and my peers during many of the lectures during my time at the University of Lapland.

Incrementation operators #

We can use the incrementation operators to manipulate variables over time. For example, here we have a variable x that increases by one pixel every frame.

let x = 0;
x = x + 1;

…or you can move left by subtracting

let x = 0;
x = x - 1;

You might also see the following ways to write these:
x++; // this is the same as x = x + 1;
x--; // this is the same as x = x - 1;

x += 5; // this is the same as x = x + 5;
x -= 5; // this is the same as x = x - 5;
You will evantually start using these shorter versions, but I will use the long form in the beginning of the course.

In the example below, the circle starts moving to the right but there is nothing stopping it from going beyond the edges of the canvas.

We can add an if to check for the boundaries and change the direction. In order to do this in a more efficient way, let’s also make the amount we increment a variable (the speed of the movement).

Example | Bouncing Ball #

The following code adds the following features that we go through in more detail in class:

animation for the y axis
fix the issue where the shape goes through the screen by taking into account the size of the circle
randomize the starting speed so that we get more interesting animations

Logical operators && and || #

It is possible to combine multiple conditions inside one if statement using the logical operators OR and AND.

&& #

// AND is written with && in JavaScript
// && checks if both of the conditions are true

// check if the mouse is on the right side of the screen AND mouse is pressed
if(mouseX > width/2 && mouseIsPressed == true){
  console.log("clicked on the right side");
}

|| #

// OR is written with || in JavaScript
// || checks if both of the conditions are true

// check if either mouse or key is pressed
if(mouseIsPressed == true || keyIsPressed == true){
  console.log("something was pressed");
}

Example | Bouncing Ball with logical operators #

This version of our code uses the logical operators to combine multiple conditions inside one if statement. It works exactly the same as the one we made earlier but is just a bit more condensed.

Click to see the code

let x;
let y;
let s = 100;
let xSpeed;
let ySpeed;

function setup() {
  createCanvas(500, 450);
  background(130, 80, 130);
  x = random(100, width - 100);
  y = random(100, height - 100);
  xSpeed = random(1, 5);
  ySpeed = random(1, 5);
}

function draw() {
  
  // draw background with some transparency
  background(130, 80, 130);
  
  // update values
  x = x + xSpeed;
  y = y + ySpeed;
  
  // check if the circle hit the wall
  if (x >= width - s / 2 || x <= 0 + s / 2) {
    xSpeed = -xSpeed;
  }
  if (y >= height - s / 2 || y <= 0 + s / 2) {
    ySpeed = -ySpeed;
  }

  // draw
  noStroke();
  fill(255);
  circle(x, y, s);
}

switch #

The switch statement is used to perform different actions based on different conditions. It’s really useful in situations where the input value has three or more possible options (like the keys from a keyboard).

switch(expression) {
  case a:
    // code block
    break;
  case b:
    // code block
    break;
  default:
    // code block
}

This is how it works:

The switch expression is evaluated once.
The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
If there is no match, the default code block is executed.

Example #

This example checks what key is pressed and does different things based on the input.

Keys 1 to 5 change the color
Keys u and d change the size of the brush
Pressing space will clear the drawing

Using mouseIsPressed and keyIsPressed inside the draw() means that the program looks if they are pressed every frame. This might sometimes have unintended consequences. A better way would be to use the mousePressed() and keyPressed() functions. We will go through them in later classes but feel free to explore them already.

Resources #

Homework #

Research #

Recap #

Go through the course materials for week 2. If you did not understand something we did, go through the examples and tutorials again. Rewrite the code, read through the explanations, try changing things and see what happens.

Assignment #

Add your version of the bouncing ball sketch to our Open Processing class. It can just be pretty much the same we did in class, but maybe try adding some of your own flavor to it.

For extra challenge, try the following:

something happens when the ball hits the wall (color changes)
try adding gravity and friction
try replacing the 2d shape with an image