Getting started

You need a page with p5.js and one module from p5loom. There is no build step.

1. Load p5.js

p5loom uses the p5 constructor you give it, so load p5.js first. The site uses the 1.11.3 build from cdnjs:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>

2. Get the library

The package is not yet on npm. Until it is, copy the src/ folder of the repository next to your page, or use the copy this site serves at /lib/:

<script type="module">
  import { mount, validateSpec } from "/lib/index.js";
</script>

Once published, the import becomes import { mount } from "p5loom". Nothing else changes.

3. Write a spec

A spec is a JSON object. This one draws a circle in the accent colour:

{
  "version": 1,
  "seed": 1,
  "theme": "light",
  "canvas": { "width": 480, "height": 320 },
  "elements": [
    { "type": "circle", "x": 0.5, "y": 0.5, "r": 0.3, "fill": "accent" }
  ]
}

4. Mount it

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
<div id="chart"></div>
<script type="module">
  import { mount } from "https://p5loom.dawnshift.co/lib/index.js";

  const spec = { /* a spec object, see the Spec page */ };
  const handle = mount(document.getElementById("chart"), spec, { p5 });
  // handle.description is the text alternative. handle.destroy() removes the picture.
</script>

mount validates the spec first. If it is wrong it throws an error whose problems property lists every problem, not just the first.

5. Check before you draw

To check a spec without drawing anything, call validateSpec. It returns an array of problem strings, empty when the spec is valid. This is what the playground uses.

import { validateSpec } from "/lib/index.js";

const problems = validateSpec(spec);
if (problems.length) console.log(problems.join("\n"));

What to read next

The spec reference lists every field. The elements page shows each of the five types. If you are building something that accepts specs from users or from a model, read the security model first.