p5.play Example: Sprites

// p5.play is initiated by Paolo Pedercini | molleindustria.org | @molleindustria

// Examples are ported from http://molleindustria.github.io/p5.play/examples/index.html

​

// different ways to create sprites

var boxSprite;

​

var imageSprite;

var img;

​

var animatedSprite;

var animation

​

function preload(){

  img = loadImage('asterisk.png');

  animation = loadAnimation('ghost_standing0001.png', 'ghost_standing0007.png');

  // create a sprite with a placeholder rectangle as visual component

  boxSprite = createSprite(100, 150, 50, 100);

  // .shapeColor changes the color of the placeholder

  boxSprite.shapeColor = color(222, 125, 2);

  //create a sprite and associate an existing image as visual component

  //it is not necessary to specify the dimensions

  imageSprite = createSprite(300, 150);

  imageSprite.addImage(img);

  //create a sprite and associate an existing animation as visual component

  //since a sprite can have multiple images and animations

  //the first parameter must be a label identifying the animation

  animatedSprite = createSprite(500, 150, 50, 100);

  animatedSprite.addAnimation('floating', animation);

  animatedSprite.addAnimation('moving', 'ghost_walk0001.png', 'ghost_walk0004.png');

  animatedSprite.addAnimation('spinning', 'ghost_spin0001.png', 'ghost_spin0003.png');

}

​

function setup() {

  createCanvas(800, 300);

}

​

function draw() {

  background(255);

​

  //all the methods and properties of the current animation will be

  //accessible from the .animation property of the sprite

  // if mouse is to the left of the animated sprite

  if(mouseX < animatedSprite.position.x - 10) {

    animatedSprite.changeAnimation('moving');

    // use .mirrorX(-1) to flip the sprite horizontally

    animatedSprite.mirrorX(-1);

    // assign negative value to x velocity: move left

    animatedSprite.velocity.x = -5;

  }

  // if mouse is to the right of the animated sprite

  else if(mouseX > animatedSprite.position.x + 10) {

    animatedSprite.changeAnimation('moving');

    // unflip

    animatedSprite.mirrorX(1);

    // assign positive value to x velocity: move right

    animatedSprite.velocity.x = 5;

  }

  //if mouse is close to animated sprite, don't move

  else {

    animatedSprite.changeAnimation('floating');

    animatedSprite.velocity.x = 0;

  }

  if(mouseIsPressed) {

    // use .rotation to rotate the sprite

    animatedSprite.rotation -= 10;

    animatedSprite.changeAnimation('spinning');

  }

  else

    animatedSprite.rotation = 0;

​

  // up and down keys to change the scale

  // note that scaling the image quality deteriorates

  // and scaling to a negative value flips the image

  if(keyIsDown(UP_ARROW))

    animatedSprite.scale += 0.05;

  if(keyIsDown(DOWN_ARROW))

    animatedSprite.scale -= 0.05;

​

  //draw all the sprites

  drawSprites();

}