Lab 3, due Thursday, October 24

Overview

In this lab, you will use randomness to create various animations. Then, you will learn about making user-interactive programs.

Review on Variables

Variables are named storage locations for values. Variables have a type that defines what kind of values can be stored in them. Remember float volume = getVolume(); from last week's Lab? We stored the value of the surrounding volume in a variable named volume, and the word "float" meant that the value stored was a real number.

Type	Meaning
float	real number (e.g. 5.444, 3.2, PI)
int	whole number (e.g. 6, 2, 3)
String	text (e.g. "hello", "computer" - the values need to be wrapped in quotes)

Examples

• float hourly = 9.5;
  Stores the value 9.5 in the variable named hourly.
• rect(20, 60, 10, hourly);
  Uses the value in the variable named hourly as the height of the rectangle.
• hourly = hourly + 2;
  Increases the value of the hourly variable by 2.

System Variables

Here are a few variables that are already pre-defined by Processing and can be used at any time.

• width: the width of the screen
• height: the height of the screen
• mouseX: the x coordinate of the mouse
• mouseY: the y coordinate of the mouse

Part 1: Randomness

Generating Random Numbers

Sometimes we need to generate random numbers for games, cryptography, simulations, etc. While it's very difficult to generate truly random numbers, here are some commands to generate pseudo-random numbers.

random(<max>);
Generates a random real number (type float) between 0 (inclusive) and max (exclusive).

random(<min>, <max>);
Generates a random real number (type float) between min (inclusive) and max (exclusive).

These commands can be used directly in place of a value, or the results of the command can be stored in a variable to be used later.

Examples

• ellipse(random(0, width), 40, 10, 10);
  draws circle of diameter 10 randomly located along the x axis at a height of 40.
• float rand = random(0, 60);
text(rand, 50, 50);
  stores a random value between 0 and 60 into a variable named rand, then displays this random value at (50, 50).
• fill(random(100, 255), random(255), 0, 100);
  sets the fill color so that the red component is random between 100 and 255, the green component is random between 0 and 255, the blue component is 0 and the transparency is 100. (Transparency is a number between 0 and 255, where 0 means completely transparent and 255 means completely opaque..

Create Screensavers with Randomness

The following are a few challenges. Each challenge should be in its own file named random_challenge#.pde where # is the number of the correspoding challenge, and should include a header with your name as a comment. You do not need to include the clicking behavior in your solutions. Keep in mind that we are not looking for you to produce our exact solution. We are only grading on effort and hope you have fun with this assignment.

For some of these problems, you will want to change the frame rate of the animation. Remember that the draw command is called 60 times a second, by default. You can change this by placing frameRate(times-per-second); in your setup command.
Remember that you can reference basic drawing commands and all Processing commands.

1. Create a screensaver that fills the screen with circles of random sizes, colors and positions! Notice that it looks better when you draw CIRCLES, not stretched out ellipses (hint: use a variable for the size). Click below to clear the screen:
   
2. Create a screensaver with fading circles. (Hint: what could you layer on top?):
   
3. Create a screensaver that fills the screen with blue-green lines that go from the top to the bottom of the screen. Click below to clear the screen:
   
4. Create a screensaver that fills each half of the screen with a different color. Click below to clear the screen:
   

Part 2: User Events

Human-Computer Interaction (HCI) is a large sub-field in Computer Science. In today's world, we find ourselves interacting with computers everywhere. In this portion of the lab, we will experiment wiht making interactive drawings and animations.

An action performed by the user, such as pressing a key or moving the mouse, is called a user event. Sometimes we want do certain things when a user event occurs, like changing the background color when the user clicks on the screen. Check out a demonstration of user events.

Like void setup() { } and void draw() { }, void mouseDragged, void mousePressed, and void keyPressed are commands that you can add to your code and modify. Any code you put in void mouseDragged happens when the mouse is dragged. Any code you put in void mousePressed happens when the mouse is clicked. Any code you put in void keyPressed happens when any key is pressed. You can add a conditional to only respond to a specific key, but this is optional. Remember that the mouseX and mouseY system variables will tell you the current location of the mouse on the screen, and are very helpful for user-interactive code.

For each challenge, save your file as user_challenge#.pde where # is the number of the corresponding challenge. Remember to include a header at the top of each file as a comment.

1. Create a program that draws a transparent circle of a random color at each location a user clicks. Click below for an example:
   
2. Add the ability to take screenshots of one of your earlier programs when the user clicks on the screen. Use the save command -- for example, save("face.png"); saves a screenshot to the file face.png. Take some cool screenshots of your face and your random art and print them out!
3. Create a simple drawing program by drawing circles as the user drags the mouse.
4. Create a program that lets the user "spray" paint. When the mouse is dragged, draw several little ellipses a random distance from the mouse.
   

Part 3: Learning Conditionals

Sometimes we only want to run code under particular conditions or in specific contexts. For example, you could imagine a game should display "Congratulations! You Win!" only after you've actually won the game. In order to run some piece of code based upon some condition (e.g. the volume variable is over 100), we wrap this code inside a condition. This code looks like such

if (some condition) {
    // some code.....
}
		

This condition that you place between the parentheses needs to be an expression that the computer can evaluate as either true or false, such that the computer knows whether it should run the code between the curly braces or not.

Take a look at this bouncing ball and the code to produce it.

We want the ball to "bounce off the walls", and we do this by saying "If it is the case that the ball is on the left wall (x value is less than 0) then we want to change the direction of the ball" and similarly for the right wall.

Note that if we want to check if x was a specific value, like 3, then we'd have to use the condition x == 3, and not x = 3. We use == to check for equality. (Remember that x = 3 would change the value of x to 3.)

Again, here are challenges for you to complete. Some of these are creative challenges. Save each challenge as condition_challenge#.pde, where # is the number of the challenge.

1. Change the bouncing ball example to stop or change directions at a particular value.
2. Create a program that does something interesting based on the side of the screen that the mouse is on. Here is an example (be creative!):
   
3. Make the screen pulsate with color as shown below (hint: it's nearly identical to ball bouncing!):
   
4. Change the bouncing ball example so that the ball also moves in the y direction and bounces off the top and bottom:
   

Turning in your work

Put all your .pde files, random_challenge 1-4, user_challenge 1-4, and conditional_challenge 1-4 in a zip file, called lab3.zip. Then, turn in you lab3.zip to the catalyst drop box.

How to zip your files

Mac OS X

Select all of your files that you want to zip together. Right click and select "Compress 12 Items." Then rename your Archive.zip to lab3.zip

Windows

Select all of your files that you want to zip together. Right click and select Send to > Compressed (zipped) folder. Then, rename your folder to lab3.zip