The IF Statement#
Welcome to this week's main event: Conditions. So far, all of our programs have just run its course. Sometimes top to bottom, sometimes with setup() and draw(), but they were always running pretty much unchanged. In our flow charts, we have those nice little diamond that we call decisions or conditions. And of course this is something we can do in code.
- This tiny word is the kicker right there.
And that's basically how we do it in real code, too. Let's have a small interactive example:
Draw runs pretty pretty often
In these examples, we make use of the fact that the draw() function runs automatically over and over again. For each single frame, we're also running through our if statements and act accordingly.
void setup() {
size(200, 400);
}
void draw() {
background(0, 0, 0);
if (mouseY > 200) {
circle(100, 100, 50);
}
}
This tiny line right there makes all the difference if (mouseY > 200) { ... } can either run the following block of code, or it can skip it entirely. We are either drawing that circle, or we don't. It all depends on the condition we're writing into the parentheses. In our case, we are checking for the mouse position. If that mouse position's Y-coordinate is larger than 200, then we execute that code block. That's an answer that's easy to give, because it can only be true or false.
Clear Decisions
Just like with flow charts, these conditions must have a clear answer. Even more: they must be a binary answer. A yes or a no. In computer terms, the condition must be true ✅ or it must be false ❌.
Block of Code
You've seen "Block of Code" before. That's also what we called the stuff in curly braces in setup() and draw()!
Getting to Netto instead#
Yes, I realize not all of you want to go to Mensa. Luckily, programming has you covered! I present to you, the else statement!
We can check some condition just like we did before (in this case, we check if mensaFoodIsWorthGetting is true ✅) and if the condition is true ("if the condition is met") then we goToMensa(). But that second part, starting with the else on line 3 will only get run if our condition isn't met. We run that second part when the condition is actually false ❌. We never run both. You don't get to eat two different things.
Let's have a code example that actually runs for this one, too:
void setup() {
size(200, 400);
}
void draw() {
background(0, 0, 0);
if (mouseY > 200) {
fill(255, 0, 0);
circle(100, 100, 50);
} else {
fill(0, 255, 0);
rect(75, 75, 50, 50);
}
}
As you can see, you can have more than just one line of code in there!
We're asking ourselves the question: "this is statement true?" - in our example: "Is mouseY greater than 200?"
if (mouseY > 200) {
Result: true ✅
If you can answer this with Yes, then this first block of code will be executed.
} else {
Result: false ❌
If instead you answer this question with No, (i.e. the position is 200 or smaller), then the code in this second block of code after the else keyword will be executed.
(This else-block does not always need to exist, it is optional.)
}
Go Nuts!#
Let's have some fun with it! Try this on your own computer.
void setup() {
size(200, 400);
}
void draw() {
background(0, 0, 0);
fill(255, 255, 0);
circle(100, 100, 50);
if (dist(mouseX, mouseY, 100, 100) > 70) {
fill(0);
rect(87, 90, 7, 3);
rect(106, 90, 7, 3);
rect(90, 110, 20, 3);
} else {
fill(255);
circle(90, 92, 9);
circle(109, 92, 9);
fill(0);
arc(100, 110, 20, 20, PI, TWO_PI);
}
}
Understand what happens here
Please take your time to really understand this silly example. What does if and else do? Look up dist() (okay, actually just follow that link and read through that first paragraph). Alter this example slightly.
Even more with else if#
It is possible to combine the else of one decision with the if of another to get as many resulting paths as you need. We're not going to go into too much detail here, but this is absolutely possible:
int health = 75;
if (health > 95) {
println("You are in perfect health");
} else if (health > 80) {
println("You are in good health");
} else if (health > 60) {
println("Things could be better, but you're doing fine");
} else if (health > 40) {
println("You should probably go and see a doctor");
} else if (health > 20) {
println("You should absolutely see a doctor as soon as possible");
} else {
println("This is an emergency");
}
Please note that the first applicable code block "wins". If we had written them the other way round, we would always have executed one of the "unhealthy" blocks, because any high number would have been greater than 20, for example. Also while the variable we're checking is always the same in the example, that doesn't need to be the case.
Relevant excerpt from Learning Processing#
(the section starts at 2:02:46 and runs through 2:18:30, the video should start and stop on these automatically.)