A downloadable resource


p5.play is a P5.js library developed originally by Paolo Pedercini that makes it easier to make games. Version 3 is led by Quinton Ashley.

This library will help you handle sprites and animation, groups of objects, collisions, and simple physics, 

Getting Started Resources

With p5.play you can build on what you have been doing in p5.js

"Including" the Script File in your Projects

Using the p5.js editor, create a new project that includes the p5.play library link or duplicate the project you worked on in class. Without the reference to this file, none of the p5.play functions will work. 

Paste these line into the html file in the your editor:   

<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/planck@latest/dist/planck.min.js"></script> <script src="https://p5play.org/v3/p5.play.js"></script>

If you get an error "Sprite is not defined" you're missing the code above.

You can also open this template sketch and click File-->Duplicate

Quick Reference

Sprites Reference

Group Reference

Input (Mouse and Keyboard)

  • Mouse and Keyboard basics
    • Pressed = as soon as the mouse/kb button is pressed
    • Pressing = holding down the button
    • Holding = counts how long it's been down
    • Released = when the button comes back up


Including P5Play.2020-02-19 16_04_43.gif 653 kB