Processing Tutorial 5


Boolean expressions head into more complex and rewarding pathways.


Section 1. Using Booleans To Programming Buttons

A boolean variable is a variable that can only be true or false. It is a switch that turns on or off.

When you want something turned off –


 the boolean variable = false.

When you want something turned on the boolean variable = true.


Try This Button:  

Notes on the Above Code:


if (button) is the same thing as if (button == true)

When you use the boolean operators if, else, and else if you are asking, “is this true?”


The default value of a boolean variable is false but we declared it anyway.

Why? Because initializing your variables is a good habit to get into so your code reads more clear. 


Exercise 1

Refer back to the code you just typed with the pink button. 

1a. What is the first condition that must be evaluated in order to determine if the button is true or false?

1b. If the button is true then what happens?

1c. If the button if false what happens?

1d. Create one custom int variable with an assigned value of 255, and use it in your second “if” statement in the red position of the fill(r,g,b) .

1e. Now, add a decreasing assignment operator  for this custom variable just after the fill() so that your custom variable decreases causing the pink color to turn blue when clicked.

1f. Add a println() command to show what the state is of the boolean variable named “button”, here’s how:

println (“button=”, button);

1g. Explain why the color change is happening.


Section 2. Making a Button Switch

In the above example, we could only turn on the button.

Now we want to turn it off and on like a switch. This means we need to create a toggle.

We need the computer to flip back and forth the conditions with each click.


on (true) –> click –> turn off (false) –>click –> turn on (true) –> click –> turn off (false) –>click –> and so on….


In Processing Code:

The boolean variable is named “button.” To assign it a value so it will click back and forth use the following syntax:

boolean button = !button;

This tells the computer to flip flop: not true becomes false and not false becomes true.


When the mouse is clicked on the rectangle switch,

we want the switch to it turn on or off (once and only once).

As we have seen before, if the mousePressed built-in variable 

code stays inside of the void draw() function

then it will continually re-execute in a loop.

So, that won’t work for a toggling button.


We need to relocate mousePressed so it will do what we want.

Processing also offers mousePressed() 

as an independent function()

outside of void draw() 

and it will execute only once (not loop)!


Try this:

Screen Shot 2016-09-22 at 2.39.23 PM

Examine this code thoroughly.

Note the relocation/reformulation of mousePressed() as a function outside of draw().

Note the use of button = !button to make a toggling switch.

Screen shot 2013-08-29 at 9.30.43 PM


Exercise 2

In the image below the code is incomplete. The partial code you see is from a previous exercise that made a circle travel across the screen. Now, we are going to make the circle travel across the screen continuously (left to right) when the mouse is pressed once. Use the model below and fill in the necessary code where there are //comments with questions. Give it a whirl and see if you can guess some of the code to make the circle travel.


Peek at the answer to help your learning.


2a. How is the variable circleX used in the code? Does its value change?

2b. How is the variable circleY used in the code? Does its value change?

2c. When draw () executes the code how many times does it activate the code inside of its brackets? (this is review).

2d. When mousePressed() is clicked once (remember it is outside of draw), why is it the case that circle keeps moving across the screen?


Exercise 3

3a. Make one tiny change to the above code inside of mousePressed()

so that the traveling circle stops and starts when the mouse is pressed as it moves to the right.smiley

3b. Add a few comments in your own words to explain why the ellipse stops and starts with this small change.


Peek at the answer if you need to.


Section 3. Create a Bouncing Ball

Time to program a red ball bouncing.

Below are reminders of the pixel grid system and the syntax symbols used in Processing. 


Exercise 4

Input the following code and run it in Sketch:

4a. Explain the boolean/conditional statement in Code Chunk 4. What does || mean? What are the two conditions “if” evaluates? What happens if one of those two conditions are met?


4b. In Code Chunk 4,  we multiply the variable “speedy” by a negative number when the boolean statement is satisfied. Here’s why:


Using this information, explain what happens to the two variables: “y” and “speedy”. How do they work together to make a bouncing ball when the code is executed?


Exercise 5


Using the above code example as a starter, add more variables and a second conditional statement so that the ball bounces not only up and down (vertically) but also left-to-right (horizontally). Try to complete as much of this problem as you can on your own before comparing with the answer below. 


Check your work


Add a comment explaining how you did with this exercise. What went well and what didn’t you think of?


Exercise 6 

Another fun bit of code to try with color shifts. 

6a. Type, save, and run the code below.

6b. Add a println() function for each of your variables: c1, c2, c1chg, c2chg  – these println() commands will help you analyze the code.

6c. Now figure the program out – explain what is happening by annotating the code in detail (line by line) to demonstrate you know how it works.


Before moving on, make sure you feel confident in your understanding as to why the above code does what it does.




Section 4. Black Square Problem

How can we use conditionals to program this little black square to travel along the inside perimeter of the canvas over and over again?


One way to solve this problem is to think of the rectangle’s motion as having four possible pathways.


We can adjust the x,y coordinate variables of the square to control the course it will take on each path.


We can use a “path” variable to program the square to move onto each new path after it finishes the previous path.


Exercise 7:

7a. Code the following and verify that your black square travels smoothly around all three perimeter pathways.

7b. Create a println() command for the variables: x, y, speed, and path.

7c. Using your println() commands and other clues, analyze paths 2 and 3. Comment with accurate explanations (of the conditional statements and variables) as to why the black square changes its directions for these two paths. How does the code tell the square where to go?

7d. Using the logic from Pathways 1-3, add a 4th Pathway so that it completes the perimeter and continually loops around all four paths.

7d answer


Exercise 8  – 12

Code the following five videos. Try on your own at first before looking at the answers at bottom.

8: Use MousePressed ( )


10: Two Balls Bouncing

11: Mouse Click to Grow and Mouse Click to Stop

12: Program these Rollovers

 * Peek at the answers


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:

The Bouncing Ball

And for review on boolean expressions:
Boolean Expressions
If, Else If, Else
Logical Operators

Screen shot 2013-08-14 at 10.26.55 AM