Helix Noise · demos

One field, every renderer

Every page below drives its visuals from the same HelixNoise.create(...) — a grid-free, divergence-free helical flow field with four dials: slope (size of things), helicity (handedness), coherence (noise → structure) and churn (time). Plain HTML, no build; serve the repo root (npm run demo) and click around.

Flagship

Nebula glsl · time

No bake, no sim: rays march hx(p, t) analytically. Density = |vorticity|, colour = handedness, churn = Kolmogorov time.

webgl2

Vortex tubes sampleUW

Streamtubes coloured by u·ω. Slide helicity to ±1 — every tube winds the same way. The axis curl-noise doesn't have.

three.js

A million particles glsl · TF

1–4 M particles advected in a transform-feedback shader. Zero CPU field calls per frame.

webgl2

GPU particle engine · `helix-noise-gpu`

Flow loop streaklets

A seamless 12 s loop: velocity streaklets, a glassy bubble the flow parts around (exact div-free boundary), then the helicity flips and the whole swirl reverses. Records itself to webm.

webgl2

Fire gpu lifecycle

A buoyant particle lifecycle stirred by the field's own churn as living turbulence — white-hot core → orange tip → soot, with sparks and smoke.

webgl2

Candle interactive

A 3-D scene where flame, drafts and light flicker are one field. Blow it out (double-click), watch the smoke, click to relight.

interactive

Nature pack 4 weathers

One field, switched live: snow, rain, fireflies and an aurora whose sway is the field sampled along the arc.

webgl2

Motion, art & science

Kelp forest sampleUW · t

Every frond bent by the field at its own height and at field time. The sway is the library's own churn — turn it to 0 and the forest freezes mid-current.

three.js

Ebru marbling bake2D

Ink advected through the flow. Because it's divergence-free, bands stretch and fold but never tear — incompressibility made visible.

canvas

Q-criterion marching cubes

Vortex tubes extracted where rotation beats strain, Q = ½(‖Ω‖²−‖S‖²). Raise coherence → the tangle condenses.

three.js

Jetstream cirrus anisotropy · glsl

One dial — anisotropy γ — shears an advected dye sky: wisps combed along the jet at γ<0, billow bands across it at γ>0. Same field, one number.

webgl2

Simulation & surfaces

Volumetric smoke bake3D

A 48³ dye volume advected semi-Lagrangian and raymarched with self-shadowing. Draw smoke with the pointer.

webgl2

Flowing water bake2D

Ripple layers bent along the streamlines, with caustics and sun-glints.

canvas

Flow around an obstacle withBoundary

A cylinder given only by its SDF — the flow slides along the wall, still exactly divergence-free.

boundary

GPU smoke + obstacle bakePotential3D

The whole sim on the GPU: velocity is the curl of a baked potential (div-free after interpolation); the SDF's alpha channel carves and shades the solid. Sphere, torus, or bar.

webgl2

Atom engine createAtoms

Spatially-varying dials: right-handed on the left, left-handed on the right — one seamless field.

atoms

Audio-reactive WebAudio

Bass pumps amplitude, treble drives churn, stereo balance tips helicity. Built-in demo beat, or your mic / a track.

audio