Cube Wave
A field of columns rises and falls in a wave spreading from the center. WebGL with an isometric camera, and faces colored by hand instead of lit.
After Dave Whyte (Bees & Bombs), 'cube wave'
Drag or use arrow keys
Quick start
# install, then fetch the browser once
pnpm install && pnpm exec playwright install chromium
# render an example, with the debug HUD burned in
pnpm render cube-wave --debug
# render your own sketch to a looping GIF
pnpm render ./sketch.js -o sketch.gif --duration 4How it works
-
Your sketch
sketch.js- + assets
-
Headless Chromium
- seeded
random() - virtual clock
- frames 1, 2, 3… in order
- seeded
-
Encoder workers
- PNG, in parallel
- next frame keeps drawing
-
ffmpeg
- MP4
- WebM
- GIF
Every video was rendered by GitHub Actions from the sketches in examples/. Drag a film strip to scrub frame by frame.
Pulsar Ridges
Seventy-two ridgelines, each hiding the ones behind it. Combs of subpulses drift through the peaks the way the pulsar CP 1919 really does.
After Peter Saville's Unknown Pleasures cover, from Harold Craft's plot of pulsar CP 1919
Drag or use arrow keys
Clifford Bloom
A million points of a Clifford attractor, binned into a density map each frame and tone-mapped from navy to warm white, while its parameters travel a closed loop.
After Clifford Pickover and the fractal flame renders of Scott Draves
Drag or use arrow keys
Flow Fibers
Hundreds of fibers, from bold ribbons to hairlines, grow along a noise flow field. Paths are planned against a collision grid, so strands bundle side by side and never pile up.
After Tyler Hobbs (Fidenza) and the flow-field tradition
Drag or use arrow keys
Truchet Weave
A wave sweeps across a grid of Truchet tiles. Each tile makes an eased quarter-turn, so the ribbons break apart and rejoin into a new maze.
After Cyril Stanley Smith's Truchet tiles, with palettes after Vera Molnar and Kjetil Golid
Drag or use arrow keys
Reaction Diffusion
One seed grows into a coral maze that fills the frame. New growth glows coral and cools to cream, so the finished image records how it grew.
After Gray-Scott Turing patterns, after Karl Sims' explainer
Drag or use arrow keys
Dot Lattice
A hexagonal lattice swings along its radii. Overlapping dots add up into bright rings, and ten sub-frame samples blur each dot into a streak.
After Etienne Jacob and Dave Whyte (Bees & Bombs)
Drag or use arrow keys
Schotter Drift
A column of inked squares, calm at the top and rubble at the bottom. A slow wave carries it from order to chaos and back.
After Georg Nees, Schotter (1968)
Drag or use arrow keys
Moire Orbit
Two sets of fine rings with slightly different spacing circle each other, and their interference makes broad spiral fringes that stream outward.
After Bridget Riley's op art and Ryoji Ikeda's precise minimalism
Drag or use arrow keys
Questions
Still stuck? Read the README or open an issue.
How do I render a p5.js sketch to an MP4 video?
Install p5js-render with pnpm, run pnpm exec playwright install chromium once, then run pnpm render ./sketch.js -o sketch.mp4 --duration 4. The sketch runs in headless Chromium and each frame streams into ffmpeg.
How do I make a p5.js animation loop seamlessly?
Drive every motion from window.p5Render.progress, which runs from 0 up to (not including) 1 across the video. Use whole periods such as sin(TWO_PI * progress), so the frame after the last one matches the first.
Why do screen recordings of p5.js sketches drop frames or differ between runs?
Live recording depends on the wall clock and on Math.random. p5js-render replaces both: millis(), deltaTime and Date follow the frame number, and random() and noise() are seeded, so every render of the same sketch and seed is identical.
Can I export a p5.js sketch as a GIF or WebM?
Yes. The output extension picks the format: .mp4 for H.264, .webm for VP9 and .gif for a looping GIF with an optimized palette.
Does it support WebGL, p5.js 2.x and async setup?
Yes. It runs the installed p5.js 2.x by default, awaits async setup(), supports instance mode and WEBGL canvases, and can load any p5 version with --p5-version.
How is p5js-render different from p5.capture or CCapture?
p5.capture and CCapture record inside your browser tab. p5js-render runs from the command line, a Node API or an HTTP server, so it suits batch renders, CI and servers, and it keeps stateful sketches exact by drawing every frame in order.