p5.party was built with p5.js in mind, but starting in v0.15 you don't need p5.js to use it. p5.party works with plain JavaScript too, sometimes called “vanilla” JavaScript.

You load p5.party with the same <script> tag. Without p5.js, you use the p5party namespace: p5party.connect(), p5party.loadShared(), p5party.isHost(), and so on. They work just like the partyXyz() functions you'd use with p5.js.

<aside> 🧟‍♀️

The p5party namespace is always available, even in p5.js sketches. It shares the same connection as partyConnect().

</aside>

Hello, Vanilla Party

Here is the hello_party example without p5.js. It draws with the canvas 2D API and requestAnimationFrame().

<canvas id="canvas" width="400" height="400"></canvas>
<script src="<https://cdn.jsdelivr.net/npm/p5.party@latest/dist/p5.party.js>"></script>
<script type="module">
  // connect to the party server
  await p5party.connect("wss://demoserver.p5party.org", "hello_party");

  // load the shared object, with starting values
  const shared = await p5party.loadShared("shared", { x: 100, y: 100 });

  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  // write shared data
  canvas.addEventListener("pointerdown", (e) => {
    shared.x = e.offsetX;
    shared.y = e.offsetY;
  });

  // read shared data
  function draw() {
    ctx.fillStyle = "#ffcccc";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#000066";
    ctx.beginPath();
    ctx.arc(shared.x, shared.y, 50, 0, Math.PI * 2);
    ctx.fill();
    requestAnimationFrame(draw);
  }
  draw();
</script>

<aside> 🧟

The type="module" on the <script> tag loads the script as a module. That lets you use await at the top level of your code. Without type="module" it can still work, but you would need to put your startup code in an async function instead.

</aside>

The example above creates a draw loop using requestAnimationFrame(). You can use p5 party without a draw loop. Use p5party.watchShared() to get updates when the shared object changes. The hello_party_vanilla_dom works this way to move an HTML element when the position changes on the shared object.

p5party.watchShared(shared, () => {
  dot.style.left = `${shared.x}px`;
  dot.style.top = `${shared.y}px`;
}, true);

Related Examples

hello_party_vanilla

hello_party_vanilla_dom

Functions

Every p5.party function has a p5party version. See the p5.js version's page for the details.

<aside> 🧟

p5party.connect(), p5party.loadShared(), and p5party.loadMyShared() return Promises. There is no preload() and they don't take callbacks. Use await to wait for them.

</aside>

Using p5.party with a bundler (Vite, etc.)

Most sketches load p5.party with a <script> tag, and you don't need anything in this section. If you build your project with a bundler like Vite, install p5.party from npm and import it:

npm install p5.party

import { p5party } from "p5.party";