Conditions

Assumed Knowledge

• Primitive Operations
• Variables

Learning Outcomes

• Understand what a boolean expression is
• Understand how boolean expressions can effect the flow of control in a program
• Write code that requires if-then-else statements
• Understand simple logical operations.

Conditions allow different code to run in different frames of the animation

Chapter 5 of Learning Processing by Danel Shiffman.

Statement or Expression

A conditional is a statement. It does one of two things. However, the boolean that determines which branch is an expression, it evalates to true or false.

Write a program that draws a blue circle that moves from the top to the bottom of the sketch and when reaching the bottom of the screen, will change direction and start moving up the screen.

solution

The problem description does not directly relate to conditions, so we need to “re-interpret” it to put it into “code-speak”. Another way to consider the problem statement (as a Processing programmer) is “write a program where a blue circle is drawn on the screen and every time it is drawn it moves a little. IF it has hit the bottom previously, it should move up, otherwiser it should move down”. This leads us more directly to some code. We need a condition so that we can choose which code path will run on any individual frame (if (hitBottom)) and to make it work we need a boolean recording if we have hit the bottom before. Finally, we need an condition that checks everytime we draw the sketch if we just hit the bottom.

int ypos;
boolean hitBottom;

void setup(){
  ypos = 0;
  hitBottom = false;
}

void draw(){
  background(255);

  if (ypos == height){
    hitBottom = true;
  }

  noStroke();
  fill(92, 136, 218);
  circle(width/2, ypos, 20);
  if (hitBottom){
    ypos--;
  } else {
    ypos++;
  }
  
}

Statements not Expressions

An if is a statement not an expression. That means it has no intrinsic value, it exists only for what it can do. For example, variables are expressions because if you put one in your code, it is the same as putting some value in that spot (the value stored in the variable). However, an if may effect variables, or draw things on the screen, but the statement itself has no value, i.e. if (1 < 2) {line(1,1,,1,);} is not the same as putting some value in that spot.

Adjust your animated blue circle so it also bounces off the top of the screen, thus always going up and down forever, never disapearing. Note that there are two approaches to solving this.

solution 1

We can simply use the hitBottom boolean in a smarter way. What if we think of is as “moving up” instead? Then it will be false at the start, and change to true when we hit the bottom, then false again when we hit the top.

int ypos;
boolean movingUp;

void setup(){
  ypos = 0;
  movingUp = false;
}

void draw(){
  background(255);
  
  if (ypos == height){
    movingUp = true;
  }
  if (ypos == 0){
    movingUp = false;
  }
  noStroke();
  fill(92, 136, 218);
  circle(width/2, ypos, 20);
  if (movingUp){
    ypos--;
  } else {
    ypos++;
  }
}

Notice that we can’t use an else on the ypos check. Many new programmers will try this. Why won’t that work?

solution 2

Solution 1 is the simplest, but you will see many people suggest the following solution. It works really well if any more complex animation is required, so it is a good idea to understand it now.

In this solution we rephrase the task into the following “draw a blue circle that is moving each frame of the animation. At first, it should move with a speed of +1 (i.e. down the screen) but when the circle hits the bottom of the screen its speed should reverse to -1 (i.e. up the screen). Again it will reverse when it hit the top of the screen, etc.”

Instead of keeping a boolean telling us what phase of the animation we are in, we are keeping a number telling us what speed the circle is moving, using the trick that a negative speed means we are moving up the screen instead of down.

int ypos;
int speed;

void setup(){
  ypos = 0;
  speed = 1;
}

void draw(){
  background(255);
  
  if (ypos == height){
    speed = -1;
  }
  if (ypos == 0){
    speed = 1;
  }
  noStroke();
  fill(92, 136, 218);
  circle(width/2, ypos, 20);
  ypos = ypos + speed;
  
}

Interestingly, this has saved us from one conditional! It is perhaps a little harder to see at first, but the code is shorter. The “variability” of the variable is doing the work of the condition. Note also how we now have many more options, we can speed up the animation quite easily which we could not in solution 1.

Furthering Your Understanding