Project Connect - CompRenew Academy

In the previous lab, you used types as an abstraction of the data manipulated by your program. This lab introduces methods as an abstraction of the procedures performed by your program, and will focus in particular on overriding the methods Processing provides for animation.

Animation

Animations are be created by presenting a sequence of static images in rapid succession. If the rate of this presentation, called the frame rate, is fast enough and the images are well-crafted, then the human mind will perceive motion by a single object rather than a disjoint set of unrelated images. A flip book is a simple example of this phenomenon.

Processing allows programmers to create animations as just described. Consider the expanding ball shown here (you can rerun this animation by reloading this webpage).

This example presents a sequence of images of the form shown here as a set of representative screen captures:

Each image, or frame, of this animation shows a circle on a white background. The circles get larger and dimmer over time. Producing an animation such as this requires two kinds of actions:

Setup - Some of the actions are done only once, as a setup task at the very beginning of the animation. In this example, the size of the output window and the white background are set only once.
Drawing - Some of the actions are done repeatedly throughout the animation. In this example, the circle is drawn repeatedly, with a successively larger diameter and lighter stroke color.

Separating these two types of actions requires the procedural abstraction provided by methods.

Methods

Methods group sets of statements into blocks. Processing uses methods to define the setup actions (setup()) and the repeated drawing actions (draw()) in animations.

Here is the full expanding ball program:

// An expanding ball
// kvlinden, 13may2009

int diameter;

void setup() {
  size(255, 255);
  background(255);
  diameter = 0;
}

void draw() {
  stroke(diameter);
  ellipse(width/2,height/2,diameter,diameter);
  diameter += 1;
}

In this program, there are two methods, setup() and draw(), both of which follow the same pattern:

returnType methodName(parameterList) {
  statementBlock
}

returnType - The return type indicates the type of the value that this method returns, if any. void indicates that this method doesn’t return anything.
methodName - The method is named using an standard identifier. Processing requires that we use these names for animations.
parameterList - The parameter list specifies the data that the method requires to do its work. These methods require no data so the lists are empty (()).
statementBlock - The statement block is the set of statements, surrounded by braces ({ }), that are executed when the method is called.

Because setup() and draw() are defined already by Processing, we aren’t actually defining new methods but rather are overriding existing methods. In addition, we don't (and in fact shouldn’t) explicitly call these methods, Processing does that automatically. We’ll define and call our own methods in the next lab.

Scope

A block cordons off a set of statements, separating them from other statements into their own private area, called a scope. Blocks similarly cordon off sets of identifiers into different scopes.

Each program file has its own implicit block, and all methods or variables declared in that file can be used throughout that file. It has what is called global scope. However, a variable declared within a method's block will only be available within that method, not outside. This is called local scope.

As an example, consider the diameter variable used in the expanding ball program. This variable is declared globally so that it can be used by both methods. As another example, note that Processing automatically declares the global variables width and height, which represent the width and height of the output window respectively.

Exercise 3.c.1. Experiment a bit with scoping. Start by loading the expanding ball program and getting it to run properly.

First, explain how the circle gets larger and larger and how the color gets whiter and whiter.
Now, try the following:
- Move the declaration of the diameter variable from the global scope into the local scope of the setup() method.
- Declare the diameter variable locally in both of the methods. Explain what happens and why.
For both of these examples, explain what happens and why it happened.

Record your written answers so that you can submit them at the end of this lab.

Random Behavior

Processing provides the ability to implement random behavior through the use of the random() method. You can find an explanation of the use of random in the Processing reference manual (see http://processing.org/reference/random_.html).

The following example combines animation and random behavior. Note that only a screen capture is shown here.

// Random rectangle drawing // kvlinden, 13may2009 int theSize=300; void setup() { size(theSize, theSize); frameRate(10); // This slows the frame rate down a bit. } void draw() { // We declare diameter locally because we don't need // to remember its value from frame to frame. int diameter = (int)random(100); rect(random(theSize), random(theSize), diameter, diameter); }

Exercise 3.c.2. Load the rectangle drawing program and get it to run properly. Then, modify it as follows:

Change it to draw circles rather than rectangles (or try triangles if you’re feeling brave!).
Give the circles random colors.
Challenge. Can you figure out how to prevent it from drawing random squares that fall off the side of the visible output window?

Mouse Events

Processing also allows you to override its mouse event methods. This allows you to program mouse interaction. For example, we can add the following code to the tiling program above:

void mousePressed() {
  println(mouseX + " " + mouseY);
}

Processing calls the mousePressed() method whenever the user presses the mouse. It also automatically sets the variables mouseX and mouseY to x and y coordinates of the point on which the user pressed the mouse. This particular definition prints these coordinates on the text output screen.

Exercise 3.c.3. Add the definition of mousePressed() just discussed to the rectangle drawing program and get it to run properly. Then, modify it as follows:

Clear the screen whenever the user presses the mouse.
Draw a rectangle on the screen at the coordinates specified by the user’s mouse click.
Increase the frame rate by a small amount each time the user presses the mouse.

An Animation Creation

Exercise 3.c.4. As a final exercise, create an animation of your own design. Here are screen shots of a few examples:

Audio Output

Processing includes Minim, a library that supports audio playback and recording. If you have time, use the following code to load an play a short MP3 file.

// A simple MP3 player
// kvlinden, 13may2009

import ddf.minim.*;

Minim minim;
AudioSnippet snip;

void setup() {
  minim = new Minim(this);
  snip = minim.loadSnippet("ZimIAm.mp3");
  snip.play();
}

void draw() {
}

void stop() {
  snip.close();
  minim.stop();
  super.stop();
}

You can use this code in any animation by adding the declarations and initializations for minim and snip, the snip.play() command and the stop() method.

Exercise 3.c.5. If you have time, add audio to your animation.

Checking In

Submit your code for the lab exercises and include a screen capture for each.

Computing Literacy

3.c. Methods: Overriding Methods