12 De la imagen a la receta

Paletas cosenoidales: color en una línea

0.5 + 0.5 · cos(2π(f·t + phase)): tres ondas cosenoidales con distintas fases para R, G y B convierten un número 0–1 en un degradado de color.

Frecuencia f1.00

0.23

Fase roja0.00

Fase verde0.33

Fase azul0.67

EjercicioAjustar valores0%

Encuentra este degradado cálido

Se ejecuta una vez por píxelArrastra los números o edita el código

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;   // arriba: t horizontal; abajo: t = distancia al centro
  vec3 phase = vec3(0.000, 0.330, 0.670);   // una fase para R, G y B
  vec3 color = 0.5 + 0.5 * cos(6.28318 * (1.000 * t + phase));   // tres ondas cosenoidales → un color
  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;   // arriba: t horizontal; abajo: t = distancia al centro
  vec3 phase = vec3(0.000, 0.330, 0.670);   // una fase para R, G y B
  vec3 color = 0.5 + 0.5 * cos(6.28318 * (1.000 * t + phase));   // tres ondas cosenoidales → un color
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

Una paleta convierte un número t en un color: cada canal es una onda cosenoidal con su propia fase. Las fases fijan el orden de los tonos; la frecuencia, cuántas veces se repiten al pasar t de 0 a 1. t puede venir de x, de una distancia, de un ángulo o del ruido.

Pruébalo

Pon las tres fases en 0: se vuelve gris
Pon la frecuencia en 3: el degradado se repite tres veces
En la mitad inferior, t es la distancia al centro: cámbiala por el ángulo atan(p.y, p.x)