Skip to content

Get Started

Jump to bottom Edit New page
Quinton Ashley edited this page Jul 31, 2022 · 43 revisions

Before you start using p5.play you should be familiar with p5.js and JavaScript. If you're a total beginner I recommend trying my free IntroToJS course.

You can find interactive examples and documentation at [p5play.molleindustria.org][].

CDN links

You can easily use p5.play by adding the following script tags to your html within the head or body tag.

<!-- Version 3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/addons/p5.sound.min.js"></script>
<script src="https://molleindustria.github.io/p5.play/v3/planck.js"></script>
<script src="https://molleindustria.github.io/p5.play/v3/p5.play.js"></script>
<!-- Version 2 (Legacy) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/addons/p5.sound.min.js"></script>
<script src="https://molleindustria.github.io/p5.play/lib/p5.play.js"></script>

Local/Offline p5.play Development

This guide is for users that would like to use p5.play in their own projects locally, without the use of an online code editor. This takes a bit of time to setup but when you're done you will have a much smoother and faster development experience compared to using online editors.

Part 1 (without NPM)

  1. Install Visual Studio Code.

  2. Create a new folder for your p5.play game project.

  3. Download p5.js as well as p5.play.js. Copy these files into your project folder.

  4. Open from the empty example included in the p5.js complete distribution and link p5.play.

<script src="p5.play.js"></script>
  1. OR Create a new file called "index.html" from scratch and copy/paste this code into it.
<!DOCTYPE html>
<html>
   <head>
     <title>p5.play Example</title>
     <script src="p5.js"></script>
     <script src="p5.play.js"></script>  
     <script src="sketch.js"></script>
   </head>
   <body>
   </body>
</html>

Scroll down for Part 2

Part 1 (with NPM)

  1. Install Visual Studio Code and npm. The nodejs package manager (npm) is a command line tool that helps JavaScript developers easily keep their code libraries updated.

  2. Create a new folder for your p5.play game project.

  3. Use the following commands in a Windows PowerShell or macOS/linux Terminal window. cd is the command for changing directories (folders).

cd path/to/your/ProjectFolder
npm i p5.js
npm i p5.play
  1. Create a new file called "index.html" from scratch and copy/paste this code into it.
<!DOCTYPE html>
<html>
  <head>
    <title>p5.play Example</title>
  </head>
  <body>
    <script src="node_modules/p5/lib/p5.js"></script>
    <script src="node_modules/p5/lib/addons/p5.sound.min.js"></script>
    <script src="node_modules/p5.play/lib/p5.play.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>

Part 2

  1. Create a new file called "sketch.js" and copy/paste this code into it.
function setup() {
  createCanvas(800,400);
  createSprite(400, 200, 50, 50);
}

function draw() {
  background(255,255,255);  
  drawSprites();
}

  1. Install the Live Server extension for Visual Studio Code.

  2. Right click on your "index.html" file and click "Open with Live Server".

  3. If a square appears on the webpage you are all set! Go on the p5.play website to see examples.

  4. Optionally you can download all the p5.play examples.

Add a custom footer
Add a custom sidebar

Clone this wiki locally