Let's get started with p5.party! This tutorial will walk you through 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:

• Linking to the p5.party library via a CDN.
• Building the hello_party example from (nearly) scratch.
• Sharing your sketch with someone else so you can play together.

The p5.js Web Editor

The p5.js web editor provides everything you need to write, run, and share a p5.js project.

https://editor.p5js.org/

<aside> 🧟‍♀️ Tip: Log in to the p5 editor with your github account. Tip: Log in now, so you can -save- later.

</aside>

What We Are Making

The p5.party documentation links to several example apps. We’ll be re-creating the Hello, p5.party! example. Take a few minutes to try this demo out. Be sure to open the demo in two browser windows at once. Even better, have a friend look at on their computer at the same time.

In this simple demo a circle moves to wherever you click. The interesting thing is that the demo is networked. When two people look at the demo at the same time the circle responds to BOTH peoples clicks on BOTH peoples screens. It is a simple demo, but it is multiplayer!

Starting Single Player

We’ll start by looking at the code for a single-player version of this sketch, then we’ll look at what is needed to make it multiplayer with p5.party.

let x = 0;
let y = 0;

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

function mousePressed() {
  x = mouseX;
  y = mouseY;
}

function draw() {
  background("#ffcccc");
  fill("#000066");
  ellipse(x, y, 100, 100);
}

<aside> 🧟‍♀️ You can copy that code into the p5 editor to try it out.

</aside>