Field

What it is

An interactive flow field written as a fragment shader: a domain-warped fBm noise field whose isolines drift over time and bend toward your pointer.

The whole thing is one full-screen quad and a single GLSL program — no particles, no geometry, no meshes — recoloured live from whichever theme the site is in.

Domain warping is the trick that keeps it from looking like ordinary noise: the field is sampled at coordinates that are themselves offset by another noise field, which folds the isolines into the curling, marbled shapes that read as flow. Everything happens per pixel in the fragment shader, so there is nothing to simulate and nothing to step — the image at any moment is a direct function of position and time.

It is also the cheapest kind of graphics there is. One quad, two triangles, no vertex data to speak of, and the entire image comes out of a single program the GPU runs once per pixel. That is why it can fill a phone screen smoothly while the rest of the page stays responsive, and why the whole piece is a few hundred lines rather than a scene graph.

The pointer is fed in as a single uniform and used to bias the warp, so the field bends toward the cursor without any of the pixels knowing about each other. The palette arrives the same way, read from the site theme into four colour uniforms, so the field is drawn in whichever theme you are already reading the site in rather than in a fixed set of colours.

How to use it

• Move the pointer to bend the field.
• Let it run — the field drifts on its own.

More experiments

• Anamorph — WebGL, GLSL, Optics
• Photoelastic — WebGL, GLSL, Physics
• Ferrofluid — webgl, three.js, r3f

See every experiment