Example

example_4_5

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 4-5: Using system variables
void setup() {
  size(200,200);
  smooth();
}

void draw() {
  background(100);
  stroke(255);
  // frameCount is used to color a rectangle.
  fill(frameCount / 2);
  rectMode(CENTER);
  // The rectangle will always be in the middle of the window 
  // if it is located at (width/2, height/2).
  rect(width/2,height/2,mouseX+10,mouseY+10);
}

void keyPressed() {
  println(key);
}
  • http://www.flickr.com/photos/khyne/ Raúl

    How exactly is frameCount used to color the rectangle?

  • admin

    frameCount starts at 0 and increments each time through draw(). This isn’t the best example b/c after 510 frames, frameCount / 2 is greater than 255 and grayscale values only range between 0 and 255. This code should make it a bit more clear:

    fill(frameCount % 255);

    The modulus operator will cycle the fill() value back to zero every 255 frames.

  • Peter

    Well, this must be the reason why the fill disappears after 510 frames, right? the resulting number isn’t allowed as a value for “fill” and the result thus is an equivalent for “noFill”… (?)

    it would be interesting, though, if there’s a (simple) way to reverse the direction of the fill’s change after frame 510 so it goes back gradually to black from white instead of jumping to black and beginning from the start. like some “soft” oscilllation…?

  • http://www.learningprocessing.com Daniel Shiffman

    Yes, absolutely you could reverse the direction. take a look at this example which does this: http://www.learningprocessing.com/examples/chapter-5/example-5-7/ But here I’m just demonstrating the use of frameCount as a built-in variable which is very limiting in terms of what you can do. A better demonstration of frameCount might be to show how you can use it for timing, i.e. how something might appear after a given number of frames.

    if (frameCount > 100) {
  rect(10,10,50,50);
}