tutorials / processing / if-statements

If Statements

tutorial processing basic

We now know how to call functions, use variables, and create our own variables and functions.

We’ve seen that values have different types. A type tells the computer what kind of data a value is, or what type of value a variable holds.

This tutorial introduces if statements, which allow us to perform different actions depending on what value a variable holds.

Boolean Values

Before we get into if statements, let’s talk about a new type of value: the boolean type.

Remember that a type tells the computer what kind of value a variable will hold. For example, the int type holds whole numbers, the float type holds decimal numbers, and the String type holds text. You create a variable by giving it a type, a name, and then a value:

int catLives = 9;
float accountBalance = -123.45;
String message = "Happy Coding!";

The new boolean type can only hold two values: true or false.

boolean isCodingFun = true;

Relational Operators

Boolean variables wouldn’t be very useful if we had to decide their values ahead of time. Instead, we can obtain boolean values through relational operators, which are how we check for inequalities (less than, greater than, equal to) of other values. Here’s an example:

float score = 95;
boolean isGradeA = score >= 90;

This code creates a float variable named score and sets it equal to 95. It then creates a boolean variable named isGradeA and sets it equal to the result of the inequality score >= 90. In this case, the inequality is true because 95 is greater than 90. So at the end of this code, isGradeA is holding the boolean value of true.

It might make more sense to read the right side first. First we take the inequality score >= 90 and get a boolean value from it (in this case, true), and then point the isGradeA variable to that value.

Boolean Operators

Similar to how you can add two float values using the + operator to get a third float value, or subtract them using the - operator, you can also operate on two boolean values to get a third boolean value.

And

You can combine two boolean values using the and operator. The and operator evaluates to true whenever the two boolean values are also true.

For example, if we had these two boolean variables:

boolean canSwim = true;
boolean canFly = true;

We could then use the and operator to make a third value that was only true when both of these boolean values are also true. To use the and operator, type two ampersands && between two boolean values:

boolean isDuck = canSwim && canFly;

The isDuck variable will only be true when both canSwim and canFly are also true. If either one of them is false, then isFlyingBird will also be false.

Again, it might make more sense to read the right side first. First we evaluate the && operator, which gives us a boolean value of true. Then we point the isFlyingBird variable to that value.

Or

We can also use the or operator, which works a lot like the and operator. The difference is, the or operator evaluates to true if either of the two boolean values is true.

To use the or operator, type two pipes || (they’re above the enter key, or shift+) between two boolean values:

boolean isFishOrBird = canSwim || canFly;

First we evaluate the || operator which gives us a boolean value, and then we point the isFishOrBird variable to that value.

Not

In addition to operating on two boolean values, we can also switch a single boolean value. Values that are true evaluate to false, and values that are false evaluate to true. This is called the not operator, and you use it by typing an exclamation point ! before the value you want to switch.

boolean sinks = !canSwim;
boolean falls = !canFly;

First we evaluate the ! operator which gives us a boolean value, and then we point the sinks variable to that value.

Combining Operators

It’s very common to combine these operators to form more complicated logic. Just keep in mind that operators give you new values, which you can then use more operators on. So you can do things like this:

boolean isMammal = !canSwim && !canFly;

First this code toggles (or negates) the canSwim and canFly variables to create two new boolean values. It then takes those values and feeds them into the && operator, which gives us yet another boolean value. Then we point the isMammal variable to that value.

(If this bothers you because it doesn’t account for animals like bats, beavers, and dolphins… check out the homework!)

There is a whole field of study devoted to boolean logic, so check that out if it sounds interesting. But for now, just know that boolean values contain true or false, and you can use operators like &&, ||, and ! on them.

If Statements

Now that we know what boolean values are, we’re ready to talk about if statements.

An if statement takes a boolean value and only executes its body if that value is true.

To write an if statement, write the keyword if, then inside parentheses () insert a boolean value, and then in curly brackets {} write the code that should only execute when that value is true. We call that last part the body of the if statement.

Here’s an example that draws a congratulations message, but only if your grade is an A:

float score = 95;
boolean isGradeA = score >= 90;
if(isGradeA){
   background(0, 255, 0);
   fill(0);
   text("Congratulations!", 7, 50);
}

This code uses an if statement to check whether isGradeA is true, and if it is, it draws a green background, changes the fill color to black, and then writes "Congratulations!" to the screen.

Since score is 95 (and 95 is greater than 90), then we get the congratulations message:

congratulations message

If isGradeA is not true (in other words, if it’s false (in other other words, if score is less than 90)), then the program doesn’t do anything. Try changing score to 85, and you’ll see a blank window:

boring gray nothing

Since isGradeA is now false, the body of the if statement is not executed, and it skips over all of the code inside the body.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Boolean Values and Variables

So far we’ve been splitting up the inequality and the if statement into two steps: first we create a boolean variable, and then we use that variable in an if statement. But we could combine that into a single step:

