Signal field

The contour field behind the home page, opened up. Drive the flow speed, contour density and warp, and watch the fragment shader respond.

Renders on pointer-capable screens with motion enabled. The controls change uniforms only, so nothing recompiles as you drag.

01 / How it works

The hero shader is fixed at values chosen by eye. Exposing the parameters shows what the field actually is: a few sine harmonics folded through a rotation matrix.

A single full-screen triangle runs a fragment shader through OGL. Four octaves of a rotated sine field produce a scalar value per pixel; taking the cosine of that value and raising it to a high power leaves thin contour bands, which are then masked by a radial falloff.

OGL
GLSL
WebGL