Domain warping

When one noise shifts the coordinates of another, the plane starts to flow; a second round brings curls of smoke, veins of marble, oil swirling on water, the cloud belts of Jupiter. The trick is called domain warping: rather than the colour, it bends the space in which the colour is computed.

How it works

There are three stages, as in Inigo Quilez’s article. First a two-component noise q, a pair of offset fbm fields; then r, sampled at the point displaced by q; finally f, sampled at the point displaced by r. Each stage carries the point on from where the last left it, so swirls curl inside swirls.

The inner stages stay smooth, three or four octaves at most: later stages would blow any fine ripple there up into pixel noise. “Octaves” and “Detail” shape only the last stage.

Quilez’s key idea is that q and r double as paint. In “smoke”, f sets the base tone, the length of q darkens it and r.x lightens it; “Colour mix” says how much. “Marble” is a sine wave along a diagonal of the warped plane; its zeros become veins that swell and thin out. “Liquid” pushes smooth bands through the whole palette. “Ink” draws, on a transparent ground, a family of lines that the flow bunches and spreads but never lets cross. Every stage is periodic noise, so the picture tiles; in animation the gradients turn by whole turns and the loop closes.

A bit of history

Bending coordinates is as old as procedural graphics: in Ken Perlin’s 1985 paper marble is already a sine of a coordinate plus turbulence. Inigo Quilez, co-creator of Shadertoy, made the trick recursive and wrote it up on his site as “Domain warping”, with videos from 2002 and 2012. Since then f(p + fbm(p + fbm(p))) has become one of the best-known formulas in shader art. “Ink” has older ancestors: Japanese suminagashi, “floating ink”, known since the twelfth century, and Turkish ebru. Colours are floated on water (thickened, for ebru), combed or blown into shape, and lifted off with a sheet of paper.

What to tweak

• “Warp strength” at 0.3 ripples gently; 1.5–2.5 twists whirlpools.
• “Marble” with a palette of white, grey and near-black makes Carrara stone; a lower “Colour mix” calms it.
• “Liquid” with five to seven bright colours is marbled endpaper.
• “Ink” is transparent: lay it over a “Mesh gradient” or a coloured background.
• Put the “Mosaic” effect on top with the “Voronoi” layout to cut the marble into grouted tesserae, or add “Relief” to give the veins depth.