EXP·014 Filament — the series' first real 3D: a torus knot woven from 120 glowing filament lines in WebGL, rotating in space, cyan through violet to magenta, retied on demand

Design Lab · Experiment 014 · webgl

Tie light in a knot.

Thirteen experiments faked depth. This one buys it: a torus knot traced by 120 luminous filament lines in real 3D, additively blended so every crossing burns brighter. Move the pointer to lean around it — parallax you can't counterfeit on a flat canvas.

p·q knot · 120 filaments
scroll
WebGL isn't available in this browser — the filament knot needs it. Everything below still reads fine.
[00]The loom, in space

013 hung threads under gravity · 014 winds them around a torus

Substrate
WebGL via three.js · the series' first real z-axis
Form
a (p,q) torus knot · 400 samples · retied from a set of five knots
Filaments
120 copies of the curve, each displaced around it with its own phase — a woven cable of light
Glow
additive blending · overlaps sum toward white, so density reads as heat
Dye
cyan → violet → magenta · per-vertex colour along the curve
Status
🟢 orbiting · DPR capped at 2 · reduced-motion parks a single frame
[01]Six strands

what makes a hundred lines read as one solid body of light

01 · one curve, many ghosts

The filament trick

There's only one knot equation. Each of the 120 lines is that same curve nudged sideways by its own phase — coherence from repetition, volume from disagreement.

02 · additive

Crossings burn

Lines don't occlude — they add. Where the knot self-intersects, brightness stacks toward white.

03 · real parallax

Depth you can test

Lean the pointer and near strands sweep faster than far ones — the cue 012 could only imitate with an exponential.

04 · the retie

Five knots, one loom

(2,3) trefoil, (2,5), (3,4), (3,5), (2,7) — same filaments rewoven around a new path each press.

05 · spectrum

Cyan → magenta

Hue rides the curve parameter, not position — the gradient travels with the thread.

06 · restraint, still

3D changes tools, not rules

Same series discipline as ever: one form, one palette, one interaction. The extra dimension is spent on presence, not on more stuff.

[02]Unravel

drag the slider · 0 = tight cable, max = a loose nebula of threads · unravels the hero knot too

unravel 22
Field note: no meshes, no lights, no shadows — the whole scene is LineBasicMaterial with vertex colours and additive blending. WebGL's cheapest primitives, arranged carefully, out-glow most lit scenes. The recording that prompted this experiment proved the look; this rebuilds it from one parametric equation.