var whichFrame = 0;

​

function preload() {

  frames[0] = loadImage("1-1.png");

  frames[1] = loadImage("2-1.png");

  frames[2] = loadImage("3-1.png");

  frames[3] = loadImage("4-1.png");

  frames[4] = loadImage("5-1.png");

  frames[5] = loadImage("6-1.png");

  frames[6] = loadImage("7-1.png");

  frames[7] = loadImage("8-1.png");

  frames[8] = loadImage("9-1.png");

  frames[9] = loadImage("10-1.png");

  frames[10] = loadImage("11-1.png");

  frames[11] = loadImage("12-1.png");

  frames[12] = loadImage("13-1.png");

  frames[13] = loadImage("14-1.png");

  frames[14] = loadImage("15-1.png");

}

​

function setup() {

  createCanvas(600, 600);

  frameRate(24);

}

​

function draw() {

  background(0);

  image(frames[whichFrame], -1, 100,603,400);

  whichFrame = whichFrame + 1;

  if (whichFrame >= frames.length) {

    whichFrame = 0;

  }

  fill(0);

  rect(0,0,600,110);

  rect(0,490,600,110);

}