ConditionalsBoolean LogicRelational ExpressionsLogical Operators

Numerical Representation Binary

CS105 | 04 Conditionals 1

Pick a number

CS105 | 04 Conditionals 2

Boolean Expressions

§ An expression that evaluates to true or false.

§ Relational boolean expressions:- is your number greater than 50?- is your number less than 40?- is your number equal to 73?- is your number greater than or equal to 75?- is your number less than or equal to 37?- is your number not equal to 99?

CS105 | 04 Conditionals 3

Relational Operators

is your number greater than 50?number > 50

is your number less than 40?number < 40

is your number equal to 73?number == 50

is your number greater than or equal to 75?number >= 75

is your number less than or equal to 37?number <= 37

is your number not equal to 99?number != 99

CS105 | 04 Conditionals 4

(demo)

CS105 | 04 Conditionals 5

// my number to guessint number = 73;

// a relational expression used to guess my numberprintln(number > 50);

True or False?

6

int a = 8;int b = 5;

6 < aa / 2 > 6a * 5 == 8 * bb != 5

CS105 | 04 Conditionals

A. true

B. false

C. neither true or false

Conditional Statement

§ if a boolean expression is true, then execute a block of code

CS105 | 04 Conditionals 7

boolean expression

code block to execute

if true

coding

animation

CS105 | 03b Variables 8

using a conditional statement instead of modulo to a number in range

conditional_dot (if)

CS105 | 04 Conditionals 9

// conditional dot

void draw() {background(255);println(mouseX, mouseX > width / 2);

// the conditional statementif (mouseX > width / 2) {fill(#FF0000); // redellipse(0.75 * width, 50, 30, 30);

}line(width / 2, 0, width / 2, height);

}

Nested Code Blocks

CS105 | 04 Conditionals 10

see “04 Conditionals (trace)”

CS105 | 04 Conditionals 11

Rest Stop Analogy

§ A single if statement is like deciding to stop at a rest stop on a highway

CS105 | 04 Conditionals 12

conditional_dot (if else)

CS105 | 04 Conditionals 13

