12 从画面到配方

余弦调色板：一行公式配色

0.5 + 0.5 · cos(2π(f·t + phase))：R、G、B 三条余弦波相位不同，一个 0～1 的数就变成一条渐变色带。

频率 f1.00

0.23

红色相位0.00

绿色相位0.33

蓝色相位0.67

习题调参数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;   // 上半：t 横向变化；下半：t = 到中心的距离
  vec3 phase = vec3(0.000, 0.330, 0.670);   // R、G、B 各自的相位
  vec3 color = 0.5 + 0.5 * cos(6.28318 * (1.000 * t + phase));   // 三条余弦波 → 一种颜色
  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;   // 上半：t 横向变化；下半：t = 到中心的距离
  vec3 phase = vec3(0.000, 0.330, 0.670);   // R、G、B 各自的相位
  vec3 color = 0.5 + 0.5 * cos(6.28318 * (1.000 * t + phase));   // 三条余弦波 → 一种颜色
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧gl.uniform2f(uResolution, …, …)

调色板把一个数 t 映射成颜色：三个通道是相位不同的余弦波。相位决定颜色出现的顺序，频率决定 t 从 0 走到 1 时颜色循环几次。t 可以来自 x、距离、角度或噪声。

试一试

把三个相位都设成 0：变成黑白
把频率调到 3，色带循环三次
下半部分的 t 是到中心的距离：把它换成角度 atan(p.y, p.x)