let sprites = [];

let direction = 0; // 0 up

let step = 0;

let x;

let y;

let speed = 5;

let flip = false;

​

function preload(){

  spritesheet = loadImage("runningcat.png");

}

​

function setup() {

  createCanvas(600,600);

  imageMode(CENTER);

  // get the width and hieght of each sprite

  let w = spritesheet.width/2;

  let h = spritesheet.height/4;

​

  // there are four rows, create a for loop to iterate through them

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

    // create another emoty array for that row

    sprites[y] = [];

    // there are 12 images in a row, iterate through them

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

      // get the image subsection there and then stor in the array

      sprites[y][x] = spritesheet.get(x*w, y*h, w, h);

    }

  }

​

  x = width/2 +1;

  y = height/2;

}

​

function draw() {

  background(255);

  if (isKeyPressed == true) {

    if (keyCode == LEFT_ARROW) {

      flip = !flip;

      if (frameCount%5==0) {

        step = (step+1) % 2;

        if (step==0){

          direction +=1;

        }if (direction%4==0){

          direction = 0;

        }  

        x -= 20;

        x = x% width;

      }

    }

    if (keyCode == RIGHT_ARROW) {

        flip = false;

       if (frameCount%5==0) {

        step = (step+1) % 2;

        if (step==0){

          direction +=1;

        }if (direction%4==0){

          direction = 0;

        }  

        x += 20;

        x = x% width;

         // image(sprites[direction][step], x, y, 190 ,120);

      }

      // direction = 2;

      // x+=speed;

    }

​

​

  }

  if (flip) {

    push();

    scale(-1, 1)

    // image(img, -mouseX, 200, 140, 100);

    image(sprites[direction][step], -x, y, 190 ,120);

    pop();

  } else {

    image(sprites[direction][step], x, y, 190 ,120);

  }

​

​

}

​

​

​

​

​

​

​

​

​

​