Lab 3: Functions and Animation
CS145: Images and Imagination, Fall 2010

[previous lab][schedule][next lab]

Due Date:
Sept 22 at midnight. Note, this assignment will graded as pass/fail (10 pts).

Reading

Summary of Goals

The main goals of this lab are to understand:

Suggested Folder Structure

On your H-drive, in the CS145 folder, create a new subfolder called Lab3. In this folder, create two subfolders, one named Practice, and the other named Lab3Final. Save all of the practice sketches for this lab into the Practice folder. In the Lab3Final folder, save all of the sketches that you plan on submitting.

Practice Activities

The setup() and draw() functions:

Go through the examples in the Chapter 5 of the text (up to p. 58) so that you understand how the setup() and draw() functions behave. Make small variations to see what happens.

The if-else statement:

Continue to work on the examples in Chapter 5 (up tp 67). This describes the use of the if-else statement.

Bouncing Ball Animation:

This is an example of an animation where the user has no control over the movement. Rather the program automatically generates the movement. Copy and past this into a Processing sketch. Run the program to see what it does. Your task is to understand each line of code and what it does. Test your understanding by making small changes. Try to predict what will happen before you run the code.

What do you need to do to add a second ball? 

// Creates a single black ball that bounces
//  off the sides of the window.
float x,y;         // ball position
float dx,dy;       // ball position update values
float radius = 10; // radius of the ball

void setup() {
  size(400,400);
  //fill(0);

  // inital position of ball
  x = width/2  + random(50);  
  y = height/2 + random(50);

  // amount by which the x and y positions will be updated
  dx = random(-5,5);
  dy = random(-5,5);
}

void draw() {
  background(255);  // clear the window.
  x += dx;  // update the x position
  y += dy;  // update the y position
  if (x < radius  || x > width-radius) dx = -dx;  // bounce on sides
  if (y < radius  || y > height-radius) dy = -dy;  // bounce top/bottom
  ellipse(x,y,2*radius,2*radius);  // draw the ball
}

You can add a more interesting background by writing your own background function. For example, add the following function to the above code. 

void myBackground() {
  colorMode(HSB, width);
  for (int i =0; i < width; i++) {
     stroke(i,width,width);
     line(i,0,i,height);
  }
  colorMode(RGB,255);  // return to the original colorMode
  stroke(0);           // return to original pen color
}

This function, when called, will draw a rainbow (as was done in lab 2). To add this as a background, replace the line 

background(255);  // clear the window.
with the line 
myBackground();

Saving an Animation as a Quicktime Movie:

In this lab, you will be turning in a 10 second quicktime animation movie. This movie will be given to students in a digital music class to score. In a few weeks, we will get together with these students to watch and listen to what was created. In this portion of the lab, we go over how to generate the quicktime movie from a Processing animation.

Instructions:

To Be Submitted

This lab will be graded based on a Pass/Fail basis. A Pass equals 10 points and a Fail is 0 points. To pass, you must turn in a working 10 second animation. As already mentioned, this animation will be turned over to the music students to score.

Here are some suggestions to get you started:

Preparing the files for submitting to WISE:

Folder Structure: You should be turning in just one Processing Sketch. The sketch folder should contain the *.pde file as well as your quicktime animation (*.mov).

Cleaning up the Code: Make sure that you have cleaned up the Processing code as follows:

  • Zipping: When you are done doing all of the above, zip together your sketch folder into a single zip file.

    • Submitting to WISE:

    By midnight of Sept 22 submit the single zipped file via WISE as an attachment.

    [top]  [Schedule]  [Home]