12 从画面到配方

看图写配方：自己写一遍

这次没有选项。看目标图，先按五层说出配方，再把代码改成和它一样。

习题改代码0%

把画面改成目标图：六片万花筒里发光的小圆，颜色随距离变化

每个像素运行一次拖动数字，或直接改代码

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  // ① 坐标 → ② 形状 → ③ 边缘 → ④ 着色
  float d = length(p) - 0.3;
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);
  vec3 tint = vec3(0.48, 0.83, 0.69);
  vec3 color = vec3(0.06, 0.10, 0.14) + tint * ink;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  // ① 坐标 → ② 形状 → ③ 边缘 → ④ 着色
  float d = length(p) - 0.3;
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);
  vec3 tint = vec3(0.48, 0.83, 0.69);
  vec3 color = vec3(0.06, 0.10, 0.14) + tint * ink;
  gl_FragColor = vec4(color, 1.0);
}

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

写之前先说出配方：坐标（极坐标折成 6 片）、形状（离中心一段距离的小圆）、边缘（发光）、着色（随距离变化的调色板）。说得出配方，就写得出代码，也能准确地告诉 agent 你要什么。

试一试

先不写代码，按五层用一句话描述目标图
从坐标层开始一层一层改，每改一层看一次画面
打开像素调试，用“画面显示”逐个检查 r、a、d、ink