Five element types
Circle, rectangle, line, scatter and seeded random dots. Enough for charts, diagrams and generative art, and small enough to read in one sitting.
Open source. MIT licence. Built on p5.js.
Describe the picture.p5loom draws it.
A picture is a short JSON spec. The spec is data, not code, so it can be stored, shared and checked before anything draws. Colours are theme tokens, so light and dark just work. Randomness comes from a seed, so a saved spec is a saved picture. Every picture ships with a text description for screen readers.
A spec can be saved, diffed, shared in a link, written by a model, and checked before anything draws. It cannot run code. There is no function, script or URL in it that a browser would act on.
The library turns a spec into a plan of drawing operations first. Only then does p5.js touch a canvas. The tests check the plan without a browser.
Two themes, one layout
Light and dark share every coordinate. A theme changes colours only. Body text and accents meet WCAG contrast in both.
Reproducible
A seed fixes the random sequence on every platform. The library never calls Math.random, so a saved spec is a saved picture.
Accessible by default
Each canvas gets a role, a label and a visually hidden caption built from the spec's counts. It says what is there, not what it means.
Safe to accept from anywhere
Specs are validated before use. Code-like keys, function values and script or data URLs are refused. The size is capped at 512 KB.
No dependencies
Plain ES modules. The library needs only p5.js on the page, and the site serves its own fonts.
- Getting startedPut a picture on a page in five minutes.
- Spec referenceEvery field, its limits and what it means.
- ElementsThe five element types, each with a live example.
- Themes and contrastThe tokens, and the contrast ratios the tests hold.
- APImount, validateSpec, buildPlan and the rest.
- PlaygroundEdit a spec and watch the picture change.