Processing.js

Animator

A simple animation tool that displays a continuous cycle of twelve images. Each image is displayed for 100 milliseconds (one tenth of a second) to create animation. While each image is displayed, it�s possible to draw directly into it by pressing the mouse and moving the cursor. Start drawing to get it started.

Original Processing.org Example: Animator

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
int currentFrame = 0;
PImage[] frames = new PImage[12];
int lastTime = 0;

void setup() 
{
  size(200, 200);
  strokeWeight(4);
  smooth();
  background(204);
  for (int i = 0; i < frames.length; i++) {
    frames[i] = get(); // Create a blank frame
  }
}

void draw() 
{
  int currentTime = millis();
  if (currentTime > lastTime+100) {
    nextFrame();
    lastTime = currentTime;
  }
  if (mousePressed == true) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

void nextFrame() 
{
  frames[currentFrame] = get(); // Get the display window
  currentFrame++; // Increment to next frame
  if (currentFrame >= frames.length) {
    currentFrame = 0;
  }
  image(frames[currentFrame], 0, 0);
}