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.


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


Remember these signs from Algebra?


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



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

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


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


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

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.


Exercise 1

Try this bit of code:

What is happening here? 

Explain what this program is telling the computer to do in comments, specifically:

1a. Identify the condition (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)?


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.



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.


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.


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



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!


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


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.


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


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


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 condition/boolean expression being evaluated?

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

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


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. 


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?

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

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


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

What does the constrain do?



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

indefinitely if the values of the variables are not constrained.


Note: constrain() needs 3 arguments

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


r = constrain (r, 0, 255);


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.


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.

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.



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.


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.


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.




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.


Logical Operator Example (code)

Type this code and run it:


Guess what the logical operator is in the above code?

(This is a new item not covered above).


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. 

Important – Check Your Answers!

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


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.


Try your own version before comparing with the answer here.


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:


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.


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


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



Screen shot 2013-08-14 at 10.26.55 AM