Using p5 add-ons /


P5.js has many add-on libraries for specific functions.
We are going to use one I made called that helps with graphical, playful, applications and games. 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

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

2. Download the library File save as…

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


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

<script src="libraries/" type="text/javascript"></script>


5. Run this sketch to test if it works.

var boxSprite;

function setup() {

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

function draw() {
  //draw all the sprites

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