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

<aside> 🧟‍♀️

Using p5.js 1? Check out the p5.js Web Editor Quick Start Guide (p5.js 1) or the VS Code Quick Start Guide (p5.js 1) instead.

</aside>

We'll cover:

• What's different about p5.party in p5.js 2.
• Adding p5.party to your project.
• Building the hello_party example.
• Sharing your sketch with someone else so you can play together.

What's Different in p5.js 2?

p5.js 2 doesn't have preload(). Instead, setup() can be an async function, and you can await things that take time to load.

In p5.js 2, partyConnect(), partyLoadShared(), and partyLoadMyShared() return Promises. Instead of calling them in preload(), you await them in setup().

That's pretty much it! You read and write shared objects just like before, and the rest of p5.party—partyIsHost(), partyEmit(), partyWatchShared(), and friends—works the same in p5.js 1 and p5.js 2.

p5.js 1

let shared;

function preload() {
  partyConnect("wss://demoserver.p5party.org", "hello_party");
  shared = partyLoadShared("shared", { x: 100, y: 100 });
}

function setup() {
  createCanvas(400, 400);
}

p5.js 2

let shared;

async function setup() {
  createCanvas(400, 400);
  await partyConnect("wss://demoserver.p5party.org", "hello_party");
  shared = await partyLoadShared("shared", { x: 100, y: 100 });
}

Adding the Library

The p5.js Web Editor

New sketches in the p5.js web editor use p5.js 2, so you just need to add p5.party. Open the index.html file in your project and add a <script> tag for p5.party right after the two p5 <script> tags.

<script src="<https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.sound.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/p5.party@latest/dist/p5.party.js>"></script>

<aside> 🧟‍♀️

The first two lines are already in your index.html. You only need to add the third one.

</aside>

VS Code

If you'd rather work locally, follow the VS Code Quick Start Guide (p5.js 1) to set up VS Code and Live Server, but use this index.html instead.

<!DOCTYPE html>
<html>
  <body>
    <main></main>
    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js>"></script>
    <script src="<https://cdn.jsdelivr.net/npm/p5.party@latest/dist/p5.party.js>"></script>
    <script src="main.js"></script>
  </body>
</html>