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

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

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

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

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

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

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

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

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

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

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

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

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

Gradebook Application Determine the letter grade for a number 0-100 90 – 100: A 80 – 89.999 B 70 – 79.999 C 60 – 69.999 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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