PImage[] frames = new PImage[12];

int currentFrame = 0;       // displayed frame
int timer = 5;              // number of frames before the next

void setup()
{
  size(600, 120);
  smooth();
  background(0);
  frameRate(60);
  
  for(int i = 0; i < frames.length; i ++) {
    frames[i] = loadImage("horse-"+(i+1)+".png");
  }
}

void draw() 
{
  // draw the images
  imageMode(CENTER);
  for(int i = -3; i <= 3; i ++) {
    int f = (currentFrame+i+frames.length)%frames.length;
    if(i == 0) tint(255); else tint(128);
    image(frames[f],
      i*(frames[f].width/4+1)+width/2,(height-20)/2,
      frames[f].width/4,frames[f].height/4);
  }
  
  // scrubbing ala iMovie
  if(mousePressed) {
    currentFrame = constrain((frames.length*mouseX)/width,0,frames.length-1);
    timer = 10; 
  } else {
    // advance if the timer is done, or decrese the timer
    if(timer == 0)  {
      currentFrame = (currentFrame+1)%frames.length;
      timer = 5;
    }
    else timer--;
  }
  
  // draw the frame bar
  fill(0); noStroke(); rect(0,height-20,width,20);
  for(int i = 0; i < frames.length; i ++) {
    stroke(128); strokeWeight(3);
    point(width*(i+0.5)/(frames.length),height-10);
  }
  stroke(255);
  point(width*(currentFrame+0.5)/(frames.length),height-10);
}

// START NO NOTES
// code used to capture screenshots
void keyReleased() {
  if(key == '`' && !online) save("sketch.png");
}