Processing Tutorial 5

icecreamm

Boolean expressions head into more complex and rewarding pathways.

 

block3

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 –

red_switch

 the boolean variable = false.

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

red-dot

Try This Button:  

Notes on the Above Code:

red-dot

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?”

red-dot

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. 

block3

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.

block3

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.

red-dot

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

red-dot

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.

images

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.

red-dot

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

red-dot

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

block3

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.

boolean-circle

Peek at the answer to help your learning.

smiley

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?

block3

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.

smiley

Peek at the answer if you need to.

block3

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. 

pixel-grid

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?

red-dot

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

polarity

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?

 

block3

Exercise 5

5a.

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. 

smiley

Check your work

5b.

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

block3

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.

color-fade-code

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

 

color-forms

block3

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?

blk-squ-prob-2

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

pathways

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

red-dot

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

red-dot

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.

red-dot

7d answer

block3

Exercise 8  – SELF-TESTS

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

8a: Use MousePressed ( )

8b: MOUSE CLICK / TOGGLE

 

8C: Two Balls Bouncing

 

8D: Mouse Click to Grow and Mouse Click to Stop

 

8E: Program these Rollovers

 * Peek at the answers

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:

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