dom_cursors

DOMCursors is an easy to show everyone each other's cursors.

To use this, copy the DOMCursors.js file to your project. It is a javascript module, so your sketch will need to be a module or you'll need to modify DOMCursors.

move your cursor

Try this example in two browser windows at once!

index.js

import DOMCursors from "./DOMCursors.js";

window.preload = () => {
  // connect to the party server
  partyConnect("wss://demoserver.p5party.org", "hello_party");
};

window.setup = () => {
  createCanvas(400, 400);

  new DOMCursors(true);
};

window.draw = () => {
  background("#334");
  fill("black");
  rect(0, 0, width * 0.5, height * 0.5);
  fill("white");
  rect(width * 0.5, 0, width * 0.5, height * 0.5);
};

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" type="module"></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>