Lesson 1 of 10 · Domain warping

Giraffe

Distortion is haute couture.

You already know noise and FBM. Now you will learn to connect them differently, use the output of one noise as input of another. That is domain warp: noise bends itself.

To turn that field into recognizable materials you need cutting and shaping tools. These are the new ones:

→ step(edge, x) hard cut, 0 or 1, no transition
→ smoothstep(a, b, x) soft cut, gradual transition between a and b
→ sin(field * N) turns a field into waves, veins, rings, bands
→ fract(p * N) repeats space into cells, scales, mosaics
→ length(p) distance to center, everything radial

With these tools + domain warp you will build: camouflage, cow spots, leopard, wood grain, tie-dye, scales, marble, and a lava lamp.

The code below is your first domain warp. fb(p + fb(p)), one line that changes everything.

fb(p + fb(p)). Noise distorts itself.

fb(p + fb(p))Evaluate fb() once to get a displacement. Add it to coordinates. Evaluate fb() again. Noise distorts itself = fluid shapes.

TryChange 0.8 (warp amplitude) to 0.1, barely bends. To 2.0, eats itself. That number is your main knob.

The code

void main(){
  vec2 p = gl_FragCoord.xy / R * 4.0;
  float warp = fb(p);
  float f = fb(p + warp * 0.8);
  float patch = smoothstep(0.40, 0.48, f);
  float crack = 1.0 - smoothstep(0.36, 0.40, f);
  float edge = smoothstep(0.40,0.42,f)*(1.-smoothstep(0.46,0.48,f));
  vec3 hide = vec3(0.92, 0.65, 0.28);
  vec3 dark = vec3(0.04, 0.02, 0.005);
  vec3 col = mix(dark, hide, patch);
  col *= 0.7 + 0.3 * f;
  col -= vec3(0.1, 0.05, 0.01) * crack;
  col += vec3(.08,.04,.01) * edge;
  col += vec3(.18,.12,.04) * pow(patch, 3.) * 0.6;
  gl_FragColor = vec4(col, 1.0);
}