Noise Color Map
A noise value is just a float between 0 and 1 — you can use it directly as the blend factor between two colors:
mix turns noise into color
mix(a, b, t) interpolates between color a and color b — t is the blend ratio from 0% to 100%. When t = n (the noise value), low-noise regions lean toward color a and high-noise regions lean toward color b, with a continuous transition in between. This converts a grayscale noise field into a two-color gradient noise.
The colors in use
High contrast between deep blue and orange makes the noise structure easy to read.
What valueNoise does
valueNoise assigns a random value to each grid point and interpolates smoothly between them. vUv * 8.0 scales the coordinate by 8, fitting 8×8 noise cycles into the canvas.
Try changing it
| Change | Effect |
|---|---|
vUv * 8.0 → vUv * 3.0 | Lower frequency, larger color patches |
a → vec3(0.05, 0.3, 0.1) (dark green) | Changes the low-value color |
b → vec3(1.0, 0.95, 0.8) (off-white) | Changes the high-value color |
valueNoise → fbm | Use the multi-octave noise for finer texture |
Exercise
Replace vec3 c = a; and gl_FragColor = vec4(c, 1.0); with output that uses mix(a, b, n), so the canvas transitions from blue to orange based on the noise value.
Answer Breakdown
Starting state: vec3 c = a sets every pixel to the same deep blue — the noise shape is completely invisible.
The fix: mix(a, b, n) makes the noise value n drive the blend ratio for each pixel. Low-noise areas go blue, high-noise areas go orange, and the transition is continuous — the spatial pattern of the noise appears as color.
Try mix(a, b, pow(n, 3.0)) to see how an exponent pushes most of the canvas toward the low-value color with only bright highlights reaching the high-value color.