1. Lesson Two: Everything You Need to Know
Chapter 5: Conditionals
Learning Processing
Daniel Shiffman
Presentation by Donald W. Smith
Graphics from text

2. Lesson Two: Everything You Need to Know
4: Variables
5: Conditionals
Boolean Expressions
Conditional Statements
How a program produces different results based on varying circumstances
if, else if, else
Boolean variables
6: Loops
Learning Processing: Slides by Don Smith

3. Three categories of operators
Numerical (mathematical) operators: + - * / %
Operates on numbers, the result is a number
Relational operators: > < >= <= == !=
Operates mainly on numbers, the result is a logical value: true/false
Logical operators: && ||
&&: and
||: or
Examples.
Learning Processing: Slides by Don Smith

4. What is a Boolean Expression?
AND
Something that resolves to either true or false (yes or no)
Not maybe…
Computers think in 1’s and 0’s
Remember truth tables
1 = ON = True
0 = OFF = False
Usually based on a comparison
Are you 21 years old?
Is changeCount less than 5?
Is myScore between 80 and 89?
Is lastName ‘Smith’? A B
Output 1 OR A B
Output 1
Learning Processing: Slides by Don Smith

5. Boolean Comparison Operators
Similar to Algebra
> greater than
< less than
>= greater than or equal to
<= less than or equal to
== eqality (equal to)
Note: ‘=‘ is the ‘assignment’ operator: x = 5;
!= inequality (not equal to)
Learning Processing: Slides by Don Smith

6. Boolean Expressions and if
What is a Boolean Expression?
A comparison that results in either a true or a false
Where do I use it?
Usually in parenthesis, after an if:
if (age >= 21)
// True Action
if (mouseX < width/2)
Only do ‘Action’ if condition is
True
Condition
True
False
Action
Learning Processing: Slides by Don Smith

7. Two-way conditionals: if else
Use else for ‘false’ actions after an if test:
‘Binds’ with the closest if:
if (age >= 21)
// True Action
else // age < 21
// False Action
Take one of the two paths:
True or False
Good idea to use curly braces:
if (age >= 21){
} else { }
Condition
True
False
False
Action
True
Action
Learning Processing: Slides by Don Smith

8. Examples and exercises
Find the larger number of two numbers. Two versions: using if or using if…else…
Moving rectangles with color changing. Three versions: Using if, using constrain, or using modulo.
Develop a program to simulate a stopping car.
Learning Processing: Slides by Don Smith

9. Multiple Actions What if I have more than one thing to do if true?
Make a ‘block’ of code after the if:
if (age >= 21) {
// True Action 1
// True Action 2
} else
// False Action
Indentation is for humans
if (age >= 21)
Without the curly braces:
Only the first statement after a conditional is executed
True Action 2 is executed no matter what age is!
And don’t forget to ‘match’ your curly braces!
Condition
True
False
False
Action
True
Action 1
True
Action 2
Learning Processing: Slides by Don Smith

10. Multiple-Way Branching: else if
What if you want more than two paths?
Use else if:
if (age >= 21)
// First True Action
else if (age > 18)
// Second True Action
else if (age > 5)
// Third True Action
Only one action done
Then go to the ‘bottom’
First
Condition
True
First True
Action
False
Second
Condition
True
Second True
Action
False
Third
Condition
True
Third True
Action
False
Learning Processing: Slides by Don Smith

11. else if with else at the end
Two ‘true’ paths and one ‘neither’ path?
Use else if:
if (age >= 21)
// First True Action
else if (age > 18)
// Second True Action
else
// Both False Action
First
Condition
True
First True
Action
False
Second
Condition
True
Second True
Action
False
Both False
Action
Learning Processing: Slides by Don Smith

12. Example of Multi-way Branching
Where the mouse is determines the background color
if (mouseX < width/3) {
background(255);
} else if (mouseX < 2*width/3) {
background(127);
} else {
background(0); }
Learning Processing: Slides by Don Smith

13. Multi-way Branching: Which to test first?
Learning Processing: Slides by Don Smith

14. Gradebook Application
Determine the letter grade for a number 0-100
90 – 100: A
80 – B
70 – C
60 – D
Below 60: F
How would you plan/code a solution?
What would you test for first?
What second?
How many tests do you need?
Learning Processing: Slides by Don Smith

15. Numeric Range testing
You often have to determine if a number is in a specific range (min to max)
Example: Which range is a number in?
0-25: Print “Young”
26-50: Print “Mid-Age”
>50: Print “Mature”
How would you plan/code a solution?
What would you test for first?
What second?
Can this be done with only two tests?
Learning Processing: Slides by Don Smith