…// the conditional statementif (mouseX > width / 2) {fill(#FF0000); // redellipse(0.75 * width, 50, 30, 30);

} else {fill(#0000FF); // blueellipse(0.25 * width, 50, 30, 30);

}…

Detour Analogy

§ if else is like having to take a detour ( the if) or taking the original road (the else)

CS105 | 04 Conditionals 14

What can this code draw?

15

void draw() {background(200);

if (mouseY > 50) {fill(0); // black

} else {fill(255); // white

}

ellipse(mouseX, mouseY, 20, 20);

}

A B

C D

CS105 | 04 Conditionals

A, B, and C are all possible

conditional_dot (if else if)

CS105 | 04 Conditionals 16

…// the conditional statementif (mouseX > width / 2) {fill(#FF0000); // redellipse(0.75 * width, 50, 30, 30);

} else if (mouseX < width / 2) {fill(#0000FF); // blueellipse(0.25 * width, 50, 30, 30);

} else {background(random(255));

}…

Two Common Logic Errors with if statements

CS105 | 04 Conditionals 17

// the conditional statementif (mouseX > 50); {

fill(#FF0000); // redellipse(0.75 * width, 50, 30, 30);

}

// the conditional statementif (mouseX > 50) {

fill(#FF0000); // redellipse(0.75 * width, 50, 30, 30);

} if (mouseX < 50) {

fill(#0000FF); // blueellipse(0.25 * width, 50, 30, 30);

} else {background(random(255));

}

Adding semicolon after the boolean expression means no code block. A code block with no "if" means always execute.

Missing "else" makes two if statements.

If mouseX is greater than 50, the red ellipse is drawn. But then the second if statement tests if mouseX is less than 50. It isn't, so the else code block is executed which covers the red ellipse with a random background.

Fix this by added "else" before the second if statement.

The if statement does nothing, and the code block will always draw the red ellipse.

Fix this by removing the semicolon after the boolean expression.

shaper

checking what key was pressed

if (key == 'c') {shape = 1;

} else if (key == 'r') {shape = 2;

} else if (key == 't') {…

using a variable to save 'state':

if (shape == 1) {ellipse( … );

} else if (shape == 2) {rect( … );

} else if (shape == 3) {triangle( … );

}codingCS105 | 04 Conditionals 18

Equality vs. Assignment Operators

Equality Operator- is the left value equal to the right value?- e.g. state == 1 means "is state equal to 1?" - left and right can be anything that reduces to a single

value (a variable, a function that returns a value, a number, an expression)

Assignment Operator- assign the right value to the left variable- e.g. state = 1 means assign 1 to state- left must be a variable, right can be anything that

reduces to a single value (a variable, a function that returns a value, a number, an expression)

CS105 | 04 Conditionals 19

==

=

Numerical Representation: Integers

§ Binary Numbers: 1 and 0

§ Bits and Bytes

§ Integer Representation: - Fixed size- How to Handle Negative Numbers?

CS105 | 04 Conditionals 20

What is this binary number in decimal?

21

0101

CS105 | 04 Conditionals

A: 101

B: 8

C: 5

D: 4

E: 3

overflow

CS105 | 04 Conditionals 22

// almost largest integerint a = 2147483640;

void setup() {frameRate(2);

}

void draw() {a = a + 1;// watch the output!println(a);

}

What does this code draw after 10 frames?

23

int a = 0;

void draw() {background(200);

if (a < 5) {ellipse(50, 50, 50, 50);

} else {line(0, 0, 99, 99);

} a = a + 1;

}

A B

C D

CS105 | 04 Conditionals

What does this code draw after 10 frames?

24

int a = 0;

void draw() {background(200);

if (a < 5) {ellipse(50, 50, 50, 50);

} else if (a > 5) {line(0, 0, 99, 99);

} else {a = a + 1;

}}

A B

C D

CS105 | 04 Conditionals

Numerical Representation: Float

§ A civil engineer doesn't care about the difference between 10 meters and 10.0001 meters

§ 0.0001 meters is a huge difference for a microchip designer, but all measurements will be less than about 0.1 meters

§ A physicist needs to use the speed of light (about 300000000) and Newton's gravitational constant (0.0000000000667) in the same equation

CS105 | 04 Conditionals 25

Numerical Precision

§ How many numbers are there between 0 and 1?

§ How many decimal points in one-third (1/3)?

§ Computers can not always do exact mathprintln(15.3 + 3 * 0.01);println(15.4 + 3 * 0.01);

§ This has implications for equality testing …

CS105 | 04 Conditionals 26

precision

CS105 | 04 Conditionals 27

float a = 0;

void setup() {frameRate(2); }

void draw() {a = a + 1;if (a == 5) {background(255, 0, 0);

}// watch the console output! println(a);

}

Guessing Game

CS105 | 04 Conditionals 28

Boolean Expressions

§ An expression that evaluates to true or false.

§ boolean expressions with logical operators:- is your number greater than 50 and less than 60?- is your number less than 40 or greater than 80?- is your number not less than 32?

CS105 | 04 Conditionals 29

Logical Operators

is your number greater than 50 and less than 60?number > 50 && number < 60

is your number less than 40 or greater than 80?number < 40 || number > 80

is your number not less than 32?! (number < 32)

CS105 | 04 Conditionals 30

analogy

Logical Operators

&& means "and"|| means "or"! means "not"

CS105 | 04 Conditionals 31

Logical Operators

CS105 | 04 Conditionals 32

Order of Operations

CS105 | 04 Conditionals 33

first

last

Logical Operator Examples

CS105 | 04 Conditionals 34

int a = 15;int b = 5;

(a > 10 && b < 10)

(a < b || b < a)

(a == 10 && a < 20 && b > 0)

(a < 10 || 12 > b * 2)

(a + b > 16 || b – a > 0)

(a > 10 && a < 12 || b > 3 && b < 7)

!(a > 10)

coding

logical_dot

CS105 | 04 Conditionals 35

if (mouseX > width / 2 && mouseY < height / 2) {fill(#FF0000); // redellipse(0.75 * width, 50, 30, 30);

…

if (mouseX > width / 2 || mouseY < height / 2) {fill(#FF0000); // redellipse(0.75 * width, 50, 30, 30);

…

(demo)

CS105 | 04 Conditionals 36

extend shaper to work with CAPS LOCK on

if (key == 'c' || key == 'C') {shape = 1;

…

What is drawn on the 6th frame?

37

int a = 0;int b = 0;

void draw() {background(255);if (a < 10 || b > 0) {ellipse(25, 25, 30, 30);

} else {rect(60, 60, 30, 30);

}a = a + 1;

}

void mousePressed() {b = 100;

}

A B

C D

CS105 | 04 Conditionals

What is drawn on the 50th frame?

38

int a = 0;int b = 0;

void draw() {background(255);if (a < 10 || b > 0) {ellipse(25, 25, 30, 30);

} else {rect(60, 60, 30, 30);

}a = a + 1;

}

void mousePressed() {b = 100;

}

A B

C D

CS105 | 04 Conditionals

What is drawn after the mouse is pressed?

39

int a = 0;int b = 0;

void draw() {background(255);if (a < 10 || b > 0) {ellipse(25, 25, 30, 30);

} else {rect(60, 60, 30, 30);

}a = a + 1;

}

void mousePressed() {b = 100;

}

A B

C D

CS105 | 04 Conditionals

rect_hittest (roll over)

CS105 | 04 Conditionals 40

// the hit testif (mouseX >= x && mouseX <= x + w && mouseY >= y && mouseY <= y + h) {fill(#ff0000); // red

} else {fill(255);

}

...

Boolean Variables

§ The result of a relational expression is either true or false

§ Boolean variables store true or false

boolean a = 9 < 10;

println(a); // prints true

CS105 | 04 Conditionals 41

toggle

CS105 | 04 Conditionals 42

boolean on = true;

void draw() {if (on) {

background(255); // whitefill(255);

} else {background(30); // almost black fill(100); // navy

}ellipse(mouseX, mouseY, 30, 30);}

void mousePressed() {on = !on;

}

mousePressed, mousePressed()

§ mousePressed() is an event function- it's called once when the mouse button is pressed

§ mousePressed is a built-in boolean variable- it's true when the mouse button is pressed, false otherwise

§ Same for keyPressed and keyPressed()

CS105 | 04 Conditionals 43

draw (extra demo)

CS105 | 04 Conditionals 44

mousePressedpmouseXpmouseYkeyPressedkeyPressed()

What is drawn on the 2nd frame?

45

boolean b = false;

void draw() {background(200);

if (b) {ellipse(50, 50, 50, 50);

} else {line(0, 0, 99, 99);

} b = !b;

}

A B

C D

CS105 | 04 Conditionals