12 From picture to recipe

Cosine palettes: colour in one line

0.5 + 0.5 · cos(2π(f·t + phase)): three cosine waves with different phases for R, G and B turn one 0–1 number into a colour ramp.

Frequency f1.00

0.23

Red phase0.00

Green phase0.33

Blue phase0.67

ExerciseTune values0%

Find this warm colour ramp

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float t = vUv.y > 0.5 ? vUv.x : length(p) * 2.0;   // top: t across; bottom: t = distance from the centre
  vec3 phase = vec3(0.000, 0.330, 0.670);   // a phase each for R, G and B
  vec3 color = 0.5 + 0.5 * cos(6.28318 * (1.000 * t + phase));   // three cosine waves → one colour
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float t = vUv.y > 0.5 ? vUv.x : length(p) * 2.0;   // top: t across; bottom: t = distance from the centre
  vec3 phase = vec3(0.000, 0.330, 0.670);   // a phase each for R, G and B
  vec3 color = 0.5 + 0.5 * cos(6.28318 * (1.000 * t + phase));   // three cosine waves → one colour
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniform2f(uResolution, …, …)

A palette maps a number t to a colour: each channel is a cosine wave with its own phase. The phases set the order of the hues; the frequency sets how many times the colours cycle as t goes from 0 to 1. t can come from x, a distance, an angle or noise.

Try it

Set all three phases to 0: it turns grey
Set the frequency to 3: the ramp cycles three times
In the lower half t is the distance from the centre: change it to the angle atan(p.y, p.x)