Conditionals - Home | Cheriton School of Computer …dvogel/cs105f16/materials/lectures/04... · CS105 | 04 Conditionals 1 ... line(width / 2, 0, width / 2, height);} ... but all

ConditionalsBoolean LogicRelational ExpressionsLogical Operators

Numerical Representation Binary

CS105 | 04 Conditionals 1

Pick a number


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?


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


(demo)


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


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)


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


see “04 Conditionals (trace)”


Rest Stop Analogy

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


conditional_dot (if else)


…// 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)


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


A, B, and C are all possible

conditional_dot (if else if)


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


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


==

=

Numerical Representation: Integers

§ Binary Numbers: 1 and 0

§ Bits and Bytes

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


What is this binary number in decimal?

21

0101


A: 101

B: 8

C: 5

D: 4

E: 3

overflow


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


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

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

} a = a + 1;

}

A B

C D


What does this code draw after 10 frames?

24

int a = 0;


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


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


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 …


precision


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


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?


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)


analogy

Logical Operators

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


Logical Operators


Order of Operations


first

last

Logical Operator Examples


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


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)


extend shaper to work with CAPS LOCK on

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

…

What is drawn on the 6th frame?

37


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


What is drawn on the 50th frame?

38



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

}a = a + 1;

}


}

A B

C D


What is drawn after the mouse is pressed?

39



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

}a = a + 1;

}


}

A B

C D


rect_hittest (roll over)


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


toggle


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()


draw (extra demo)


mousePressedpmouseXpmouseYkeyPressedkeyPressed()

What is drawn on the 2nd frame?

45

boolean b = false;


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

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

} b = !b;

}

A B

C D


Conditionals - Home | Cheriton School of Computer …dvogel/cs105f16/materials/lectures/04... · CS105 | 04 Conditionals 1 ... line(width / 2, 0, width / 2, height);} ... but all

Documents