xxxxxxxxxx
// 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();
}