Using p5 add-ons / p5.play

p5play

P5.js has many add-on libraries for specific functions.
We are going to use one I made called p5.play that helps with graphical, playful, applications and games.

p5.play provides a Sprite class to manage visual objects in 2D space and features such as animation support, basic collision detection and resolution, sprite grouping, helpers for mouse and keyboard interactions, and a virtual camera.

How to install p5.play

1. Create a new p5 project and save it. Open the project folder (menu view > show sketch folder).

2. Download the library p5.play.js. File save as…

3. Save or copy p5.play.js in the library folder of your project

screen-shot-2016-11-07-at-10-26-53-am

4. Open the index.html of your project from the p5 editor and add this line before the sketch.js inclusion
[js]

[/js]

screen-shot-2016-11-07-at-10-27-43-am

5. Run this sketch to test if it works.

[js]
var boxSprite;

function setup() {
createCanvas(800,600);

//create a sprite with a placeholder rectangle as visual component
boxSprite = createSprite(100, 150, 50, 100);
}

function draw() {
background(240);
//draw all the sprites
drawSprites();
}
[/js]

If you get an error related to “print” it’s a temporary version disalignment issue, download and replace p5.js in your project.

Alternatively just download this empty project and use it whenever you start a new project, it includes the assets in the examples.

Posted in