float score = 95;
if(score >= 90){
   background(0, 255, 0);
   fill(0);
   text("Congratulations!", 7, 50);
}

This does the exact same thing as our old code, except now we do the inequality (which gives us a boolean value) inside the if statement instead of splitting it into its own step. We aren’t storing the boolean value inside a variable, we’re just using the value directly. This will make our lives easier as we do more complicated things.

Else Statements

An if statement executes some code if its boolean value is true, and it skips that code if the boolean value is false. But what if we want to do one thing if the value is true and a different thing if it’s false? For this, we can use an else statement.

To use an else statement, just type the word else after an if statement, and then inside curly brackets {} put the code you want to execute when the boolean value is false:

float score = 85;

if(score >= 90){
   background(0, 255, 0);
   fill(0);
   text("Congratulations!", 7, 50);
}
else{
  background(255, 0, 0);
  fill(0);
  text("Study more!", 15, 50);
}

This code uses an if statement to check whether score is greater than or equal to 90. Since 85 is less than 90, that inequality is false, so the code inside the if statement is skipped. Instead, the program jumps to the code inside the body of the else statement, which draws a red background, changes the fill color to black, and displays the “Study more!” message.

study more

You can think about the code like this: “If the score is greater than or equal to 90, then display the ‘Congratulations!’ message. Otherwise, display the `Study more!’ message instead.”

Else-If Statements

An if statement executes some code if its boolean value is true, and an else statement executs code if the value is false. But what if we want to take different actions depending on multiple cases? This is where else-if statements come in handy.

An else-if statement is like a mix between an else statement and an if statement. You put an else-if statement after an if statement, and if the if statement’s value is false, then the else-if statement’s value is checked, exactly like an if statement. It’s probably easier just to show you:

float score = 85;

if(score >= 90){
   background(0, 255, 0);
   fill(0);
   text("Congratulations!", 7, 50);
}
else if(score >= 80){
  background(0, 0, 255);
  fill(255);
  text("Good job!", 18, 50);
}

This code uses an if statement to check whether score is greater than or equal to 90. Since 85 is less than 90, that inequality is false, so the code inside the if statement is skipped. The program jumps down to the else-if statement and checks the boolean value inside the else-if statement. Since 85 is greater than 80, the inequality is true, and the code inside the body of the else-if is executed. The code then draws a blue background, changes the fill color to white, and displays the “Good job!” message.

good job message

You can think about the code like this: “If the score is greater than or equal to 90, then display the ‘Congratulations!’ message. Otherwise check whether the score is greater than or equal to 80. If it is, then display the `Good job!’ message instead.”

Note that if score was 75, then the boolean values of both the if statement and the else-if statement would evaluate to false, so neither one of them would be executed.

If Else-If Else Combinations

You can follow an if statement with multiple else-if statements, and you can follow an else-if statement with an else statement. So we could expand our program to detect every grade:

float score = 75;

if(score >= 90){
   background(0, 255, 0);
   fill(0);
   text("Congratulations!", 7, 50);
}
else if(score >= 80){
  background(0, 0, 255);
  fill(255);
  text("Good job!", 18, 50);
}
else if(score >= 70){
  background(255, 255, 0);
  fill(0);
  text("Just okay.", 16, 50);
}
else if(score >= 60){
  background(255, 128, 0);
  fill(0);
  text("Not good!", 18, 50);
}
else{
  background(255, 0, 0);
  fill(0);
  text("Study more!", 15, 50);
}

This code uses an if statement to detect whether score >= 90. If it is, then it draws a “Congratulations!” message. If not, it goes to the first else-if statement and checks whether score >= 80. If it is, then it draws a “Good job!” message. If not, then it goes to the next else-if statement and checks whether score >= 70. If it is, then it draws a “Just okay.” message. If not, then it goes to the next else-if statement and checks whether score >= 60. If it is, then it draws a “Not good!” message. If not, then it goes to the else statement and draws a “Study more!” message.

Try changing the score variable to see the different messages.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Avoid Unncessary Checks

Only one body of code is entered in a string of if else-if else statements. As soon as the code enters one of the if or else-if statements, it stops checking subsequent else-if statements.

Look at this line of code, from our above program:

else if(score >= 80){

Notice that we’re only checking whether score >= 80. But for the grade to be a B, it also has to be < 90. Why aren’t we checking for that?

We aren’t checking to make sure that score < 90, because we already know that is true. We know this because if score was >= 90, then the first if statement would have been entered, and we wouldn’t even be executing this line of code.

Think about it this way: first we check whether the grade is an A. If it is, then we display the “Congratulations!” message and don’t check against any other grades since we already know the grade is an A. If it’s not an A, then we know that score < 90. We can then check whether the grade is a B by only checking whether score > 80. It it is, then we display the “Good job!” message and don’t check against any other grades since we already know the grade is a B. If it’s not a B, then we know that score < 80, and we continue that logic for the rest of the program.

Homework

Next: Animation