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

<script src="libraries/p5.play.js" type="text/javascript"></script>

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

5. Run this sketch to test if it works.

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

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