10: Conditions and conditional statements

With a condition you can control if a specific part of your code is executed or not. Your program checks if a condition is fulfilled or not and depending on that an action block is executed or not. You remember action blocks from the chapter about functions. To check a condition, an if-statement is used.

Let‘s look at an example:

function draw() {
  background(255, 0, 0);
  if (mouseX > 200) {
    background(0, 255, 0);
  }
}

The condition in this example is mouseX > 200. It reads: „mouseX is bigger than 200“ and it compares two values. You probably now the bigger than sign from your math class. Conditions can always be evaluated to be either be true or false. If the condition is true, the code inside the action block (inside the curly braces) will be executed, if it is false the code will not be executed and will be ingored.

This code will make the background red while our mouse x-position is smaller than 200 px, otherwise it will make the background green. It is best to try it out in your editor right away.

Conditions and operators

Let‘s have a close look at the condition and what operators we can use to compare two values inside of a condition.

We already learned about the > operator for „is bigger than“. If you want check for „is equal or bigger than“ you will have to use this operator: >=. The same works also for „is smaller than“ (<) and „is equal or smaller than“ (<=).

If you want to check if something „is equal“ you use this operator: ===. Often you see code that uses this == operator, which works in a lot of cases. The main difference is that the first one will make a strict comparison, that means it compares that the values are the same and that the types are the same too. If you compare a string with a number, the strict comparison will always fail. If you use the non-strict operator, it will only check if the values are the same. So the number 42 would be the same as the string "42".

If you want to compare if something „is not equal“ you can use this operator: !==. There is a strict (!==) and a non-strict (!=) version of this operator with the same logic as mentioned above.

The else-statement

Another way to achieve the same result as above is this:

function draw() {
  if (mouseX > 200) {
    background(0, 255, 0);
  } else {
    background(255, 0, 0);
  }
}

The else-statement will be executed when the condition inside the if-statement evaluates to false. So in our example, if the mouseX position is bigger than 200 the background is green, else the background is red.

You can see that there is not just one way to solve a problem in programming. Most of the times there are multiple ways to solve a problem and all of them are equally correct.

The else-if-statement

There is also an else-if-statement, evaluating another condition. These conditions will be evaluated in the order you write them, from top to bottom. The first condition that is evaluated to be true wins.

function draw() {
  if (mouseX > 400) {
    background(0, 0, 255);
  } else if (mouseX > 200) {
    background(0, 255, 0);
  } else {
    background(255, 0, 0);
  }
}

In this example the background will be red if the mouseX position is smaller or equal than 200, if it is bigger than 200 but smaller or equal than 400 the background is green. If the position is bigger than 400 the background will be blue.

The order is important here. First we check if the position is bigger than 400, next we check if the position is bigger than 200 followed by the else-statement. As you can see we can build very complex logic with if-statements. Often it helps to draw or write down what you want to achieve and lay it out before you start coding.

You can add as many else-if-statements to an if-statement as you want. But there can always be just one else-statement connected to one if-statement.