P5.play sprite animation

var img;

var owlSpriteSheet;

var owlAnimation;

var owlSprite;

var loaded = false;

let angle = 0;

let rotateAngle = 0.2;

​

function preload() {

  img = loadImage('https://www.openprocessing.org/sketch/798933/files/nature_bg.jpg');

  //Load the explode sprite sheet using frame width, height and number of frames

  owlSpriteSheet = loadSpriteSheet('https://www.openprocessing.org/sketch/798402/files/yellow_owl.png', 240, 240, 11);

  owlAnimation = loadAnimation(owlSpriteSheet);

  loaded = true;

}

​

function setup(){

  createCanvas(600,600);

  frameRate(20);

}

​

function draw() {

  clear();

  background(255);

  image(img,0,0, width,height);

  //draw the sprite

  if(loaded){

    push();

    translate(mouseX, mouseY);

    rotate(angle);

    animation(owlAnimation, 0, 0);

    pop();

  }

}

​

function keyPressed() {

  if (keyCode === LEFT_ARROW) {

    console.log('left');

    angle+=rotateAngle;

    //rotate.owlAnimation(PI);

  }

  else if (keyCode === RIGHT_ARROW) {

    console.log('right');

    angle-=rotateAngle;

    //rotate.owlAnimation(PI);

  }

}

​

​

​

​

​

​