Field notes · Site 165

Building a polymer that knits itself

Wander is a fictional visualisation study for the Generative Assets collection. Its one job: make a self-avoiding random walk — a walker forbidden from ever re-using a cell — grow live through a 3D lattice, coil into a dense random polymer, and quietly obey the Flory scaling law, R ∝ N^3/5, that no single step could know about.

The concept

Chance, constrained, becomes structure

An ordinary random walk forgets itself and diffuses as √N. Add one rule — never touch an occupied cell — and the walk is forced to steer around its own past. It swells outward, folds, and eventually boxes itself in and restarts elsewhere: a fold. Across many walks the straight-line reach settles onto a hidden exponent, ν ≈ 0.588, the same law that governs real polymer chains in a good solvent. The page is the argument made visible — a chaotic process on one side, an iron exponent on the other.

Palette

Four values argued from a lattice in the dark

A near-black void so the tube reads as light in space; one cool blue for the strand and its lattice; one warm gold reserved strictly for the growing tip and its bloom; a pale star-ink for type. The bright blue and gold are line/mark colours only — body copy uses a derived light ink that clears 4.5:1 on the void.

Void

#0A0B12

The unfilled lattice. Deep enough that the tube and bloom carry all the light.

Tube line/mark

#7FB0E0

The strand and lattice — cool, drawn-with-light. Axis-shaded into three tones for form.

Growing tip

#E8C24A

Warm gold, kept only for the advancing head and the bloom that crowns it.

Star-ink

#D8DEEA

Body ink derived light for legibility — ~13:1 on the void, never the accent.

Type

A geometric voice and a measured one

Sora — display

A geometric sans with an even, engineered rhythm — it reads like something drawn on a lattice. Carries the headline and section titles at heavy optical weight.

0.59

JetBrains Mono — data

A monospace for every number that must be trusted: step counts, span, the live exponent. Tabular figures keep the readouts from twitching as they tick.

Technique

Instanced tube, a lattice rule, and bloom on the tip

three.js instanced tube. Two InstancedMesh buffers — cylinders for the segments, spheres for the joints — grow the polymer one lattice step at a time up to a couple of thousand instances, each placed with a shared dummy matrix and tinted per-instance.
Self-avoiding walk on a cubic lattice. A hashed occupancy set records every visited cell; each step picks a random unoccupied neighbour inside a soft spherical confinement so the strand packs densely. No free neighbour means a trap — the fold ends and a new strand seeds into the crowded frontier.
EffectComposer bloom on the frontier. An UnrealBloomPass with its threshold set just above the blue tube makes only the gold head glow; an always-on-top pulsing beacon marks the current tip so the bloom reads even when the head is buried.
The scaling law, measured honestly. A kinetic growth walk is a noisy single sample, so the exponent is fitted from a background equilibrium ensemble built with the pivot algorithm — hundreds of independent self-avoiding walks whose binned mean end-to-end distance gives the plotted log-log cloud and a live ν ≈ 0.59.
Axonometric shading. Flat instanced colour is shaded by lattice axis (x brightest, z darkest) so the tangle reads three-dimensional without a single scene light.

Iteration log

Three passes, each driving the signature

Pass 1Craft

Rendered, the first build exposed two real defects a load-only probe would miss. The polymer drew as a thin, pale, sprawling thread — a self-avoiding walk in open 3D is intrinsically extended and sparse, so it read as a faint scribble that never filled the frame. And the live exponent was pure noise (ν read 0.19) because a single growing trajectory can't reveal a law that only emerges across an ensemble.

Fixes: introduced soft spherical confinement so the walk packs into a dense, frame-filling tangle, and drove the exponent from a proper equilibrium pivot ensemble instead of the hero strand. Relabelled the readouts to steps laid and tangle span so every number is honest.

Pass 2Depth

Added axonometric three-tone axis shading so the flat instanced tube reads dimensional with no lights — the biggest single lift in how expensive it looks. Fixed a latent bug where tip-gold segments never reverted to blue once the head passed, leaving a growing false trail; the trailing window now restores each segment to its base colour behind the tip.

Second-read detail: an always-on-top pulsing tip beacon tracks the live frontier, so the bloom signature is guaranteed on screen even when the head is knitting deep inside the tangle.

Pass 3Hardening

At 375px the hero copy sat over the busy tangle with nothing behind it; added a readability scrim — angled on desktop, vertical and stronger on mobile — so body text clears 4.5:1 while the tangle stays visible. Binned the exponent fit and lightly smoothed it so ν settles near 0.60 rather than jittering.

Verified the reduced-motion path renders a settled full-tangle static frame with the loop parked, DPR capped at 2 with composer resize, document.hidden pause, and a context-loss SVG fallback. Removed one ornament (the redundant dashed live-fit line) — the cloud already hugs the gold guide.

Designed & built by Sapience Analytics — part of the Generative Assets collection. A study in how a single constraint turns pure chance into a scaling law.