loading davidflitcroft.com...
Generative Art · Interactive Experience · HTML Canvas · JavaScript · Creative Coding
Exponential Possibility Architecture is a live, generative drawing about how possibility compounds. A single node lands on a blueprint mesh and branches in all eight directions. Every new node branches again, so each generation opens up more paths than the last.
It’s an experience rather than an animation. You plant the nodes and set the rules, so no two trees ever come out the same, and everything you need to start playing sits right inside the canvas below.
Click or tap anywhere on the grid to plant a node. It branches in eight directions, merges where branches meet, then fades away.
Growth that multiplies, merges and lets go
Left unchecked, eight branches per node would explode into millions within a few generations. The piece is about the rules that shape that growth into something readable: branches that meet merge instead of overlapping, a chaos factor randomly closes off directions, and every tree is held inside a circle so it spreads evenly rather than squaring off.
As each tree grows, a soft shockwave travels outward with it, bending the grid lines just ahead of the growth like a pressure wave. Then everything fades: paths, nodes and ripple decay over the lifespan you set, freeing the grid for whatever you plant next.
The result sits somewhere between a diagram and a drawing: the precision of a technical blueprint, with the unpredictability of something organic. Each interaction is a small experiment in how simple rules, repeated, become complex structure.
Plain JavaScript and two canvases, no libraries, around 14KB compressed
The whole piece is written from scratch, with no frameworks or dependencies. It loads as one script and one stylesheet, and is themed entirely through the same design tokens as the rest of this site, so its paper, mesh and ink follow the system’s colours rather than its own.
Key decisions:
Everything lives in grid coordinates, not pixels, so the drawing is fully responsive and simply re-projects when the screen size changes
The blueprint mesh is drawn once on its own canvas, so each frame only redraws the growth on top of it
The ripple only warps the small band of grid each shockwave is passing through, and only while one is active
A map of occupied cells merges colliding branches, and a hard cap on active segments keeps even extreme settings smooth on modest devices