Either-Or

Code that chooses

Up to now, draw() has always run top to bottom, every line, every frame. A conditional is the first tool that lets a sketch skip lines: run one block of code instead of another, depending on what's true right now.

The question a conditional asks always has exactly two possible answers: true or false. You already met that data type back in Week 2: a boolean. This week you finally get to do something with one: use it to steer which code runs.

That's the whole idea. Everything else this week (comparators, &&, chains of else if) is just more precise ways of asking the question and more places to send the answer.

The if statement

An if statement has three parts: the keyword, a question in parentheses, and a block of code in braces that runs only when the answer is true.

With no if, that block runs simply by being there. With an if guarding it, the block becomes optional, and the condition is what decides.

else and else if

An if by itself can only skip a block. Add else and you get exactly one of two blocks, always:

if (mouseX > 200) {
  fill(255, 0, 60);   // mouse on the right half
} else {
  fill(220);          // mouse on the left half
}

Stack more tests with else if to build a chain: JavaScript checks each condition top to bottom and runs the block belonging to the first one that's true. Every test after that is skipped entirely, even if it would also have been true.

let dotSize = 40;

if (dotSize < 20) {
  fill(0, 170, 90);     // small
} else if (dotSize < 60) {
  fill(255, 140, 0);    // medium, only checked if "small" failed
} else {
  fill(255, 0, 60);     // large, whatever's left over
}

Comparators: asking precise questions

A boolean expression is anything that evaluates to true or false (the thing that goes inside an if's parentheses). A comparator is how you build one out of two values.

Saving the answer

A comparator produces a boolean value, and like any value, you can store it in a variable instead of using it right away:

let isHovering = mouseX > 200;   // isHovering now holds true or false

Once you have a boolean variable, use it directly as a condition. Don't compare it to true again, because it already is the true-or-false answer, and asking the same question twice is a comparison you didn't need to make:

// unnecessary: isHovering already holds the answer
if (isHovering === true) { … }

// the variable is the boolean; just ask it
if (isHovering) { … }

This isn't new territory, either. Back in Week 2's reference table, mouseIsPressed and keyIsPressed were already boolean variables: p5 fills them in for you, every frame. You could have written if (mouseIsPressed) the moment you met them; you just didn't have if yet.

Logical operators: &&, ||, !

Three operators combine boolean expressions into bigger ones.

&&: AND

True only if both sides are true.

||: OR

True if at least one side is true.

!: NOT

Flips a single boolean to its opposite: !true is false; !false is true. It takes one value, not two.

// mouse is somewhere inside the canvas
if (mouseX > 0 && mouseX < width) { … }

// mouse is near either edge
if (mouseX < 20 || mouseX > width - 20) { … }

Boolean logic and efficiency

A sketch's draw() runs about 60 times a second. Every comparison inside it runs 60 times a second too, so a redundant one isn't free, it's just small and repeated. Efficient conditionals are about not repeating a question you've already answered.

• Use else if, not separate ifs, when only one outcome should happen. Separate ifs are all checked, every time, even after one has already matched. A chain stops at the first match (section 03).
• Order && and || so the cheapest or most likely test comes first. Short-circuiting (section 06) means the second side is sometimes never evaluated at all: put the test that fails often on the left of an &&, or the one that succeeds often on the left of an ||.
• Save a repeated comparison in a boolean variable instead of writing the same expression more than once in a frame (section 05).
• Don't re-ask what the chain already told you. Inside an else if branch, you already know every earlier test failed: there's no need to test the lower bound again, only whatever's still undecided.

Two ways to become your opposite: a = !a and a *= -1

“Flip to the opposite” is common enough in creative coding to deserve its own pattern, and it looks different depending on what you're flipping.

Toggling a boolean. mousePressed() is another function p5 calls for you (the same deal as setup() and draw()), you're just filling in what happens, this time whenever a mouse button goes down:

let isRed = false;

function draw() {
  if (isRed) {
    background(255, 0, 60);
  } else {
    background(220);
  }
}

function mousePressed() {
  isRed = !isRed;   // whatever it was, it's the opposite now
}

Reversing a direction. The same “become your opposite” idea, but applied to a number instead of a boolean, this time a speed that reverses when it hits a wall:

let x = 0;
let speed = 3;

function draw() {
  background(220);
  x += speed;
  if (x > width || x < 0) {
    speed *= -1;   // hit a wall, reverse direction
  }
  ellipse(x, height / 2, 30, 30);
}

Quick reference

Comparators

Logical operators

Debug tip

print() works on boolean expressions exactly like anything else, and it's often the fastest way to check a condition before wiring any drawing code to it:

print(mouseX < 150);   // true or false, right in the console

Be able to do: three columns, fewest calculations

Divide the canvas into three equal vertical columns. Color the column red when the mouse hovers over it, in the most efficient way possible: the fewest number of calculations.

let colW;

function setup() {
  createCanvas(450, 300);
  colW = width / 3;   // 150, divides evenly
}

function draw() {
  noStroke();
  fill(220);
  rect(0, 0, colW, height);
  rect(colW, 0, colW, height);
  rect(colW * 2, 0, colW, height);
}

print(mouseX < colW);

if (mouseX >= 0 && mouseX < colW) { /* column 1 */ }
if (mouseX >= colW && mouseX < colW * 2) { /* column 2 */ }
if (mouseX >= colW * 2 && mouseX < width) { /* column 3 */ }

function draw() {
  noStroke();

  if (mouseX < colW) {
    fill(255, 0, 60);   rect(0, 0, colW, height);
    fill(220);          rect(colW, 0, colW, height);
                        rect(colW * 2, 0, colW, height);
  } else if (mouseX < colW * 2) {
    fill(220);          rect(0, 0, colW, height);
    fill(255, 0, 60);   rect(colW, 0, colW, height);
    fill(220);          rect(colW * 2, 0, colW, height);
  } else {
    fill(220);          rect(0, 0, colW, height);
                        rect(colW, 0, colW, height);
    fill(255, 0, 60);   rect(colW * 2, 0, colW, height);
  }
}