Variables Conditionals Boolean Expressions Conditional Statements How a program produces different results based on varying circumstances if, else if, else Boolean variables 2

Something that resolves to either true or false (yes or no) Not maybe… Computers think in 1s and 0s 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? 3 ABOutput AB AND OR

Similar to Algebra > greater than < less than >= greater than or equal to <= less than or equal to == equality (equal to) Note: = is the assignment operator: x = 5; != inequality (not equal to) Learning Processing: Slides by Don Smith4

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) // True Action Only do Action if condition is True 5 Action Condition True False

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){ // True Action } else { // False Action } 6 True Action Condition True False Action

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) // True Action 1 // True Action 2 Without the curly braces: Only the first statement after a conditional is executed True Action 2 is executed no matter what age is! And dont forget to match your curly braces! 7 True Action 1 Condition True False Action True Action 2

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 8 First True Action First Condition False True Second Condition False True False Second True Action Third True Action Third Condition

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 9 First True Action First Condition False True Second True Action False True Second Condition Both False Action

Where the mouse is determines the background color 10 void setup(){ size (500, 500); } void draw(){ if (mouseX < width/3){ background(255); } else if (mouseX < 2*width/3){ background(127); } else { background(0); }

11 // vs 2. How will this evaluate? int x = 75; void setup() { // set up start if (x > 25) { println( x + " is greater than 25"); } else if (x > 50) { println( x + " is greater than 50"); } else { println( x + " is 25 or less"); } } // setup close // vs 1. How will this evaluate? int x = 75; void setup() { // set up start if (x > 50) { println( x + " is greater than 50"); } else if (x > 25) { println( x + " is greater than 25"); } else { println( x + " is 25 or less"); } } // setup close

Determine the letter grade for a number – 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? 12

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? 13

14 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!

15 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 }

16 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; println("r = " + r);} else if (mouseX < (width * 1/3)){ // left 3rd r = r -1; println("r = " + r);} else{ // center 3rd ellipse(mouseX, mouseY, 30,30); println("r = " + r); } r = constrain(r,0,255); // Range Check r }

17 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: }

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 18 int age = 17; int permit = 1; if (age >= 16) if (permit == 1) print(OK to Drive); else print(Ride the bus); else print(Ride the bus); int age = 17; int permit = 1; if (age >= 16) if (permit == 1) print(OK to Drive); else print(Ride the bus); 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); 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) ABOutput

Sometimes one of (two or more) things is enough to decide 19 int age = 17; int permit = 1; if (age >= 18 || (age >= 16 && permit == 1)) print(OK to Drive); else print(Ride the bus); int age = 17; int permit = 1; if (age >= 18 || (age >= 16 && permit == 1)) print(OK to Drive); else print(Ride the bus); ABOutput

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) 20 int age = 17; int permit = 1; if (age >= 18 || (age >= 16 && permit == 1)) print(OK to Drive); else print(Ride the bus); 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

21 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); }

Multiple Rollovers Boolean Variables A bouncing ball Physics

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 … 23

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 24 int age = 17; boolean permit = true; if (age >= 16 && permit == true) print(OK to Drive); else print(Ride the bus); int age = 17; boolean permit = true; if (age >= 16 && permit == true) print(OK to Drive); else print(Ride the bus);

// Declare variables boolean click = false; // assigns a value of false to boolean int circleX = 0; int circleY = 0; 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 if (click){ // if Boolean click is true (pressed) circleX = circleX + 1; // then add 1 to x and y pos. circleY = circleY + 1; println (circleX); }else{ // if click is not pressed do nothing circleX = circleX; circleY = circleY; } void mousePressed() { // change the value of the Boolean to click = !click ; // the opposite: if true then false, if false then true/ // Location of the mouse doesnt matter } 25 This sketch will use a Boolean value as a variable which can then be used to act like a switch to activate or deactivate the movement of the object. New idea is ! or not equal to. click = !click; This makes the value of click become its opposite. In this case it toggles back and forth from true to false each time the mouse button is pressed. try it out for yourself.

Use a variable speed which can be positive or negative. Change speed to negative if we bounce off the right edge. 26 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); } // What will this do? void mousePressed() { speed = speed + 1; } // What will this do? void mousePressed() { speed = speed + 1; }

You can print the variable speed to see what it is doing. Use println(speed) if you want one number per line. 27 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); } void mousePressed() { speed = speed + 1; println(speed); }

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 28

1.) Take your project 1 design and add more functionality to it that applies these concepts. Create roll over actions, movement around the screen, conditions, mouse interactivity. Build on to your project with this new knowledge. 2.) Create a mock web navigation that utilizes roll over functionality and conditional statements to reveal content, create animation or draw images to the screen. Look ahead at text to add text to the screen also look at how to import images to your canvas and create web links.add teximport images 29