dotweave

I wanted to make something people could play with rather than just look at.

The starting point was almost nothing: a canvas, one mark and a handful of ways to repeat or change it. The question was how far those simple ingredients could go before the interface needed another control.

dotweave↗ (opens in a new tab) is the result: a generative playground where small adjustments can turn a simple repeated shape into a completely different composition.

The interface is organised around five areas: Form, Repeat, Drift, Colour and Export. I set myself a limit of five controls per tab. That constraint meant choosing what genuinely changed the outcome rather than continually adding options.

The interesting results come from the relationships between controls. A slight change in wave frequency behaves differently when the grid gets denser. Rotation transforms an offset pattern. Colour and blending can make the same geometry feel entirely new.

I built the canvas in p5.js and the interface in SvelteKit, with the drawing logic separate from the controls. The compact, floating panel adjusts to what you're doing so the work stays centre stage.

I wanted the results to be as easy to share as they are to make. A composition can be exported as an image or a standalone p5.js sketch, but its settings can also be encoded in a URL. Open that link and the composition is there, ready to change.

It's a small detail with a big consequence: sharing a design doesn't have to mean flattening it.

Building dotweave reminded me how much expressive range can come from a carefully chosen constraint. The goal wasn't the largest possible toolset. It was to make a few controls feel worth exploring.

Play with dotweave↗ (opens in a new tab).