A server-side video renderer for p5.js
I built a modern server-side video renderer for p5.js sketches. It’s called p5js-render. Point it at a sketch and it spits out an MP4, WebM or GIF.
Under the hood it runs your sketch in headless Chromium with Playwright, steps a virtual clock one frame at a time, seeds random() and noise(), and pipes the frames into ffmpeg. Every frame gets drawn exactly once, in order, so the same sketch and seed always make the same video. No dropped frames when your laptop fans spin up, and trails, particle systems and simulations come out exactly like they look live.
pnpm render cube-wave # output/cube-wave.mp4
pnpm render cube-wave --debug # with a debug HUD
The example sketches are homages to some of my favorite generative and computational artists.
Moire orbit, inspired by Bridget Riley and Ryoji Ikeda’s op art and minimalism:
Cube wave, after Dave Whyte (Bees & Bombs):
Drift squares, after Georg Nees’s Schotter (1968):
Dot lattice, after Etienne Jacob and Dave Whyte again:
There are more in the gallery, including nods to Tyler Hobbs, Vera Molnár and the Unknown Pleasures cover. The demo site also has examples of generating sprite sheets and making simple timeline-scrubber UIs: drag any film strip to scrub through a render frame by frame.
Source code is on GitHub. Hope it’s useful for others!
Shoutout to all the p5.js, generative and computational artists and hackers out there <3
This post also on: