let sprites = [];

let step = 0;

let x;

let y;

let speed = 3;

​

function preload() {

  spritesheet = loadImage("sprit.png");

}

​

function setup() {

  // fullscreen(true);

  createCanvas(500, 450);

  //   print(spritesheet.width);

  //   print(spritesheet.height);

  // 12 images across, 0 down, in the spritesheet

​

  let w = int(spritesheet.width / 9);

  let h = int(spritesheet.height);

​

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

    sprites[y] = [];

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

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

    } // iterate over rows

  } // iterate over columns

​

  x = width / 2;

  y = height/2;

​

​

  // Display first sprite

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

}

​

// nothing to do here because all the action

// happens in the keyPressed() callback

function draw() {}

​

// function keyPressed() {

//   // look at sprite sheet to determine

//   // which direction is which row

​

// //   if (keyCode === DOWN_ARROW) {

// //     direction = 0;

// //     y += speed;

// //   }

​

// //   if (keyCode === LEFT_ARROW) {

// //     direction = 1;

// //     x -= speed;

// //   }

​

// //   if (keyCode === RIGHT_ARROW) {

// //     direction = 2;

// //     x += speed;

// //   }

​

// //   if (keyCode === UP_ARROW) {

// //     direction = 3;

// //     y -= speed;

// //   }

​

  // Every so often

  // advance to the next sprite

  if (frameCount % speed == 0) {

    step = (step + 1) % 9;

  }

​

  // Finally draw paint the sprite

  background(255);

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

}

​