[ + | - ]

How To...

Create Timed Animations

atan2 diagram

The trick with a timed animation, or any event that activates at a certain time or interval, is to use Processing's millis(), which tells the number of milliseconds (one-thousandth of a second) since the sketch started running. Think of it like a stopwatch, but one that you can't reset the time with. This requires some jiggery-pokery to make it work, since you can't just do something 10 seconds after the mouse is clicked. You have to check the time the mouse was clicked and subtract it from the total seconds from the beginning of the sketch's running.

So, run a test using millis(), which will tell you how long it's been—the stopwatch that started when the sketch started—and check it against the time some event was triggered, plus the amount of time you want to pass since the trigger.

void keyPressed() {
  if (key == "a") {
    eventTrigger = millis();
  }
}

if ( millis() >= eventTrigger + durationToTestFor) {
  doThatThing();
}

But, if the event you want isn't a keypress or mousePressed, and is instead an event occurs a set number of seconds apart, then set up a global variable to hold the time interval, check for it with the above technique, but this time reset the event trigger time to the current time inside the test, thusly:

float eventTrigger = 1000.0;

if ( millis() >= eventTrigger + durationToTestFor) {
  doThatThing();
  eventTrigger = millis();
}

Blinking Eyes

These eyes will blink every 1.2 seconds, and stay shut for .5 second

PROCESSING

Timed Animations

// Timed Animations
// v1.0
//
// Global variables
// Using a float data type makes this more flexible
// and easier to modify
float timeToTest = 1200.0;   // In milliseconds
float lastTime = 0.0;        // Track the time of the last blink
float blinkDuration = 500.0; // The duration of the blink

void setup() {
  size(500, 500);
}

void draw() {
  background(204);
  translate(width/2, height/2);
  drawEyes();
}

void drawEyes() {
  // Eyeballs
  strokeWeight(2);
  fill(255);
  ellipse(-21, 0, 40, 40);
  ellipse(21, 0, 40, 40);
  fill(0);
  // Check for time passed since last time
  if (millis() >= timeToTest + lastTime) {
    // Blink eyes
    line(-42, 0, -2, 0);
    line(2, 0, 42, 0);
    // Keep the test above working for blinkDuration
    // then reset the last time
    if(millis() >= timeToTest + lastTime + blinkDuration) {
      lastTime = millis();
    }
  } else {
    // Regular irises
    ellipse(22, 0, 5, 5);
    ellipse(-22, 0, 5, 5);
  }
}

Add some randomness

Same code as before, but we randomize the timeToTest value to between 1.5 and 2.5 seconds for a more natural feel.

PROCESSING

Timed Animations Randomized

// Timed Animations
// With Random Timing
// v1.0
//
// Global variables
// Using a float data type makes this more flexible
// and easier to modify
float timeToTest = 1200.0;   // In milliseconds
float lastTime = 0.0;        // Track the time of the last blink
float blinkDuration = 500.0; // The duration of the blink

void setup() {
  size(500, 500);
}

void draw() {
  background(204);
  translate(width/2, height/2);
  drawEyes();
}

void drawEyes() {
  // Eyeballs
  strokeWeight(2);
  fill(255);
  ellipse(-21, 0, 40, 40);
  ellipse(21, 0, 40, 40);
  fill(0);
  // Check for time passed since last time
  if (millis() >= timeToTest + lastTime) {
    // Blink eyes
    line(-42, 0, -2, 0);
    line(2, 0, 42, 0);
    // Keep the test above working for blinkDuration
    // then reset the last time
    if(millis() >= timeToTest + lastTime + blinkDuration) {
      lastTime = millis();
      // Randomize the time to test value     
      timeToTest = random(1500.0,2500.0);     
    }
  } else {
    // Regular irises
    ellipse(22, 0, 5, 5);
    ellipse(-22, 0, 5, 5);
  }
}