Test Coverage:
p5.party is a library for easily prototyping online multi-user sketches with p5.js. With p5.party you can quickly test ideas for multiplayer games, realtime multi-user apps, and multi-computer art projects.
Prototyping + Sketching
p5.party provides a simple, imperative interface for working with shared data inspired by the programming conventions used by the p5.js api. p5.party let's you try ideas quickly without writing server code or setting up a front-end/back-end stack.
Workshops + Classes
p5.party uses a deepstream.io server which is easy to set up and cheap—or free—to run. Many sketches and projects can connect to the same p5.party server, so students can focus on sketching instead of setting up servers.
Production
p5.party is designed for prototypes. As your project grows, you'll need to look into other libraries and backends that suit your project's needs.
Security
Sketches built with p5.party are insecure. p5.party has no method to authenticate or authorize users. Multiple apps share a server and can read, write, and delete each other's data.
Shared Data Objects
With p5.party you can easily create a shared data object that is automatically synchronized between instances of your sketch. You can assign and read properties on these objects just like a plain old local javascript object.
Multiple Apps and Rooms
A single p5.party server can support many apps and each app can group users into rooms. p5.party keeps track of which clients are in each room and shares the data to the right clients.
Client-side Hosting
p5.party automatically designates one (and only one) guest in each room as the host. Your code can easily check if it is the host and take care of running the party. This lets you avoid writing server-side code and makes prototyping faster.
<script src="https://cdn.jsdelivr.net/npm/p5@latest/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5.party@latest/dist/p5.party.js"></script>let shared;
function preload() {
// connect to server
partyConnect("...", "hello_party");
// load a shared data object
shared = partyLoadShared("shared");
}
function setup() {
createCanvas(400, 400);
noStroke();
fill("red");
// set initial values if they are not set*
shared.x ??= width * 0.5;
shared.y ??= height * 0.5;
}
function mousePressed() {
// write shared data
shared.x = mouseX;
shared.y = mouseY;
}
function draw() {
background("white");
// read shared data
ellipse(shared.x, shared.y, 100, 100);
}*using the newish ES2020 ??= Operator
The quickest way to get started with p5.party is to load it from a CDN or download the latest release .
Visit the P5 Web Editor Quick Start Guide or VS Code Quick Start Guide to get started!
You can set up a server in a few minutes using Heroku and a clone of the p5.party repo.
We welcome new contibuters. Please feel free to start a discusion, post issues, or request features. If you want to help with writing code or documentation, you can start by indicating your interest on an open issue or by creating your own.
Distributed under the MIT License. See license for more information.
p5.party builds on deepstream.io and sindresorhus/on-change. Deepstream is a realtime data-sync server that can be easily self hosted on services like heroku or aws. on-change uses javascript proxies to make a fully observable object. p5.party uses on-change to watch for changes to shared data objects and then communicates these changes to deepstream. p5.party also depends on a number of other great packages.
p5.party was created by Justin Bakse, Munro Hoberman, and Isabel Anguera.
Contributions by Tanvi Mishra, Apurv Rayate, Hyacinth Weng, MJ Gomez-Saavedra, Shayla Lee
Jessie Han, An Kong, Kevin Lin, Malin Mabika, Tanvi Mishra, Brittany Price, Apurv Rayate, Beatriz Ribeiro Dos Santos, Tong Shao, Hyacinth Weng, Winnie Yuxiang Zhai, Joan Jingwen Zhang, Jasmine Chen, Joshua Davison, Caitlin Keating, Simone Liu, Zhuoran Ma, Rand Rivera, Runzhe Sha, Haotian Wang, Ziyi Wang