-
-
Notifications
You must be signed in to change notification settings - Fork 186
Get Started
For information about how to program with p5play go to: p5play.org
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.
If you'd like to use p5play with npm simply use the p5play starter template! npm (node package manager) is a hub for all JavaScript packages and understanding the basics of how to use it is an important part of the JS development experience. I recomend using this starter template:
https://github.com/quinton-ashley/p5play-template
Also be sure to use the p5play extension for Visual Studio Code!
https://marketplace.visualstudio.com/items?itemName=quinton-ashley.p5play-vscode
I recommend using the p5play starter template instead! But if you can't use npm for some reason, here's a guide for how to run p5play on your locally without using npm.
-
Install Visual Studio Code.
-
Create a new folder for your p5play game project.
-
Download p5.js, Planck.js as well as p5play.js. Copy these files into your project folder.
-
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>- 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);
}-
Install the Live Server extension for Visual Studio Code.
-
Right click on your "index.html" file and click "Open with Live Server".
-
If a square appears on the webpage you are all set! Go on the p5play website to see examples.