Module 08 : Conditional Statements

• Topics
• Resources
• Review of Reas/Fry Examples
• In-Class Activities
• Sample Quiz Question

Topics

• Conditional statements (e.g. if and if/else)
• Boolean variables and expressions

New processing syntax:

• if statments
• else statments
• Built-in Boolean variables: mousePressed, keyPressed
• Additional built-in variables: mouseButton, key, keyCode

Resources

• pp. 56-70 of Ch. 5 of the Reas/Fry book

• You might review the entirety of the processing.org tutorial on interactivity, paying attention now to their use of conditional statements for robust behaviors.

• Watch Daniel Shiffman Video 5.0, Boolean Expressions (12 minutes)
  (available at learningprocessing.com and YouTube)

• Watch Daniel Shiffman Video 5.1, if/else (11 minutes)
  (available at learningprocessing.com and YouTube)

• Watch Daniel Shiffman Video 5.2, and/or operators (10 minutes)
  (available at learningprocessing.com and YouTube)

• Watch Daniel Shiffman Video 5.3, Boolean variables (9 minutes)
  (available at learningprocessing.com and YouTube)

• Optional Bonus: Watch Daniel Shiffman Video 5.4, Moving Ball Example (11 minutes)
  (available at learningprocessing.com and YouTube)

Review of Reas/Fry Examples

If you are interested in reviewing, the following are some (interactive) examples from the Reas/Fry reading.

Reas/Fry Example 5-10

Click to change the stroke color for one of the lines. This implementation relies directly on the built-in mousePressed boolean variable from within draw().

Implementation: code

Reas/Fry Example 5-11

This version uses an if/else construct to pick the stroke color.

Implementation: code

Reas/Fry Example 5-12

This version differentates between which mouse button was pressed. Stripe is colored white if left button is pressed and black if some other button is pressed. (Note, on Mac the default press is considered a "left" button and other buttons are simulated by combinations such as a control-click. Compatibility issues might be even worse when embedded in a browser.)

Implementation: code

Reas/Fry Example 5-13

Watch the line follow the mouse. Clever use of an offset variable to orient the arrow appropriately.

Implementation: code

Reas/Fry Example 5-14

Use of the dist() function to determine if mouse is within the circle (that is, if it is within the given radius of the center). For convenience, we have added an extra behavior so that pressing a key resets the radius to its original value.

Implementation: code

Reas/Fry Example 5-15

Use of the && operator (logical "and") to create a compound condition to test containment in a rectangle.

Implementation: code

Reas/Fry Example 5-16

This demonstrate use of the built-in keyPressed variable within draw().

Implementation: code

Reas/Fry Example 5-18

This shows how you can condition upon which key is pressed. Press 'n' to render an N and 'h' to render an H.

Implementation: code

Reas/Fry Example 5-19

Detecting non-ascii characters such as shift, control, and arrow keys takes more care. This demonstrate use of the left/right arrows.

Implementation: code

In-Class Activities

Try to recreate any of the following interactive sketches on your own.

Recolor the Canvas
For this sketch, the goal is to change the background color whenever the user clicks on the left half of the canvas.

Implementation: spoiler

Recolor the Canvas (part 2)
Similar to previous, but with background changing whenever the user clicks on the right half of the canvas.

Implementation: spoiler

Recolor a Circle
The goal of this sketch is to recolor the circle with a random color each time it is clicked (but not to recolor it if the click occurs outside the circle). For convenience, we note that Processing includes a dist function for computing the Euclidean distance between two locations.

Implementation: spoiler

Recolor a Rectangle
This time, we want you to recolor the rectangle when clicked. To test if a click is within the rectangle, you will have to make sure that it is between the min and max x-coordinate and that it is between the min and max y-coordinate.

Implementation: spoiler

Change Background
The background color can be changed through an appropriate key press. In particular, if 'r' is pressed, the background turns red. We use 'g' and 'b' to respectively select green or blue.

A Familiar Challenge
In this sketch, a ball move horizontally while vertically centered. However, whenever the mouse button is pressed, the ball color is drawn in red and the vertical placement of the ball mirrors the mouse's (and continues to mirror the mouse even if the mouse moves while being pressed). This can be implemented entirely from within draw() by conditioning on the built-in boolean variable mousePressed.

A Familiar Challenge (part 2)
As a slight change in behavior, we wish to have the y-coordinate of a red ball based upon the mouse location at the time it is pressed, but then to have the ball remain at that y-coordinate while the button remains pressed (even if the mouse drifts from that location). This takes a bit more care.

Growing Circles
This draws a circle of a random color, with the size of the circle determined by the length of time the mouse remains pressed. Note well that the center of the circle remains fixed, even if the mouse is moved while growing.

Hot Corner
This sketch changes the background corner any time the mouse enters over a "hot corner", which we define as a 20x20 pixel box at the lowerleft corner of the canvas. Note well, that we do not with for the background color to rapidly change once the mouse is within the corner (but it could change again if the mouse leaves and reenters the corner). The key to success for implementing this is to properly define the boolean condition that represents the mouse entering the hot corner.

Collision
In this sketch, one ball is controled by the mouse, while a black ball stays fixed in the center of the screen. Each time the user-controlled ball comes in contact with the fixed one, a new random color should be chosen for the user-controlled ball. However, we do not want it to rapdily flicker with new colors while it remains in contact. It should change once, when it first makes contact, and then not change again unless it separates and then re-makes contact. Note that

Bouncing Ball
This animates a circle moving on the canvas with velocity (vx,vy) chosen at random. Conditionals are used to invert the relative velocity anytime the edge of the ball comes in contact with an edge of the canvas. (A new random velocity is chosen when the mouse is pressed.)

Bouncing Ball with Controls
A version of the previous in which the user can use the up/down/left/right arrow keys to adjust the velocity.

(Note: there is a subtle flaw in the logic; can you get the ball to protrude into a wall? Can you decide how to fix the flaw?)

Pushpin
In this sketch, a pushpin icon follows the mouse location until a time at which the user presses the mouse button. At that moment, the pushpin should be fastened to the canvas in its current location and should remain there (not moving, even if the user were to click the mouse butotn elsewhere). Pressing any key on the keyboard should release the pushpin, after which point it should start tracking the mouse again until a subsequent button press.

Estimating Pi
A naive way to get an experimental approximation to π is as follows. Use a pseudo-random number generator to generate uniformly random (x,y) points in a square and then count how many of those points lie within the circle that is inscribed within the square. In theory, the circle's area is a &pi/4 fraction of the square, so if you look at four times the fraction of random points that lie within the circle, that should converge to π (presumably a quality random-number generator and a lot of time).

The following sketch animates this but picking one random point during each call to draw, and then rendering that point in red or green depending on whether it is within the circle. Our estimate of pi is shown below the figure.

Sample Quiz Question