// this is a slightly more involved example of how, in Processing,
// things on the canvas can be made to appear or animate 
// at their own pace/rhythm
// - rob@rahji.com

int frame; // increases with every frame

void setup() {
  // this should all look familiar...
  size(400,400);
  frameRate(15);
  background(100);
  noStroke();
  rectMode(CENTER);
}

void draw() {
  frame++;
  background(100);  // clear the screeen every frame
  
  fill(0,100,0);  // green
  for (int i=1; i<=10; i++) {
    // use a for loop to draw 10 pulsing squares
    pulsingsquare(90,30*i,5); // arguments are x, y, size
  }
  
  fill(100,0,0);  // red
  if (frame%40 <= 9) {
    // only execute the lines below for 
    // the first 10 of every 40 frames ...
    pulsingsquare(240,100,10); // arguments are x, y, size
  }
  
}

// making a function is basically the same as the other functions 
// we've declared so far...  eg: mouseClicked(), draw(), etc

// this is a function that produces a square of varying
// sizes depending on the frame number that we're at.
void pulsingsquare(int x, int y, int size) {
  rect(x,y,
    size * ((frame%size)+1), // rect width  (found by tinkering)
    size * ((frame%size)+1)  // rect height (ditto)
  );
}