A media module, lifted out of ButterflyDreaming.

BDX · AVX · RX — a controller, a viewer and a relay

ButterflyDreaming (BD) is a collaborative arts‑therapy and peer‑counselling system: a corpus of literature, art and music that anonymous users collage together in conversation.

BDX is one of its media modules, taken out and made to stand on its own — a controller, a viewer and a relay, with no database, no corpus and no accounts behind them. Two web pages and a script. It is here so that anyone can play with a typical module, and so that a developer can work on the part they actually care about: what you build runs independently, and goes back into BD unchanged.

See it. The drawing is based on kolams, grown from an L‑system. Edit the script or move a stepper: two ways of saying the same thing. The script is what is true, and everything else is a view of it.

Send it. copy view URL puts the same live drawing on another device — scan the QR with a phone.

Developer information

Two mechanisms, with two different jobs.

postMessage is the module interface — a browser API, not a network one. It carries messages between two windows in the same browser that hold a reference to one another: a page and its iframe, or a window and the one it opened. Not between two browsers, and not to another machine — which is exactly why the relay below exists. The drawing is an iframe, and BDX drives it this way: it sends the script, and the renderer announces what it drew. That exchange is the whole contract, and implementing it is what makes something a module.

WebSockets are the viewer transport — how the script reaches a viewer that is not in the page. Two devices have no window between them, so something must stand in the middle: the relay holds a WebSocket to each side and passes messages across. (Socket.IO, so it opens on long‑polling and upgrades.) The relay is substitutable.

Build on it. The renderer is replaceable: anything that honours that contract can stand in its place, and then runs inside ButterflyDreaming unchanged. BDX is the harness — it shows what a host has to provide, and how little that is.

A relay is live behind this copy, so the demo works on click. To run the whole thing yourself: npm install && npm start, then http://localhost:8081/bdx.html. To point these pages at a relay of your own, ?rx=https://your-relay — no forking required, and remembered for that browser afterwards.

Repository: github.com/wrcstewart/bdx-demo — the source, and the reasoning behind every decision in it. CC0.