hello_cdn

This example shows how to connect to a party server, load a shared data object, and read and write to it.

click to move the dot

This example is the same as hello_party but loads p5.party from a CDN instead of a local file.

CDN stands for Content Delivery Network. A CDN hosts commonly accessed content like js libraries.

Loading p5.party from a CDN introduces an external dependency; if the CDN removes the file, your app won't be able to load it.

Using a CDN is good for quick sketching, and also lets you always load the latest version of the library rather than a spcific version which is sometimes useful.

Loading the latest version from the CDN:

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

Loading a specific version from the CDN:

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

Try this example on the p5 web editor.

Try this example in two browser windows at once!

index.js

let shared;

function preload() {
  // connect to the party server
  partyConnect("wss://demoserver.p5party.org", "hello_cdn");

  // begin loading shared object
  // setup() won't be called until the shared object is loaded
  shared = partyLoadShared("shared", { x: 0, y: 0 });
}

function setup() {
  createCanvas(400, 400);
  noStroke();
  partyToggleInfo(true);
}

function mousePressed() {
  // write shared data
  shared.x = mouseX;
  shared.y = mouseY;
}

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

  // read shared data
  ellipse(shared.x, shared.y, 100, 100);
}

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>

    <!-- Using the latest version -->
    <script src="https://cdn.jsdelivr.net/npm/p5.party@latest/dist/p5.party.js"></script>

    <!-- Using a specific version -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/p5.party@0.7.0/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>