Overview
This learning activity builds on conditional statements using the Logical Operators && and ||. Students create a hover button by changing the fill of a rectangle while hovering over it with the mouse.
Unit 2 Response & Draw
How can control flow allow for user interactions?
1.3 Logical Operators AND and OR
How can we make logical operators more interactive?
Suggested Duration
45 - 90 minutes
Objectives
Students will be able to:
- Create compound conditional statements
Vocabulary
| Conditional Statements | A set of rules performed if a certain condition is met. |
|---|---|
| Boolean Expression | A logical statement that is either TRUE or FALSE. |
| || OR | Joins two statements such that if one is true, the whole statement is true. |
| && AND | Joins two statements to make sure they are both true. If one is false, the whole statement is false. They must both be true for the whole statement is false. |
| Expression | A group of terms (the terms are separated by + or - signs) |
| Relational operators | <, >, >=, <=, &&, || |
Resources
- Video tutorial: Else, else if, AND, and OR
&& And
Let's add another element to our conditional statements. Say we want a change to occur in our sketch while the mouse is hovering over a specific range in our canvas. We can do this by using Logical Operators in our conditional statements. In the following example, the ellipse becomes a square when mouseX is between 200 and 400. While we can't use "between" in our conditionals, we can tell the program to draw an ellipse when mouseX is greater than 200 and less than 400. "And" is the first logical operator that we'll us and the syntax to write "And" in p5 is two ampersands (&&.) In this sketch, we draw an ellipse when mouseX is greater than 200, and when mouseX is less than 400. Otherwise (else) we draw a rectangle.
&& is used whenever you want the bracketed code to be executed only if both conditions evaluate to true.
|| Or
When we would like that code to be executed as long as one of the conditions evaluate to true, we use the logical operator "or." They syntax for "or" in p5 is two pipes (||). If we applied this to our last example, it wouldn't be very helpful. Every number is either greater than 200 or less than 400.
Instead, let's edit that code and pick two separate ranges. If the mouse is hovering within either of them, we'll draw an ellipse.
Exercise 1: Make a Rollover Button
Now that you know how to change a value when the mouse is in a specific range, we can start thinking about buttons. Try to change a fill of a rectangle when the mouse is hovering over it. You will need to think the range of both the mouseX and the mouseY positions.
You'll need to think about the the locations of the beginning and end of the shape on the x and y axis. The mouseX position needs to be greater than the left side of the rect, and less than the right side of the rect, and greater than the top line of the rect, and less than the bottom line of the rect. The boolean will be long but it's just a repetition of the same concept.
The square is located in the center of the canvas and the width is 40 pixels. The first line of the rect is therefore 20 pixels less than the center of the canvas (width/2-20.) The second line is 20 pixels greater than the center of the canvas (width/2+20). Your boolean will therefore read (mouseX>width/2-20) && (mouseX
If you're feeling ambitious, make 2 rollover buttons!