Processing Tutorial 4

toolNew tool, conditionals.

Conditional statements are named for the mathematician George Boole. Boole was a founder of the algebraic tradition in logic

Coding is one big logical brain game.

block3

Section I. Conditionals

Simply put, we use conditionals to make a comparison and decide whether something is true or false.

 

Common Language Example:

Kitties have whiskers –> true

Doggies purr –> false

kittyNumerical Tests:

17 is smaller than 16 –> false

10 equals 10 –> true

98 is greater than 99 –> false

 

block3

Remember these signs from Algebra?

SnowmanGreatLess_02

 

For your notes, we use these relational operators when coding in Processing:

Relational-Operators

block3

Important Key Note!

If you see:

if (x == y) {       // you are asking is x equivalent to y:

But, if you see:

          x = y ;              // you are stating that set x is equal to set y

                 (as you do when writing custom variables).

block3
Section II. If

When we use conditionals in programming, we use them to ask questions of the computer. A program may use a very long list questions depending on the the goal of the programmer. Each answer is followed by instructions on what the computer should do after it answers the questions. 

Remember from Section 2, that computers work in a sequential flow of instructions (top to bottom).

imgres-1

 

Example 1 (Mrs. Pacman Video Game):

Does Mrs. Pacman eat the cherry? –> if true then give player 100 points.

Example 2 (Something You Might Use in Processing):

Is the mouse on the left half of the computer screen? –> if true then draw a white rectangle.

 

In Computer Code This Looks Like 

if (mouseX <width/2) ; //If the mouse is on the left side of the screen then..

fill (255); //fill white

rect (0,0,100,200); // this rectangle

 

 

block3
Section III. Else (the other option, more choices for the computer to evaluate)

arcade_classics_mspacman_screen06
Is the ghost flickering a blue color when Mrs. Pacman collides with it?

If true then kill ghost.

What if this is false? How do we formally instruct the computer to handle this instruction? How can we tell the computer to navigate choices in the program?

red-dot Generally, we use our boolean expressions to ask questions which have more than one answer. So, more than one set of instructions will follow depending on the results. With boolean operators, in addition to if, we also use else. “Else” instructs the computer what to do if the answer is false. 

This is the syntax to write a boolean (aka conditionals) using “if” and “else” :

if (boolean expression) {     //If this boolean expression is true…

code to execute                  //do this

}                                         //close “if” statement with bracket

else {                            //If the first boolean expression is not true 

code to execute if initial boolean expression is false  //do this

}                            //close else statement with bracket

You will notice that when using boolean expressions (aka conditionals) in your programs that there are new rules to the syntax.

(Not every line is closed with a semi-colon).

Keep an eye on bracket structures {}, etc.

 block3

Exercise 1

Try this bit of code:

What is happening here? 

Explain what this program is telling the computer to do in comments.

1a. What is the boolean expression being evaluated?

1b. What happens if the boolean expression evaluates to “true” (based on mouseX movement)?

1c. What happens if the boolean expression stops being true (based on mouseX movement)?

block3

Section IV. Else If

The more you want to do with your code, the more branches you will be using with boolean expressions. Each new instruction in your program may lead to numerous more questions and instructions in the form of boolean operators.

branching

 

Example:

Did you do your work on time?

If yes, then you get paid.

If no,then you must quit your job or work for free to make up the lost work you didn’t complete on time.

red-dot

Here, we can see that another boolean is added to the instructions to branch the above example out further. Now, we have 3 options: get paid, quit your job, or work for free. With each new boolean expression there is new branch. When we add a boolean expression to a boolean expression, we use else if.

red-dot

This is a branching map showing the flow and usage of if, else and else if.

branching

block3

iconImportant Syntax Rules to Help You Construct Boolean Statements in Your Programs! 

In a conditional statement you can only have one if and only one else. But, you can have as many else ifs as you need. Remember this!

red-dot

You always need an if in your boolean expression, that’s what asks the initial question.

red-dot

Depending on the actions you need your program to execute, you may end up closing your boolean expression with an else or an else if.  This just depends on how many branches you need in the flow of your program.

red-dot

Sometimes, you might need to you use both else and else if. 

retro-joystick-clip-art

The more code exercises you do with conditionals, boolean expressions, if, else if, and else – the more sense it will make!

block3

Exercise 2:

Try this bit of code and then explain what is going on.

Annotate each line of code to demonstrate your knowledge.

Screen Shot 2015-09-11 at 2.06.45 PM

What is happening here? 

Explain what this program is telling the computer to do in comments.

2a. What is the boolean expression being evaluated?

2b. What happens if the boolean expression evaluates to “true”?

2c. What happens if the boolean expression becomes “false”?

block3

 

Section V.  Constraining the Values of Variables

 

Exercise  3:

Try this bit of code:

Play around with your mouse after you input the above code, note what you see happening in the sketch window. 

red-dot

Now, take a closer look and try to understand what is exactly going on.

What is the computer being instructed to do in each step?

 

NOTE: Use the command the println() command with the variable r

to figure out what the new command constrain() does…

println(“r=”,r);

Watch the println() values while turning constrain() on and off with //slashes.

What does the constrain do?

red-dot

 

red-dot

The addition or subtraction of the number 1 to variable r will go on

indefinitely if the values of the variables are not constrained.

red-dot

Note: constrain() needs 3 arguments

(the variable we want to constrain, the minimum limit, and the maximum limit amount).

Example:

r = constrain (r, 0, 255);

block3

Exercise 4

Enter the following code and run it in Sketch. Next, annotate your code in depth. What is this program telling the computer for each section? Be clear in your explanation as to exactly why certain color changes occur with mouse movements and clicks.

conditionals

What is happening here? 

Explain what this program is telling the computer to do in comments.

4a. What boolean expressions are being evaluated (there are 3)?

4b. What happens if the boolean expressions evaluate to “true”? Explain each one.

4c. What happens if the boolean expressions becomes “false”? Explain each one.

block3
Exercise 5

Program a small Sketch canvas that moves a square across the center of the window using a custom variable.

Start the shape at the lefthand side and then use the constrain function () to stop your square directly in the center of your canvas.

square

block3

Section VI. Logical Operators

We have played with many “if” statements. But, in all cases so far there was only 1 condition to satisfy. 

Example: If you are hungry then eat.

red-dot

Sometimes we need two conditions in our statements.

Example: If you have a healthy diet and you exercise then you are healthy.

Example: If you only exercise or you only eat well then you are only partially healthy.

 red-dot

Also, sometimes we need to code negative conditions.

Example: If you do not exercise and you do not eat well then you will be unhealthy.

boolean

 

 

Logical Operators Example (not code) 

If the mouse is on the right side of the screen AND the mouse is on the bottom of the screen, draw a red rectangle.

trashy

Logical Operator Example (code)

Type this code and run it:

and&&

Guess what the logical operator is in the above code?

(This is a new item not covered above).

block3

Exercise 6:

You will sometimes use relational operators and sometimes use logical operators depending on your boolean expression needs. Using the symbol chart below (in red and blue) of relational and logical operators, figure out whether the following statements are true or false assuming your variables are:  x = 5 and y = 6.

 Put your answers as comments in a code file, explain in your own words why you think each one is true or false. t-f-test

Important – Check Your Answers!

Make sure you understand and can explain your answers/corrections before moving forward.

block3

Exercise 7

Your assignment is to write a program that implements a simple rollover (an animation that changes when the mouse rolls over it). 

Your rollover should make a centered rectangle change from a white fill() to a red fill() when the mouse hovers over it.

 You will need to experiment with mouseX and mouseY positions to find the correct pixel space on the grid that will make a rectangle appear in the center.

Many variations of code possible here.

Screen shot 2013-08-27 at 11.31.15 PM

Use comments to explain your solution.

 

smiley

 

Try your own version before comparing with the answer here.

block3

Exercise 8

Start a fresh Processing canvas and design a multi-colored mouse rollover with 4 quadrants. Design your program so that each of the four quadrants changes a different color when the mouse rolls over it. Here’s four screen shots to show what I mean:

4-screen-shots

Pick any colors you like and remember that you have many tools you can use such as: if, else, else if and so on.

Push yourself to code the solution on your own, use println (mouseX,mouseY) to help you.

smiley

Peek at the answer when must, explain your code in comments.

block3

If the above concepts aren’t clicking for you or if you would like a fun review of these coding ideas, then try watching the very animated and informal free video tutorials by NYU professor and Processing champion, Daniel Shiffman.

Screen shot 2013-08-15 at 11.31.22 AM

The videos which reference this webpage:

Boolean Expressions

If, Else If, Else

Logical Operators

red-dot

block3

 

Screen shot 2013-08-14 at 10.26.55 AM