Skip to content

Get Started

Jump to bottom Edit New page
Quinton Ashley edited this page Dec 28, 2022 · 43 revisions

For information about how to program with p5.play go to: p5play.org

Local/Offline p5.play Development

This guide is for users that would like to use p5.play v3 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, Planck.js as well as p5.play.js. Copy these files into your project folder.

  4. 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.min.js"></script>
     <script src="p5.sound.min.js"></script>
     <script src="planck.min.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
npm i planck
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.min.js"></script>
    <script src="node_modules/p5/lib/addons/p5.sound.min.js"></script>
    <script src="node_modules/planck/dist/planck.min.js"></script>
    <script src="node_modules/p5.play/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);
  new Sprite();
}

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

  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.

Add a custom footer
Add a custom sidebar
Clone this wiki locally