framesPerSecond,

      frameWidth,

      frameHeight,

      frameCountX,

      frameCountY,

      frameX,

      frameY;

​

var frameTime,

      frameLast;

​

​

function setup() {

    createCanvas(400, 400);

​

    spriteSheet = new loadImage('spriteSheet.png');

​

    framesPerSecond = 1.0 / 24;

    frameWidth = 24;

    frameHeight = 31;

    frameCountX = 12;

    frameCountY = 4;

    frameX = 0;

    frameY = 0;

​

    frameTime = 0;

    frameLast = 0;

​

    now = 0;

    dt = 0,

    last = millis()//timestamp(),

    step = 1 / 60;

  requestAnimationFrame(frame);

}

​

function mouseClicked() {

    frameY = (frameY + 1) % frameCountY;

}

​

/*function timestamp() {

    return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();

}*/

​

function frame() {

    now = millis();//timestamp();

    dt = dt + Math.min(1, (now - last) / 1000);

    while(dt > step) {

        dt = dt - step;

        update(step);

    }

    last = now;

    requestAnimationFrame(frame);

}

​

function update(step) {

      frameTime += step;

      if (frameTime - frameLast > framesPerSecond) {

        frameX = (frameX + 1) % frameCountX;

        frameLast = frameTime;

      }

}

​

function draw() {

    background(220);

    image(spriteSheet, width / 2 - frameWidth / 2, height / 2 - frameHeight / 2, frameWidth, frameHeight, frameX * frameWidth, frameY * frameHeight, frameWidth, frameHeight);

}