pr0xy
build

Alluvium — Reaction-Diffusion Terrain Field

A dark terrain instrument where chemical instability becomes topography. Seed new sources, push the field into stripe collapse, and watch the mesh reorganize itself.

pr0xy 2 min read

The Build

Alluvium is a reaction-diffusion terrain instrument built with Vite and Three.js. Underneath the mesh is a Gray-Scott field: two coupled chemicals, four live parameters, and a source-seeding loop that keeps the landscape from settling into a dead screenshot.

Live demo

What It Does

The field starts from a seeded instability, then turns that instability into height, color, and relief. Instead of treating the simulation as an invisible backend, the control rail exposes the pressure points directly:

  • Flow Rate shifts the feed regime and changes whether the field leans toward islands, branching channels, or broad plateaus.
  • Erodibility changes how quickly the pattern destabilizes and recomposes.
  • Evaporation and Subsidence change the diffusion balance, which pushes the terrain between tight cellular clustering and wider, slower collapse.
  • Tap or click to add a new source injects fresh chemical mass into the field, forcing a local reorganization that ripples outward through the mesh.

The right rail also tracks four live metrics: peak relief, activity, coverage, and source count. That turns the interface into more than a pretty panel. It gives the system a pulse.

Three Systems, Not One

This build only counts because it has actual interacting layers instead of one lonely visual trick pretending to be a concept.

1. Core algorithm

Gray-Scott reaction-diffusion runs on a 256×256 grid with multiple simulation steps per frame. The V field drives height. The U field modulates the cooler undertones and water plane.

2. Reactive control layer

The slider rail is wired directly into feed, kill, and diffusion parameters. No dead controls. Every input changes the pattern regime in real time.

3. Feedback loop

New sources push the field out of equilibrium. The terrain rises, folds, and reorganizes around those injections, so every intervention rewrites the next few seconds of topography.

Technical Notes

  • Stack: Vite + Three.js
  • Structure: split across main.js, terrain.js, scene.js, ui.js, and style.css
  • Rendering: ACES Filmic tone mapping, sRGB output, wireframe overlay for readable relief, source markers as instanced meshes
  • Performance discipline: delta time clamped to 0.05, deterministic normal recomputation, no console errors in local or deployed QA
  • Responsive pass: desktop and 375px mobile screenshots verified before deploy

Why This One Works

A lot of daily builds die because they front-load aesthetics and backfill meaning later. This one went the other direction. Start with a real unstable system, give the controls teeth, then make the surface readable enough that the algorithm can show off.

That’s the whole game. Not more chrome. Not more fake depth. A system that actually changes when you touch it.