Lesson 3.1

Conditinal Statements

Watch Introduction to Conditional Statements in p5.js

Video for 3.1:

Conditionals give control of what happens when.

  1. Our control of the flow of our programs has up until now been very limited.
  2. We setup() at the start, repeated draw() forever in the order that functions were written, and could stop that cycle and add a call to a function by using mousePressed().
  3. With conditionals we will have complete control of the flow.
  4. Conditional statements are used to perform different actions based on different conditions.

The if statement

We use the if statement to execute code if a condition is true.

Syntax

if (condition) {
block of code to be executed if the condition is true
}

Example 3.1.1: (of an if statement)

The Result:

The ellipse with black fill is drawn when the mouse is on the left hand side of the canvas. If the mouse is on the right hand side the background is drawn and the mouse remains hidden, but no ellipse appears.

Example 3.1.1

Will the block of code always run?

The condition is a Boolean statement – something which evaluates to true or false. For if statements the block of code may or may not get run. If the Boolean expression is true it is run, otherwise nothing happens – the next line of code is run as if the if statement were not there. Consider the diagram below.

The if else statement

We use the if else statement to execute a 1st block of code if a condition is true and a 2nd block if it is false.

Syntax

if (condition) {
block of code to be executed if the condition is true
} else {
block of code to be executed if the condition is false
}

Example 3.1.2: (of an (if) else statement)

The Result:

The ellipse with black fill is drawn when the mouse is on the left hand side of the canvas. If the mouse is on the right hand side the background is drawn and the mouse remains hidden, and a black rectangle appears.

Example 3.1.2

Will the block of code always run?

For if else statements one of the two blocks of code will run. If the Boolean expression is true the 1st is run, otherwise the 2nd is run. Consider the diagram below.

Example 3.1.3: (of an (if) else if statement)

The Result:

The rectangle with white fill and then the ellipse with black fill will be drawn when the mouse is on the left hand side of the canvas. The rectangle with black fill and then the ellipse with white fill when the mouse is on the right hand side of the canvas.

Example 3.1.3

Will the block of code always run?

For (if) else if statements one of the two blocks of code may or may not get run. If the 1st Boolean expression is true the 1st is run, if the 2nd Boolean expression is true the 2nd is run, otherwise nothing happens – the next line of code is run as if the (if else if) statements were not there.

Boolean expression use Comparison Operators

Given that x = 5 consider the following evaluations.

Example Operator Description Result
(x == 20) == equal to false
(x != 20) != not equal to true
(x > 20) > greater than false
(x >= 20) >= greater than or equal to false
(x < 20) < less than true
(x <= 20) <= less than or equal to true

Exercise 3.1a: Draw 3 circles. All are white to start.

  1. Have the first at (100,200) turn and stay red if the mouse position is greater than 100 but return to white if less than 100.
  2. Have the second at (200,200) turn and stay green if the mouse position is greater than 200 but return to white if less than 200.
  3. Have the third at (300,200) turn and stay blue if the mouse position is greater than 300 but return to white if less than 300

Exercise 3.1a