cursors new

Try this example in two browser windows at once!

index.js

console.log("%c Reload! \n ", "background: #f00; color: #fff");

let me;
let guests;

function preload() {
  partyConnect("wss://demoserver.p5party.org", "cursors");
  me = partyLoadMyShared({ x: 200, y: 200 });
  guests = partyLoadGuestShareds();
}

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

  // initialize this guests cursor position
  console.log("me", JSON.stringify(me));
  console.log("guests", JSON.stringify(guests));
  console.log("am i host?", partyIsHost());

  // partyToggleInfo(true);
}

function mouseMoved(e) {
  me.x = mouseX;
  me.y = mouseY;
}

function draw() {
  background("#ffcccc");

  // draw each guests cursor
  for (const p of guests) {
    fill("#cc0000");
    ellipse(p.x, p.y, 20, 20);
  }

  // mark this guests cursor
  fill("#ffffff");
  ellipse(me.x, me.y, 15, 15);
}

index.html

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <main></main>

    <div id="readme"></div>

    <h2>index.js</h2>
    <div id="source-javascript"></div>

    <h2>index.html</h2>
    <div id="source-html"></div>

    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
    <script src="/dist/p5.party.js"></script>
    <script src="index.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
    <link rel="stylesheet" href="/examples.css" />
    <script src="/examples.js" type="module"></script>
  </body>
</html>