Let's get started with p5.party! This tutorial will walk you through the creating your first multi-user sketch with p5.party. It assumes you already have some basic experience with Javascript and p5.js.

We'll cover:

Setting up Your Coding Environment

To create with p5.party, you will need a code editor, a web browser, a local server, and a p5.party backend server.

Code Editor

For the code editor, this tutorial will be using Visual Studio Code.

Download Visual Studio Code

Local Server

You will need to run a local development server to serve your HTML and Javascript files or you will run into browser security issues and other problems.

You can use the VS Code extension Live Server for this.

You can install Live Server from the built-in extensions view.

  1. Open the extensions view by clicking the extensions button in the activity bar, or by choosing View → Extensions Ctrl-Shift-X.
  2. Search for Live Server, select it, and click install.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9e6d1b95-bd96-487f-a110-94006888cc7a/Screen_Shot_2020-06-10_at_16.00.25.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ade7d4f6-1956-4b27-b461-1ad6f1d53f27/Capture.png

The extension should install right then and there and you should see the option to "Go Live" in the blue bar at the bottom of your VS Code window.

Browser

You should be able to use any browser, but p5.party is tested most with Chrome. Whatever browser you use, it is a good idea to have the developer console open when you look at your sketches. Chrome and p5.party will print status and error messages to the console. Always have the console open so you can see error messages!

Backend Server

p5.party uses a backend server to communicate between clients. You'll need to have a server to connect to.

You can use the p5.party example server (the server the examples use) for quick sketching, but you might want to set up your own for more control.