let sprites = [];

let direction = 1; 

let step = 0;

let x;

let y;

let speed = 7;

let stepSpeed = 60;

let animationTimer;

​

function preload() {

  spritesheet = loadImage("runningcat.png");

}

​

function setup() {

  createCanvas(600, 600);

​

  let w = spritesheet.width / 2;

  let h = spritesheet.height / 4;

​

  // this time the sprite sheet is arranged differently

  // even though there are different rows and columns, 

  // there is effectively only one linear animation

  // we only need a 1 dimensional array then

  // but we still need to loop through the rows and columns in the sprite sheet

  for (let y = 0; y < 4; y++) {

    for (let x = 0; x < 2; x++) {

      // and this time we can just push to the array

      sprites.push(spritesheet.get(x * w, y * h, w, h));

    }

  }

  // going to use translate to draw this time, so set x & y to 0

  x = width/2;

  y = height/2;

​

  imageMode(CENTER);

}

​

function draw() {

  background(255);

​

  //look at sprite sheet to determine which direction is which

  if (isKeyPressed) {

    if (keyCode == LEFT_ARROW) {

      direction = -1;

      x -= speed;

    }

    if (keyCode == RIGHT_ARROW) {

      direction = 1;

      x += speed;

    }

  }

​

  // translate allows us to scale properly

  translate(x, y);

  // change the x scale either to 1 or -1 to reverse direction

  scale(direction,1);

  image(sprites[step], 0,0);

}

​

function keyPressed() {

  // use the javascript setInterval function that will

  // call a function repeatedly at a given milliseconds interval

  // supply setInterval with a function that will run the animation steps

  // but first! clear any interval that already might be running

  // to account for accidental multiple keypresses

  clearInterval(animationTimer)

  // then set the interval

  animationTimer = setInterval(() => {

    step = (step + 1) % 8;

  }, stepSpeed); // stepSpeed is our global variable that is the milliseconds for the interval

}

​

function keyReleased() {

  // when a key is released clear the interval

  clearInterval(animationTimer);

}

​