Graphics With Processing II

COMP 1010 Home > Back to Extra Labs

Introduction In this lab we'll learn how to create animations using the Processing language. (Notice: It is highly recommended to do Graphics with Processing I before this lab)

Step 1: Setting up the animation with frame rate

When you draw anything the method draw is automatically and repeatedly called to form the shape. By default this is done at a rate of 60 frames per second; this might be considered too fast for an animation. We can define our own frame rate by using Processing's frameRate method:

 int sides = 3;

void setup() {
   size(600, 600);
   frameRate(6); // 6 frames per second
} 

Step 2: Increment/Decrement decisions

 void draw() {
   float x, y;
   float xPrev = 0, yPrev = 0;
   float tinc = 1.0 / sides;

   background(0);
   stroke(255, 0, 0);

   for (float t = 0; t <= 1 + tinc; t +=tinc) {
      x = 100 * cos(2 * PI * t) + 200; // pre-defined in code
      y = 100 * sin(2 * PI * t) + 180; // pre-defined in code
      
      if (t > 0) {
         line(x, y, xPrev, yPrev);
      }

      xPrev = x;
      yPrev = y;
   }

   sides++;
} 

For this part, notice that when sides gets really large it is going to become imperceptible. We need something to control the change of the sides so that incrementation and decrementation interchanges upon reaching some limits. For example, we can specify a state boolean variable outside our methods(boolean increasing = true). So before we change the size we check whether the increasing is true or false. If it is true, increment the sides, else decrement it.

 if (increasing) {
   sides++;
}else {
   sides--;
} 

You can determine the limits where you want the increment/decrement to be switched.

 if (sides > 49) { // you can decide
   increasing = false;
}else if (sides < 1{ // you can decide
   increasing = true;
} 

Step 3: Eliminate the awkward point

You may notice a point sitting in one place all the time. This is the point where t = 0. We can add another state variable float start = 0. Inside our draw method change the for loop into:

 for(float t = start; t <= 1 + start + tinc; t +=tinc) 

You should increment start after the loop(eg. start += tinc) and change the condition of the if statement inside the loop(eg. if (t > start)).

Step 4: Working with Processing interactivety power

First of all you want to add two other state variables. Those two together are a coordinate of the center of your polygon. Here we will use the same coordinate we used earlier.

 int centerX = 200, centerY = 180; 

Then, Processing is able to detect if a click has been made.

 if (mousePressed) {
   centerX = mouseX;
   centerY = mouseY;
} 

This will make the clicked point the new center of the polygon.

The new polygon can be drawn at the new position by modifying contents inside our for loop:

 x = 100 * cos(2 * PI * t) + centerX; // not pre-defined anymore
y = 100 * sin(2 * PI * t) + centerY; // not pre-defined anymore 

Step 5: Making a game out of these elements

With all essential elements mentioned you can now implement your own little game.

First, declare and initialize all the state variables you need. Those includes:

• Center point variables for a circle: centerX, centerY

• Motion for a circle: dx, dy // determines where the circle goes, can be positive or negative

Then, modify your draw method to see whether adding dx to centerX will take the center out of the window. If it will, negate your dx. Apply the same thing to dy and centerY. Since Processing remembers the width and height of the display window in the variables width, height, your code may look something like this:

 if (centerX + dx < 0) {
   dx = -dx;
}else if (centerX + dx >= width) {
   dx = -dx;
} 

You may want to add dx to centerX and dy to centerY each time the draw method is called(so that the circle moves).

Then, draw a circle based on centerX and centerY with some radius(you can decide).

Finally, check whether a user's click is inside the circle or not.

This can be done by simply taking the difference between the coordinate of the mouse click and the center of the circle and then comparing the value with the radius(The value has to be less than or equal to the radius for the score to increase. If the value is greater than radius, then we determine that the user fails to click inside the circle and lose score). Implement them in the way you want them to be.

In the end, since the boolean variable mousePressed is always true as long as the button is held down, we need to modify it so that the score increments only once per click. A new boolean variable will do the trick.

 if (mousePressed && !mouseWasPressed) {
   // process the initial click
   ...
}
mouseWasPressed = mousePressed; 

Now your game should be good enough to play.

Show the completed game to your TA.

Step 6: Making your game more interesting(Optional)

There are many things you can do to make your game more interesting. Here are just a few examples:

• You can define a new center point so that the circle instantly jumps to another place.

• You can change the radius each time so that the circle's size is changed as it moves.

• You can change the color of the background/circle in each frame.

It's up to you! Making your own game is fun, so have fun!