Graphics With Processing II

COMP 1010 Home > Back to Extra Labs

Introduction In this lab, we'll learn how to create animation using Processing language.

Step 1: Setting up the animation with frame rate

When you draw anything, the method draw is actually called repeatedly to form the shape. It is by default 60 frames per second, and it 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
}

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;
      y = 100 * sin(2 * PI * t) + 180;
      
      if (t > 0) {
         line(x, y, xPrev, yPrev);
      }

      xPrev = x;
      yPrev = y;
   }

   sides++;
} 

For this part,