Conditional logic

Making decisions

When designing a program, there are many points where the program needs to do one thing or another based on the user input or some other condition.

Computers make decisions using a similar process that we do, by creating conditions to simplify a question.

For example, think of how you decided to wear the outfit you are wearing now. Lot's of decisions when into it, but most decision can be boiled down into binary options.

Is it cold outside? Then I will wear a jacket.

In programming, those decisions are referred as conditional statements. A conditional statement evaluates a condition to be either true or false and then performs actions based on the outcome.

JavaScript and other programming languages use a type of data called a boolean to represent binary values as true or false.

Booleans

A boolean is a data type that can be either true or false.

In JavaScript other values will evaluate to false, such as 0, "" (empty string), NaN, null, and undefined.

Other values default to true, such as "Hello World", 1, 99, or -99. Try evaluating some booleans in the console.

Boolean(true);
Boolean(false);
Boolean("");
Boolean(null);
Boolean(0);
Boolean(4);

if

if is the key word used in JavaScript to begin a conditional statement.

Just like in the example, we say if something is true—if the weather is cold—then do something—wear a jacket.

Remember mouseX and mouseY from the interaction lesson?

p5 has another system variable, mouseIsPressed. It also tells us some information about the user interaction with the computer. In this case, it is simply whether or not the user is pressing a button on the mouse.

function draw() { background('black'); if (mouseIsPressed) { background('plum'); } textSize(20); fill(255); text('mouseIsPressed = ' + mouseIsPressed, 20, 40); }

This example uses a conditional statement to evaluate whether the user is pressing a mouse button.

If the user is pressing a mouse button, the background is changed to 'plum'.

Comparison operators

In some cases, we need to figure out conditions that are not provided by simple boolean values like mouseIsPressed.

In these cases, we can use comparison operators to evaluate a condition.

The result of a comparison will always be true or false.

operator	condition
`==`	two values are the same
`!=`	two values are not the same
`>`	value 1 is greater than value 2
`<`	value 1 is less than value 2
`>=`	value 1 is greater than or equal to value 2
`<=`	value 1 is less than or equal to value 2
`===`	two values are the same and same type
`!==`	two values are not the same or not the same type

In the following example, the conditional statement compares the current position of the mouse on the x axis to the middle point on the x axis, or width / 2.

Depending on where the mouse is, this condition will result in different code being called and a different shape being drawn.

function draw() { background(220); if (mouseX > width / 2) { ellipse(width/2, height/2, 100); } stroke('white'); // display center line line(width / 2, 0, width / 2, height); fill(0); // display mouse value noStroke(); textSize(20); textFont('menlo'); text('mouseX: ' + round(mouseX), 20, 40); text('width/2: ' + width/2, 20, 60); text(round(mouseX) + ' > '+width/2+': ' +(mouseX > width/2), 20, 80); }

else

We can use else to tell our program what to do if the conditional is false:

function draw() { if (mouseIsPressed) { background('plum'); } else { background('lightblue'); } }

else if

else if is to test further conditions that are not covered by a simple else.

If it's snowing, I will wear a heavy coat. If it's raining, I will where a rain coat. Otherwise I will wear a jacket.

The next example shows a sketch that divides the vertical space into three parts and draw an ellipse in the section where the mouse is, creating a system like a stop light.

Can we rewrite the above example using variables?

if statements with no brackets

Sometimes you will see if statements that don't have curly brackets. This will work in the case where there is only one line following the if statenment conditional.

This is fine to do while writing code, but if you decide to expand the if statement you will need to add curly braces, so it rarely saves much time. Using curly brackets in all cases is recommended.

if (true) alert('this works');

if (false) alert('this will not run'); else alert('this also works');

// this is a problem if (false) alert('this will not run'); alert('this will, but maybe does not look that way');

Nested conditional statements

if statements can be placed inside of each other. There is no limit to the number or structure of if statements used in a program.

function draw() { background(220); rectMode(CENTER); if (mouseIsPressed) { if (mouseX > width/2) { ellipse(width/2, height/2, 200); } else { rect(width/2, height/2, 200, 200); } } }

AND and OR

In the above example, we need a nested if statement to decide first if the mouse is pressed and then the position of the mouse.

Logical conditions can be combined in one statement using the && (AND) and || (OR) operators. AND operators require both conditions to be true, while OR operators will be true if either condition is true.

function draw() { background(220); rectMode(CENTER); // AND if (mouseIsPressed && mouseX > width/2) { ellipse(width/2, height/2, 200); } }

function draw() { background(220); // OR if (mouseY > height/2 || mouseX > width/2) { ellipse(width/2, height/2, 200); } }