​

//animations like p5 images should be stored in variables

//in order to be displayed during the draw cycle

var frog = {

  posx: 300,

  posy: 550,

  rot: 0

};

​

const move = 4;

​

//it's advisable (but not necessary) to load the images in the preload function

//of your sketch otherwise they may appear with a little delay

function preload() {

​

  //create an animation from a sequence of numbered images

  //pass the first and the last file name and it will try to find the ones in between

  frog.animation = loadAnimation('resources/frog01.png','resources/frog02.png','resources/frog03.png','resources/frog04.png','resources/frog05.png','resources/frog06.png', 'resources/frog07.png');

  frog.animation.frameDelay = 8;

  frog.animation.stop();

}

​

function setup() {

  createCanvas(800, 600);

}

​

function draw() {

  background(255, 255, 255);

  //specify the animation instance and its x,y position

  //animation() will update the animation frame as well

  // animation(frog.animation, frog.posx, frog.posy);

  frog.animation.draw(frog.posx, frog.posy, frog.rot);

  if (frog.animation.getFrame() < 5 

      && frog.animation.getFrame() > 1) {

    if (frog.rot == 0) {frog.posy -= move}

    else if (frog.rot == 90) {frog.posx += move}

    else if (frog.rot == 180) {frog.posy += move}

    else if (frog.rot == 270) {frog.posx -= move}

  } else if (frog.animation.getFrame() == 6) {

    frog.animation.nextFrame();

  }

}

​

function keyPressed() {

  // only accept input if still

  if (!frog.animation.playing) {

    if (key == 'w') {

      frog.rot = 0;

      frog.animation.play()

    } else if (key == 'a') {

      frog.rot = 270;

      frog.animation.play();

    } else if (key == 's') {

      frog.rot = 180;

      frog.animation.play();

    }  else if (key == 'd') {

      frog.rot = 90;

      frog.animation.play();

    }

  }

}

​