Skip to content

Get Started

Jump to bottom Edit New page
Quinton Ashley edited this page Feb 13, 2023 · 43 revisions

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

Local/Offline p5play Development

This guide is for users that would like to use p5play 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 p5play game project.

  3. Download p5.js, Planck.js as well as p5play.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>p5play Example</title>
		<script src="p5.min.js"></script>
		<script src="p5.sound.min.js"></script>
		<script src="planck.min.js"></script>
		<script src="p5play.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 p5play 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>p5play 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/p5play.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 p5play website to see examples.

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