Giter VIP home page Giter VIP logo

jbakse / p5.party Goto Github PK

View Code? Open in Web Editor NEW
45.0 45.0 37.0 10.48 MB

p5.party is a library for easily creating online multi-user sketches with p5.js. With p5.party you can quickly prototype ideas for multiplayer games, real-time multi-user apps, and multi-computer art projects.

Home Page: https://p5party.org/

License: MIT License

HTML 11.32% JavaScript 51.44% CSS 2.29% Lua 18.17% Procfile 0.01% TypeScript 16.25% GLSL 0.51%
multiplayer multiuser p5 realtime

p5.party's Introduction

p5.party logo

NPM GitHub package.json version

GitHub commit activity jsDelivr hits (npm) Website Website

Test Coverage:

Statements Branches Functions Lines

Multi-player Games with p5.js

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.

p5.party Website

Documentation

Demos + Examples

Discussion

What is it good for?

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.

What is it not good for?

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.

Features

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.

Show Me Some Code!

<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

Installation and Quickstart

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!

Server Installation

You can set up a server in a few minutes using Heroku and a clone of the p5.party repo.

Server Setup

Contributing

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.

License

Distributed under the MIT License. See license for more information.

Acknowledgements

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.

Contributors

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

Thanks To

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

p5.party's People

Contributors

dependabot[bot] avatar jbakse avatar redmoe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

p5.party's Issues

Ability to lock rooms after a number of players have entered

I think having this ability would be useful when p5.party is stable and there are many more people using it. An alternative is having players become participants after a certain number of players but maybe just having so many people in one room could cause lag. Another alternative would be to make multiple rooms for people to join but again it would be good to limit the number of players in each room. This request comes from the lag from having so many people trying out game b at once.

An asynchrony on reading shared object between sender client and receiver clients when using partyEmit().

I'm not sure if it's really a bug or it's just supposed to work like that, but I decide to post it here.

(Please review my code at the bottom)
In my test code, when a player click the mouse, it will add 1 to the shared object named shared.count, and send out a "showChange" event to other clients simultaneously using partyEmit("showChange"). "showChange" event will trigger a showChange() function in every client, and showChange() function will print the value of shared.count in the console.

Expected behavior
showChange() function is expected to print the changed value of shared.count. That is to say, if the initial value of shared.count is 1, when I click the mouse, I'm supposed to have a 2 in the console.

An expected process would be:

  1. initially, shared.count is 1;
  2. I click the mouse;
  3. shared.count changes from 1 to 2;
  4. a "showChange" event is sent to the party;
  5. every client receives "showChange" event;
  6. every client has shared.count(should be 2 now) printed in their consoles.

Observed behavior
On the sender client(the client that sent "showChange" event), the above process happened expectedly. I got 2 in the console finally.

However, on the receiver client(other clients that received "showChange" event), there was 1 in the console instead of 2 in step 6. That means the receiver client didn't read the changed value of shared.count but read the previous value.

If the receiver client read shared.count after the execution of showChange(), it can have the right changed value that is 2. So the asynchrony only happens for an instant after partyEmit().

p5.js and p5.party versions
I think it's the latest version as the source is https://cdn.jsdelivr.net/npm/p5.party@latest/dist/p5.party.js

Error Message
No, there isn't an error. The program can still run.

Your code
Here is my test code in p5 editor.

var shared;

function preload() {
  partyConnect(
    "wss://deepstream-server-1.herokuapp.com",
    "async_example",
    "room_0"
  );
  
  shared = partyLoadShared("shared");
}

function setup() {
  createCanvas(300, 300);
  background(0);
  
  if(partyIsHost()) shared.count = 1; // initial value is 1
  
  partySubscribe("showChange", showChange);
}

function showChange() {
  console.log("init: " + shared.count); // sender gets the changed value, while receiver gets the previous value
  let countdown = setInterval(function() {
    console.log(shared.count);
  }, 10); // if trying to get shared.count an instant later, both sender and receiver can have the changed value 
  setTimeout(function() {
    clearInterval(countdown);
  }, 100);
}

// when clicking the mouse, add 1 to shared.count and tell party to run showChange() to see the changed number in console
function mouseClicked() {
  let x = mouseX, y = mouseY;
  if(x < width && y < height) {
// change of shared.count and sending of 'showChange' event happen together here
    shared.count ++;
    partyEmit("showChange");
    
// This is my current solution - delay the execution of partyEmit(), and it works expectedly; but it looks weird
    // setTimeout(function() {
    //   partyEmit("showChange");
    // }, 50);
  }
}

partyIsHost() returning false in setup() for first connecting client

Describe the bug
partyIsHost() returning false in setup() for first connecting client

Observed behavior
partyIsHost() returning false in setup() for first connecting client

Expected behavior
partyIsHost() should return true since no other clients are connected to that room

p5.js and p5.party versions
p5.js 1.4.2
p5.party 0.9.1

