1.1 Conditionals and If Statements

Boolean Expressions

In this lesson, we are going to make our sketches interactive as opposed to static. The interactions that we will build in this learning activity are going to be based on conditional statements:

If a button, mouse, or key is pressed, or if a mouse is moved, we want something to happen. The conditional statements that we write affect the computer's output. We are going to write a program that changes the color of a shape based on the position of the mouse but first let's discuss conditional logic or boolean expressions. The word boolean indicates that something is true or false.

We want the computer to look at an expression and evaluate whether it is true or false, if it's true do one thing, and if it's false do another. Let's take a look at some expressions and evaluate them as true or false.

• 26>5 → 26 is greater than 5. Let's read that as a question. Is 26 greater than 5? Yes it is. This expression evaluates to "true."
• 10=14 → Since 10 is not equal to 14. This expression evaluates to "false"
• 4>210 → This expression is also "false"
• 2=2 → "true"

These "greater than" or "less than" signs are relational operators - they compare two numbers, which is what we're going to do in our first conditional statement. Our conditional statements will look like this;

The boolean expression inside the parentheses is the expression being evaluated. If the expression is true, then the computer will execute the code inside the curly brackets. If it evaluates to false, the code is not run and the program will continue with the code that follows the expression.

Using Variables in Conditional Statements

The statements we have written so far are pretty pointless. 5 will always be less than 6 and 5 will never be less than 4, so there can only be one result from these statements. These are pretty fixed.

On the other hand, we've had already written expressions using values that are constantly changing. They were called variables, and while some of them don't change (like when we create variables for the size or static location of a shape), some of them are changing all the time.

mouseX and mouseY are two of the built-in variables that we used. The value of the mouse location changes whenever you move your mouse. If we wrote the boolean expression "mouseX>100" it can be true or false. If the mouse were anywhere between 0 and 100 pixels on the x-axis, this expression would evaluate to false. If the mouse were anywhere between 101 and the width of the canvas, the expression would evaluate to true.

Let's write a sketch that will turn the background black if(mouseX>300). 300 is the center of our 600-pixel wide canvas so it will be easy to tell if our conditional is working. Based on our statement, if the value of mouseX is greater than 300, the background should turn black. We are also going to set an initial color for the canvas (I set it to white.) That way when my conditional evaluates to false (when mouseX<300), the canvas will turn white again.

Exercise 1: Change the Background with Conditionals

Use this example and try turning the canvas black when the Y position of your mouse is greater than 60, or another number. See what happens when you change the variable to mouseY.

Changing a Fill with a Conditional

We can use conditionals to change color, size, or any other values in our sketches. We're going to use the same conditional from the last example to change the fill of a square.

If the X position of the mouse passes the center of the canvas, the fill of the rectangle will turn blue.

It's important to remember to draw the rectangle after the conditional so that the fill() will be applied to the rect. See this example.

Changing a Custom Variable with a Conditional

We can also change custom variables inside conditional statements. In this example, both the width and height of the rectangle are determined by a variable called x. That variable is changed inside the conditional statement.

Exercise 2: Make Your Own Interactive Sketch

Use the mouse position to change a variable and create an interactive sketch.

Requirements:

• Create more than two variations by writing a conditional statement using the x position and y position of your mouse.
• You can change the color, size or position of a shape. See this example.
• You can adapt a previous sketch and add interactivity to it.