16. if else Examples else ‘binds’ with closest if
float r = 150; // variables
float g = 0;
float b = 0;
void setup() {
size(200,200); }
void draw() {
background(r,g,b);
stroke(255); // Line down center
line(width/2, 0, width/2, height);
if (mouseX > width/2) // If right
r = r + 1; // more red
else // Else left
r = r - 1; // less red
if (r > 255) // Range Check r
r = 255;
if (r < 0) // Range Check r
r = 0;
else ‘binds’ with closest if
You can use if with no else clause!
Learning Processing: Slides by Don Smith

17. Range check with constrain( )
float r = 150; // variables
float g = 0;
float b = 0;
void setup() {
size(200,200); }
void draw() {
background(r,g,b);
stroke(255); // Line down center
line(width/2, 0, width/2, height);
if (mouseX > width/2) // If right
r = r + 1; // more red
else // Else left
r = r - 1; // less red
r = constrain(r,0,255); // Range Check r
Learning Processing: Slides by Don Smith

18. Three-way branching float r = 150; // variables float g = 0;
float b = 0;
void setup() {
size(200,200); }
void draw() {
background(r,g,b);
stroke(255);
line(width * 2/3, 0, width * 2/3, height);
line(width * 1/3, 0, width * 1/3, height);
if (mouseX > (width * 2/3)) // right 3rd
r = r + 1;
else if (mouseX < (width * 1/3)) // left 3rd
r = r -1;
else // center 3rd
ellipse(mouseX, mouseY, 30,30);
r = constrain(r,0,255); // Range Check r
Learning Processing: Slides by Don Smith

19. Exercise 5-3: Move a rectangle… but stop!
float x = 0;
void setup() {
size(200,200); }
void draw() {
background(255);
fill(0);
rect(x,100,20,20);
x = x + 1;
// Keep x in left half
// Conditional version:
// constrain version:
Learning Processing: Slides by Don Smith

20. Logical Operators: AND
Sometimes two (or more) things need to be true before you want to do something
Example:
If age >= 16 AND permit == 1
Print “OK to drive”
How do we spell ‘AND’? &&
‘Nested ifs:’ One if, compound condition A B
Output 1
int age = 17;
int permit = 1;
if (age >= 16)
if (permit == 1)
print(“OK to Drive”);
else
print(“Ride the bus”);
int age = 17;
int permit= 1;
if (age >= 16 && permit == 1)
print(“OK to Drive”);
else
print(“Ride the bus”);
Remember: else ‘binds’ with closest if
(without an else)
Learning Processing: Slides by Don Smith

21. Logical Operators: OR
Sometimes one of (two or more) things is enough to decide
Example:
If age >= 18 OR (age >= 16 AND permit == 1)
Print “OK to drive”
How do we spell ‘OR’? || (two vertical bars) A B
Output 1
int age = 17;
int permit = 1;
if (age >= 18 || (age >= 16 && permit == 1))
print(“OK to Drive”);
else
print(“Ride the bus”);
Learning Processing: Slides by Don Smith

22. Logical Operators: OR
Sometimes one of (two or more) things is enough to decide
Example:
If age >= 18 OR (age >= 16 AND permit == 1)
Print “OK to drive”
How do we spell ‘OR’? || (two vertical bars)
int age = 17;
int permit = 1;
if (age >= 18 || (age >= 16 && permit == 1))
print(“OK to Drive”);
else
print(“Ride the bus”);
Note the use of parenthesis to ‘connect’ the AND clause
Learning Processing: Slides by Don Smith

23. Exercise 5-5: Simple Rollover
int x = 50;
int y = 50;
int w = 100;
int h = 75;
void setup() {
size(200,200); }
void draw() {
background(255);
stroke(255);
// test if mouse is over the rectangle
if ( mouseX.. && mouseY.. && ???
// Change the color of the rectangle
rect(x,y,w,h);
Learning Processing: Slides by Don Smith

24. Second half of Chapter 5 5.5: Multiple Rollovers
5.6: Boolean Variables
5.7: A bouncing ball
5.8: Physics 101
Learning Processing: Slides by Don Smith

25. Multiple Rollover areas
Steps:
Draw a white background
Draw horizontal and vertical lines down the center
If mouse is in top left, draw black rectangle in that quadrant
If mouse is in top right, draw black rectangle in that quadrant
If mouse is in bottom left, draw black rectangle in that quadrant
If mouse is in bottom right, draw black rectangle in that quadrant
But how can we tell which quadrant it is in?
Upper Left: x = 0 to 99, y = 0 to 99
Upper right: x = 100 to 199, y = 0 to 99 …
Learning Processing: Slides by Don Smith

26. boolean variables
You may want to ‘remember’ if something is true or false and store it in a variable
Then you can compare it to true or false
Example:
If age >= 16 AND permit == true
Print “OK to drive”
int age = 17;
boolean permit = true;
if (age >= 16 && permit == true)
print(“OK to Drive”);
else
print(“Ride the bus”);
Learning Processing: Slides by Don Smith

27. Using a boolean variable for Buttons
A button is just a rollover area that senses mouse clicks.
Testing if (mouse is in the area of the object) AND mouse clicked can be quite a number of comparisons!
boolean button = false;
int ulx = 50, uly = 50, w = 100, h = 75; // rect variables …
if (mouseX > ulx && mouseY > uly &&
mouseX < ulx + w && mouseY < uly + h &&
mousePressed)
button = true;
else
button = false;
// Later in code
if (button == true)
print(“I’ve been clicked!”);
Learning Processing: Slides by Don Smith

28. Using a boolean variable for Buttons
A button is just a rollover area that senses mouse clicks.
Testing if (mouse is in the area of the object) AND mouse clicked can be quite a number of comparisons!
boolean button = false;
int ulx = 50, uly = 50, w = 100, h = 75; // rect variables …
if (mouseX > ulx && mouseY > uly &&
mouseX < ulx + w && mouseY < uly + h &&
mousePressed)
button = true;
else
button = false;
// Later in code
if (button == true)
print(“I’ve been clicked!”);
if(button) // Does the same thing as if (button == true)
Learning Processing: Slides by Don Smith

29. Using a boolean variable for Buttons
A button is just a rollover area that senses mouse clicks.
Testing if (mouse is in the area of the object) AND mouse clicked can be quite a number of comparisons!
boolean button = false;
int ulx = 50, uly = 50, w = 100, h = 75; // rect variables …
if (mouseX > ulx && mouseY > uly &&
mouseX < ulx + w && mouseY < uly + h &&
mousePressed)
button = true;
else
button = false;
// Later in code
if (button == true)
print(“I’ve been clicked!”);
Do you like the way the tests are lined up on multiple lines?
if(button) // Does the same thing as if (button == true)
Learning Processing: Slides by Don Smith

30. Example 5.5: A Button as a switch
Test where the mouse is in the mousePressed() method.
Then set a boolean variable to true or false
boolean button = false;
int ulx = 50, uly = 50, w = 100, h = 75; // rect variables …
void draw() {
if (button)
// actions if button pressed }
void mousePressed() {
if (mouseX > ulx && mouseY > uly &&
mouseX < ulx + w && mouseY < uly + h)
if (button) // alternate on every click
button = false;
else
button = true;
Learning Processing: Slides by Don Smith

31. Example 5.5: A Button as a switch
Test where the mouse is in the mousePressed() method.
Then set a boolean variable to true or false
boolean button = false;
int ulx = 50, uly = 50, w = 100, h = 75; // rect variables …
void draw() {
if (button)
// actions if button pressed }
void mousePressed() {
if (mouseX > ulx && mouseY > uly &&
mouseX < ulx + w && mouseY < uly + h)
if (button) // alternate on every click
button = false;
else
button = true;
button = !button; // quite a bit shorter, eh? }
Learning Processing: Slides by Don Smith

32. Exercise 5-8: Click to start a moving ‘ball’
// Declare a boolean, set to false
int circleX = 0;
int circleY = 100;
void setup() {
size(200,200); }
void draw() {
background(100);
stroke(255);
fill(0);
ellipse(circleX, circleY, 50, 50);
// Move the circle only after a click
void mousePressed() {
// react to the mouse being pressed
// Location of the mouse doesn’t matter
Use a boolean variable to represent if we are moving or not.
Change the variable each time the mouse pressed.
Learning Processing: Slides by Don Smith

33. Example 5-6: A bouncing ‘ball’
int circleX = 0;
int speed = 1;
void setup() {
size(200,200);
smooth(); }
void draw() {
background(255);
circleX = circleX + speed;
if ( circleX > width || circleX < 0)
speed = speed * -1; // reverse course
// Display the circle at x location
stroke(0);
fill(175);
ellipse(circleX, 100, 32, 32);
Use a variable speed which can be positive or negative.
Change speed to negative if we bounce off the right edge.
// What will this do?
void mousePressed() {
speed = speed + 1; }
Learning Processing: Slides by Don Smith

34. A note about debugging…
You can print the variable speed to see what it is doing.
Use println(speed) if you want one number per line.
int circleX = 0;
int speed = 1;
void setup() {
size(200,200);
smooth(); }
void draw() {
background(255);
circleX = circleX + speed;
if ( circleX > width || circleX < 0)
speed = speed * -1; // reverse course
// Display the circle at x location
stroke(0);
fill(175);
ellipse(circleX, 100, 32, 32);
void mousePressed() {
speed = speed + 1;
println(speed); }
Learning Processing: Slides by Don Smith

35. Summary Conditionals allow you to control the flow
if, else, else if allow many options
Boolean expressions are used inside if(… ) tests
Resolve to either true or false
Boolean expressions use comparison operators:
>, <, >=, <=, ==, !=
Boolean variables can be set to true or false, and also used in conditional expressions
AND and OR (&& and ||) are used to combine conditionals
You can use print() and println()to help debug your programs while you are testing them
Learning Processing: Slides by Don Smith