Error Message
NA

Your code

// require https://cdn.jsdelivr.net/npm/p5@latest/lib/p5.min.js
// require https://cdn.jsdelivr.net/npm/p5.party@latest/dist/p5.party.js

/* exported setup draw preload mousePressed */
/* global partyConnect partyLoadShared partyIsHost*/

let shared;

function preload() {
  // connect to the party server
  partyConnect(
    "wss://deepstream-server-1.herokuapp.com",
    "jb_party_demo_9_13",
    "main1"
  );

  shared = partyLoadShared("shared");
}

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

  console.log("partyIsHost()", partyIsHost());

  if (partyIsHost()) {
    console.log("i'm host, init the grid");
    shared.grid = [];

    for (let col = 0; col < 10; col++) {
      shared.grid[col] = [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
      ];
    }
  }
}

function mousePressed() {
  // figure out what row + col are being clicked
  let col = floor(mouseX / 40);
  let row = floor(mouseY / 40);
  col = constrain(col, 0, 9);
  row = constrain(row, 0, 9);

  shared.grid[col][row] = !shared.grid[col][row];
}

function draw() {
  background("black");
  fill("red");
  noStroke();

  for (let row = 0; row < 10; row++) {
    for (let col = 0; col < 10; col++) {
      const x = col * 40 + 1;
      const y = row * 40 + 1;
      //   console.log(col, row);
      if (shared.grid[col][row]) {
        rect(x, y, 40 - 2, 40 - 2);
      }
    }
  }
}

Screenshots
NA

Free Heroku plans are no more

FYI: Starting November 28th, 2022, free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis® will no longer be available.
If you have apps using any of these resources, you must upgrade to paid plans by this date to ensure your apps continue to run and to retain your data. For students, we will announce a new program by the end of September. Learn more

Stale Example Links in Docs

Several of the links to examples from the Notion docs were broken, and new examples are linked from relevant pages.

We need to go through and update the links.

partySetShared not setting empty array correctly

Using partySetShared() to initialize a shared object in setup doesn't appear to be working correctly. At least not with array properties.

Expected behavior
a property initialized to [] should be an empty array

Observed behavior
setting a property to [] doesn't clear the existing contents of the array properly

p5.js and p5.party versions
p5.js 1.4.0
p5.party 0.6.1

function setup() {
  if (partyIsHost()) {
      partySetShared(shared, {
        locations: [],
      });
      console.log("init");
      console.log(JSON.stringify(shared.locations));  // should be empty, sometimes has a point already!
      shared.locations.push({ x: random(width), y: random(height) });
      shared.locations.push({ x: random(width), y: random(height) });
      console.log(JSON.stringify(shared.locations)); // should be two, sometimes three!
    }
  }
}

Change how partyLoadShared() init data works

Describe the solution you'd like
Init data should reset data when first client connects to empty room.

Currently it only initializes if shared object is brand new, which isn't useful in iterative prototyping.

partyGuestCount() could be an awesome function!

Is your feature request related to a problem? Please describe.
Not an unsolvable problem, but a quality of life one. Currently the only way to see the amount of guests online is by having them each create their own shared object, and then checking the length of that array.

Describe the solution you'd like
An easier way of accessing this, built into the library.

Describe alternatives you've considered
A function returning an int partyGuestCount().

Additional context
It's not a huge deal! Could just make a few things easier given that I find myself often wanting to use this function.

Hide "p5.party debug" panel.

Is your feature request related to a problem? Please describe.
The p5.party debug panel is always on for everyone. It is distracting.

Describe the solution you'd like
There should be a way to turn it on/off with code.

Describe alternatives you've considered
I could maybe hide it with CSS, but that seems hacky.

ToggleInfo Button not showing up

Describe the bug
I added the code to create a toggle info button for my rocket game. It was working at first but I had to close p5 because I was having an issue with the editor. When I reopened my sketch the button no longer shows up even though I have the code in setup().

p5.js and p5.party versions
p5.js - not sure
p5.party - 0.7.0

if(partyIsHost()){
partyToggleInfo(false);
createButton("Toggle Info").mousePressed(()=> {
partyToggleInfo();
});
}

Screenshots
If applicable, add screenshots to help explain your problem.
Image 2-13-22 at 3 06 PM

As you can see the toggle info button is missing. It was there earlier.

Add Doc Page about OOP Objects

OOP objects can't be shared with p5.party, the functions get stripped out. Add documentation explaining this, and addressing how to use OOP and shared data together.

select_room example should keep the room name in the input field

This feature request is related to the "Is it possible to create multiple rooms through the use of entry keys?" discussion thread:

What currently happens:
The experimental example, select_room, is currently refreshing the HTML input field back to "main" once the user clicks in the "Join Room" button.

What should happen:
After typing the custom room name into the HTML input field and clicking "Join Room", the typed name should remain exposed in the input field, so the users can remember/share their key to friends.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.