let sprites =[];

let xposition;

let yposition;

let step=0;

let direction=1;

speed =5;

function preload(){

  spritesheet=loadImage('walking.png')

}

​

function setup() {

  createCanvas(400, 400);

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

  let h = int(spritesheet.height/4);

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

    sprites[j]=[]

    for (let i=0; i<12; i++){

      sprites[j][i] = spritesheet.get(w*i,h*j ,w ,h);

    }

  }

  xposition=width/2;

  yposition=height/2;

  image(sprites[direction][step], xposition,yposition)

}

​

function draw() {

  // background(220);

}

​

function keyPressed(){

  if(keyCode ==UP_ARROW){

    direction =3;

    yposition =-speed;

  }

  if(keyCode ==DOWN_ARROW){

    direction =0;

    yposition =+speed;

  }

  if(keyCode == RIGHT_ARROW){

    direction =2;

    xposition =+speed;

  }

  if(keyCode ==LEFT_ARROW){ 

    direction =1;

    Xposition =-speed;

  }

  step=(step+1)%12;

  background(220);

  image(sprites[direction][step], xposition,yposition);

}