En este tutorial, vamos a ver como funciona una biblioteca de la librería p5 llamada p5.play.js. Escrita por Paolo Pedercinip5-play

Esta va a ser una guía muy simple, con algunos ejemplos para entender como funciona a modo raza la librería. Por favor siempre este consultando la referencia para conocer mas a fondo la librería.

Play.p5.js es una librería que ofrece una serie de objetos y funciones útiles para escribir videojuegos y otras aplicaciones interactivas. Los objetos y funciones que introduce se incorporan en p5.js, es como si fuera una biblioteca del framework.

En el sitio oficial esta un guía de referencia para instalar la biblioteca. Puede descargar la biblioteca haciendo click aqui; después de descomprimir el archivo, vaya al directorio libraries y copie el archivo p5.play.js y péguelo en la biblioteca libraries de su directorio. Hay que recalcar que en su propio vocero index.html, no olvide usar la etiqueta script para importar la biblioteca a su vocero. Si desea mas información al respecto, Aquí hay un gran tutorial de como importar esta librería a su proyecto.

Para crear un elemento en el mundo de p5.play logramos esto usando el createSprite() función. Esta función devuelve un objeto Sprite, que a su vez posee una serie de atributos y métodos que nos permite consultar y modificar las propiedades del sprite.

Un ejemplo muy sencillo aqui para la creación de un sprite:

 

var forma;
function setup() {
  createCanvas(400, 400);
  forma = createSprite(
    width/2, height/2, 40, 40);
  forma.shapeColor = color(255);
  forma.velocity.y = 0.5;
}
function draw() {
  background(50);
  drawSprites();
}
function mousePressed() {
  forma.position.x = mouseX;
  forma.position.y = mouseY;
}