Demos
Playground
The full instrument: every brush, pigment palettes, masks, transparency, the timeline flourish — with built-in docs and the complete changelog (v0.1 → v1.0.22).
Serpentine
A watercolor snake — continuous strokes and fading trails, painted live by the engine.
Develop
Paint to reveal an image — the wash acts as an alpha or luminance mask over what lies beneath.
Washes Lab
The sim as a live texture on a 3D sheet of paper — two independent canvases, one per face, and wet faces fold the sheet their own way. Orbit, zoom, paint on it in space.
Washes Physics
Rigid bodies painting wet paper (matter.js) — drag a body to throw it, click the sheet to drop another; the sheet hangs upright, so fresh paint drips and impacts splash.
Showcase
- Pages — product & story pieces
- GRAIN Surfacing VANTAGE
- Studio — brand studies
- BURN CURRENT FIELDS HANDMADE Meridian prerender
- Personality — ten temperament studies
- three studies live studies interfering field five studies continuous organism words dissolving temperament you touch light from dark five-channel recording
- Labs — physics & experiments
- Lab I — physics Lab II — experimental demo gallery two-layer v1.1 features 2.x features
The engine
washes is a dependency-free npm-shaped package (README
·
changelog 0.98 → 2.3.0) living in engine/. The stage above is the engine
painting for itself — inks mixed for the local hour, strokes
choreographed by the timeline sidecar, an opaque canvas ({ opaque: true }, new in 2.3.0) in a width-capped frame that fixes the grid cost on
any monitor, resolution handed to you as the
quality() presets in the corner strip, and it reads its
own coverage() before deciding what to paint next. The
corner controls re-ink, pause (it still accepts pigment while frozen —
deposits bloom on resume), reset, or save the sheet as a PNG. View
source — the whole painter is a couple hundred lines.
// ESM / bundlers
import { Washes } from './engine/src/index.js';
const wc = Washes.create(host, { pigments: [{ color: '#2f6fb0' }] });
wc.paint(0.5, 0.5, 0.06, 'blue', 0.8);
<!-- classic script tag -->
<script src="engine/dist/washes.standalone.js"></script>
<script> const wc = Washes.create(host); </script>
Optional entry points: washes/gpu-sim (WebGL2 backend)
and washes/timeline (declarative stroke choreography).
Saved brushes live in
presets/.
Paper references
Interactive explainers of the literature the simulation is built on:
History
The project's full lineage — watercolor v0.1 → v1.0 and washes v0.61 → v0.98 — is preserved as runnable snapshots in archive/versions/, alongside the original bundles and build-session transcripts in archive/.