lesson two: everything you need to know

Lesson Two: Everything You Need to KnowChapter 5: Conditionals

Learning Processing

Daniel Shiffman

Presentation by Donald W. SmithGraphics from text

Learning Processing: Slides by Don Smith 2

Lesson Two: Everything You Need to Know

4: Variables

5: ConditionalsBoolean Expressions

Conditional StatementsHow a program produces different results based on varying circumstances

if, else if, else

Boolean variables

6: Loops


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.


What is a Boolean Expression?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 comparisonAre you 21 years old?

Is changeCount less than 5?

Is myScore between 80 and 89?

Is lastName ‘Smith’?

A B Output

0 0 0

0 1 0

1 0 0

1 1 1

A B Output

0 0 0

0 1 1

1 0 1

1 1 1

AND

OR


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)


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)// True Action

Only do ‘Action’ if condition isTrue

Action

ConditionTrue

False


Two-way conditionals: if elseUse 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

}

TrueAction

ConditionTrue

False

FalseAction


Examples and exercisesFind 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.


Multiple ActionsWhat 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 humansif (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 don’t forget to ‘match’ your curly braces!

TrueAction 1

ConditionTrue

False

FalseAction

TrueAction 2


Multiple-Way Branching: else ifWhat 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 doneThen go to the ‘bottom’

First TrueAction

FirstCondition

False

True

SecondCondition Second

TrueAction

False

True

ThirdCondition Third True

Action

True

False


else if with else at the endTwo ‘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 TrueAction

FirstCondition

False

True

SecondCondition Second

TrueAction

False

True

Both FalseAction

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

Multi-way Branching: Which to test first?


Gradebook Application

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


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?


if else Examples


float r = 150; // variablesfloat 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 ifYou can use if with no else clause!

Range check with constrain( )



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}

Three-way branching



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}

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

Logical Operators: AND Sometimes two (or more) things need to be true before you want to do somethingExample:

If age >= 16 AND permit == 1Print “OK to drive”

How do we spell ‘AND’? &&‘Nested ifs:’ One if, compound condition


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”);


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)

A B Output

0 0 0

0 1 0

1 0 0

1 1 1

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)



if (age >= 18 || (age >= 16 && permit == 1)) print(“OK to Drive”);else print(“Ride the bus”);



A B Output

0 0 0

0 1 1

1 0 1

1 1 1

Logical Operators: OR Sometimes one of (two or more) things is enough to decide

Example: If age >= 18 OR (age >= 16 AND permit == 1)


How do we spell ‘OR’? || (two vertical bars)






Note the use of parenthesis to ‘connect’ the AND clause

Exercise 5-5: Simple Rollover

Learning Processing: Slides by Don Smith

23

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

Second half of Chapter 5

5.5: Multiple Rollovers

5.6: Boolean Variables

5.7: A bouncing ball

5.8: Physics 101


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

…


boolean variablesYou 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



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”);

Using a boolean variable for ButtonsA 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 codeif (button == true) print(“I’ve been clicked!”);






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 codeif (button == true) print(“I’ve been clicked!”);if(button) // Does the same thing as if (button == true)





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 codeif (button == true) print(“I’ve been clicked!”);if(button) // Does the same thing as if (button == true)

Do you like the way the tests are lined up on multiple lines?

Example 5.5: A Button as a switchTest 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;}


Example 5.5: A Button as a switchTest where the mouse is in the mousePressed() method.

Then set a boolean variable to true or false




button = !button; // quite a bit shorter, eh?} button = !button; // quite a bit shorter, eh?}

Exercise 5-8: Click to start a moving ‘ball’ Use a boolean

variable to represent if we are moving or not.

Change the variable each time the mouse pressed.


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

Example 5-6: A bouncing ‘ball’Use a variable speed which can be positive or negative.

Change speed to negative if we bounce off the right edge.


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

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

void mousePressed() { speed = speed + 1; println(speed);}


SummaryConditionals 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

lesson two: everything you need to know

Documents