Purpose of Chapter:
To run conditional operations to see how program produces different results depending on varying situations.
Boolean Expressions
Relational Operators for Booleans
>
<
>=
<=
==
!
Notice this one.
Boolean – An expression that evaluates to either true or false. It is used to create conditions and control how a program behaves when certain things happen.
About if() Statements
if statements, AKA conditional expressions, are one of the most important programming techniques because it allows for a program to act differently each time it is executed, depending on the input.
CAVEAT: The above statement should not be put in draw() because it could run a billion times, or until your computer hard drive crashes. I'm sort of kidding, but we will later talk about how to put it in keyPressed.
void keyPressed(){
if(key == 's'){
println("Saving now...");
saveFrame("screen-####.jpg");
println("Saving is completed.");
}
}
For example, you can create a mouse rollover effect that specifies that if the mouse is positioned on a shape, it lights up and displays text. See the practical example by rolling your mouse over Run and Stop in Processing.
Another example is that you can create an if function so that if the user presses the "s" key, the screen is saved as an image file.
if(key == 's'){
saveFrame("screen-####.jpg");
}
Syntax for Conditionals
if(Boolean test) {
//code to run if true
}
if(Boolean test) {
//code to run if true
} else {
//code to run if false
}
A single condition:
Two conditions:
if(Boolean test1) {
//code to run if true
}else if (Boolean test2) {
//code to run if true
}else if (Boolean test3) {
//code to run if true
else {
//code to run none of
//the above is true
}
Multiple conditions:
OK, & so
…Let’s jump in!
Here’s the challenge:
Create a program where a ball drops down from top of screen, and when it gets to 200px, it gets bigger and redder!!
HINT: See similar snippet on page 68
LATER, let’s also constrain() it to size 200px and y value of 600.
Sample of longer program
int x = 25;
int speed = 1;
float y = 110;
//The car will plunge when the highway ends.
void setup() {
size(600, 200);
frameRate(60);
}
void draw() {
background(#6699dd);
fill(#0066cc);
rect(0, 150, width, 100); //river
fill(100);
quad(0, 120, 300,120, 350, 170, 0, 170);//pavement
noStroke();
//Wouldn't you love to create the white rects in about
//4 lines of code? Wait till chap 6
fill(255);
rect( 10, 140, 12, 5);
rect( 30, 140, 12, 5);
rect( 50, 140, 12, 5);
rect( 70, 140, 12, 5);
rect( 90, 140, 12, 5);
rect( 110, 140, 12, 5);
rect( 130, 140, 12, 5);
rect( 150, 140, 12, 5);
rect( 170, 140, 12, 5);
rect( 190, 140, 12, 5);
rect( 210, 140, 12, 5);
rect( 230, 140, 12, 5);
rect( 250, 140, 12, 5);
rect( 270, 140, 12, 5);
rect( 290, 140, 12, 5);
rect( 310, 140, 8, 5);
quad( 310, 140, 318, 140, 323, 145, 310, 145 );
fill(#aa0022); //candy red bus
rect(x, y, 50, 15, 4, 5, 0, 0);
fill(200);
rect(x+5, y+3, 40,5);
fill(50); //tires
ellipse(x+10, y+12 , 10, 10);
ellipse(x+40, y+12 , 10, 10);
x = x+ speed;
//car falls when reaches end of highway
//not as sophisticated as with 'rotation' (ch14)
//We can get a head start on 'text' (ch 17)
if (x > 300 ) {
frameRate(2);
y= y+2;
x = x+1;
fill(#E8B600);
textSize(40);
text("Oh My GOD!!!", 350, 50);
}
}//end of draw
-Click inside.
-Then press CTRL-A
-Then Copy
Quick Challenge: �Use the starter code below to draw a circle on left side and triangle on right side.
/* Fill in the code to draw red circles on left half,
and green triangles on right when mouse is clicked*/
void setup(){
size(400,400) ;
}
void draw(){
noStroke();
}
void mousePressed(){
triangle(mouseX, mouseY, mouseX+20, mouseY+40, mouseX-20, mouseY+40);
}
Solution: break glass in case of emergency
/* Purpose: draw red circles on left; and green triangles on right */
void setup(){
size(400,400) ;
background(50);
text("Click to draw shapes", 20,30);
}
void draw(){
noStroke();
}
void mousePressed(){
if (mouseX > 200) {
fill(0,200,0) ;
triangle(mouseX, mouseY, mouseX+20, mouseY+40, mouseX-20, mouseY+40);
} else {
fill(200,0,0) ;
ellipse(mouseX,mouseY,25,25) ;
} //end of if/else
}
Testing for multiple conditions (if/else)
Here are the conditions and actions:
If the mouseY is on the top 3rd of the screen,
change background to red
or if mouseY is on the middle 3rd of the screen,
change background to yellow ; and add text “I’m in Middle”
otherwise if mouseY is on the bottom 3rd of the screen
change the background to green
FYI
This is like Fig. 5-4, pg. 70 in textbook except that it’s vertical
Constrain function limits a value
r = constrain(r, 0, 255);
This is used on pages 72-73 instead of a longer if/else statement.
The int() function converts any value to its integer representation. (See page 61)
Example 1:
float grade = int( random(0,100) );
Example 2:
float price = 65.00;
int wholePrice = int(price);
PRACTICE!
Let’s open exam 5.1
Then use constrain() rather than the other if()
PRACTICE!
Also open your “ball drop” from 9/23 and use constrain()
Exercise 5-1
Take a look online, but it gives no answer.
Multiple conditions, another example
SCENARIO: A scoring system where there are four possible scores – from excellent to poor.
Wherein:
90 and above = " Awesome"
70 - 89 = " i guess you’re ok"
60 - 69 = "Geez louise, are you kidding? "
0 - 59 = " Just Bad!"
The input for the grades will be a random variable as shown below. Use the text() function to display the result.
int score = random(40, 100);
This will not work. Let’s solve it together.
Please help me to decide words to use
This is like Exercise 5-1 with twists!!
Boolean Variables
Logical Operators
AND is: &&
OR is: ||
NOT is: !
A Boolean variable has only two possible values: true or false. It is common to use Booleans with control statements to determine the flow of a program.
For example, if the mouse is on a rectangle/button, it executes a program.
The logical operators for AND (&&) and OR (||) are used to combine simple relational statements into more complex expressions.
The NOT (!) operator is used to negate a Boolean statement.
Simple examples of AND and NOT
void draw() {
background(0);
if (mouseX > width/2 && mouseY > height/2) {
fill(#ffff00);
rect( 10,10,10,10);
}
}
void draw() {
rectMode(CENTER);
background(120);
if(!mousePressed) {
ellipse(50, 50, 50, 50);
}else {
rect(50, 50, 50, 50, 10);
}
}
Draw a “button shape” if mouse is pressed.
If it’s not pressed a circle is drawn.
Both conditions must be met in order to draw rectangle.
Note that
if(!mousePressed)
is same as
if(mousePressed == false)
Hence, mouse must be at bottom right quadrant.
Challenge:
If mouse is not at bottom right, else add text “No Way”.
Controlling Buttons with Logical Operators
Exercise 5-5: Make a rollover so that when mouse is over a specific rectangle, it changes color. (pg 77)
On your own, examine the other sketches from pages 77-83.
They are examples of controlling buttons by hovering, pressing, or clicking.
int x = 50;
int y = 50;
int w = 100;
int h = 75;
void setup() {
size(200,200);
}
void draw() {
background(255);
stroke(0);
}
Boolean to Switch on/ off
To be able to click the button and have it stay on. …like a toggle on/off, must put inside of mousePressed() function. This is different from draw because it only happens once. Two ways to say, “if it’s on, turn it off and vice versa.”
Explicit
if(button) {
button = false;
} else {
button = true;
}
Shorthand
button =!button;
//means button set to opposite.
See next slide
Boolean to Switch cont’d
Create a program so that when you toggle (click) a button, something happens.
Goal is to set it so that if button/variable is true, it becomes false and vice versa. See Example 5-5
//If button is true, car goes forward.
float cx= 50; //set horizontal position for car
int x = 50;
int y = 50 ;
int w = 40;
int h = 25 ;
boolean button = false ;
void setup() {
size(500, 300);
}
void draw() {
background( 0);
if (mouseX>x && mouseY>y && mouseX< x+w && mouseY<y+h && mousePressed) {
button = true;
} else {
button = false;
}
//sparkling line
stroke(random(50,255), random(50,255), 0);
line( cx+60, 250, random(cx+70, cx+200) , random(200,300) ); //sorta arbitrary line ending.
//car
fill(#936E09);
noStroke();
rect(cx, 240, 60, 25, 4, 10, 0, 0);
fill( 70);
ellipse(cx+10, 265, 15, 15);
ellipse(cx+45, 265, 15, 15);
//this action happens if button is true/
if(button) {
cx = cx + 3;
}else {
cx = cx - .2; //slowly backing up
}
//causes car to loop around
if(cx>width) {
cx=0;
}
//create the button
fill(#28D10F);
noStroke();
rect(x, y, w, h, 10);
fill(255);
text("GO!", x+10, y+15);
} //end draw
Variable: Create boolean and set to false
boolean button = false;
In draw(), tell what happens if it’s on, or otherwise
if (button) {
//do these things
}else {
//do these things
}
In mousePressed(), control the on and off
if (mouseX >x && mouseX < x + w && mouseY > y && mouseY <y + h ) {
button = !button;
}
This is similar
P.S. This is also an example of test questions
Create a button that switches a smiley face ON and OFF in the following manner. If variable is true, the face is yellow and smiling with an arc. If variable is false, face is blue and frowning with a different arc.
Click to sign up for �Show & Tell
//exercise 5_9 possibilities
int x= 0;
int speed= 3; //sped it up a bit
int y = 0;
float r = 255;
float g = 0;
float size = 75;
void setup() {
size(200,200);
}
void draw() {
background(0);
noStroke();
y = y + speed;
x = x + speed;
// to keep colors r&g between 0 & 255
g = g + 1;
r = r - 1;
if (g >255 ) {
g = 0;
}
if (r < 0 ) {
r =255;
}
//if it reaches either edge, turn around by changing polarity
if ((x > width) || (x < 0) || (y>height) || (y < 0) ){
speed = speed * -1;
}
//size change using some crazy association
if (x < width/2) {
size = size - 2;
}else{
size = size + 2;
}
//display circle
//stroke(#00aa00);
fill(r, g, 0 );
ellipse(x, y, size, size);
}
Exercise 5-9, pg. 86
These are possibilities for this exercise.
See Example 5-8 and its forked version
Path Along Edges
See Example 5-6 bouncing object
Looking for Show&Tell for Example 5-8
Click to sign up for �Show & Tell
Looking behind & ahead
Take a look at these two sketches and we’ll discuss them.
int teeth = 210; //bottom of teeth
int chew =2;
void setup(){
size(500,500);
}
void draw(){
background(#812E04);
//sky
fill(#59CAF5);
rect(0, 0, 500,300);
//legs
rect(200, 380, 20, 75);
rect(280, 380, 20, 75);
strokeWeight(10);
line(200,450, 245, 460);
line(280,450, 325, 460);
strokeWeight(1);
//big head&body
fill(#64CE19);
ellipse(250, 250, 300, 300);
fill(#FF67C0) ;//mouth
arc(250, 150, 200, 200, .47, 2.67, CHORD);
noStroke();
fill( 255);
//teeth = constrain(teeth, 210, 280);
triangle(200, 196, 210, 196, 205, teeth);
triangle(220, 196, 230, 196, 225, teeth);
triangle(240, 196, 250, 196, 245, teeth);
triangle(260, 196, 270, 196, 265, teeth);
triangle(280, 196, 290, 196, 285, teeth);
triangle(300, 196, 310, 196, 305, teeth);
teeth = teeth + chew;
if ( (teeth> 280) || (teeth< 210) ) {
chew = chew * -1;
}
//when the teeth comes down, she eats meat.
if (teeth >=260) {
fill(#BC841C);
rect(200, teeth-15, 112, 30, 20);
}
//eyes
strokeWeight(1);
fill(#defd20);
ellipse(170, 100, 90,90);
ellipse(330, 100, 90,90 );
fill(0);
ellipse(320, 130, 25,25 );
ellipse(180, 130, 25,25 );
}