A Appendix

Playground: paste any shader

Paste a fragment shader written by an agent, found online or written by you. WebGL 1 void main works, and so does Shadertoy’s mainImage (without iChannel textures); iTime, iResolution, iMouse and u_time, u_resolution, u_mouse are connected for you.

Actual GPU sourceDrag numbers, or edit the code

#extension GL_OES_standard_derivatives : enable
precision mediump float;
uniform vec2 uResolution;
uniform highp float uTime;

void main() {
  // replace all of it: void main or Shadertoy’s mainImage both work
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = atan(p.y, p.x) + uTime * 0.3;   // ① ⑤ space and time: the polar angle, turning over time
  float d = length(p) - (0.25 + 0.08 * cos(5.0 * a));   // ② shape: distance to a five-petal flower
  float fill = 1.0 - smoothstep(0.0, fwidth(d), d);   // ③ edge: antialiased fill
  float glow = 0.01 / abs(d);   // ③ edge: glow
  vec3 color = mix(vec3(0.1, 0.2, 0.5), vec3(1.0, 0.6, 0.3), fill) + glow;   // ④ paint: mix two colours, then add the glow
  gl_FragColor = vec4(color, 1.0);
}

#extension GL_OES_standard_derivatives : enable
precision mediump float;
uniform vec2 uResolution;
uniform highp float uTime;

void main() {
  // replace all of it: void main or Shadertoy’s mainImage both work
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = atan(p.y, p.x) + uTime * 0.3;   // ① ⑤ space and time: the polar angle, turning over time
  float d = length(p) - (0.25 + 0.08 * cos(5.0 * a));   // ② shape: distance to a five-petal flower
  float fill = 1.0 - smoothstep(0.0, fwidth(d), d);   // ③ edge: antialiased fill
  float glow = 0.01 / abs(d);   // ③ edge: glow
  vec3 color = mix(vec3(0.1, 0.2, 0.5), vec3(1.0, 0.6, 0.3), fill) + glow;   // ④ paint: mix two colours, then add the glow
  gl_FragColor = vec4(color, 1.0);
}

JS side

gl.uniform2f(uResolution, …, …)
gl.uniform1f(uTime, 0.00)

To read unfamiliar code, first sort it into the five layers (space, shape, edge, paint, time), then open the pixel debugger and show each variable on the canvas. Before changing a number, predict what will happen: wherever you guess wrong is what you haven’t understood yet.

Try it

Select all the code and paste a shader from Shadertoy (the mainImage kind)
Ask an agent for a shader, and ask it to comment each line by layer: space → shape → edge → paint → time; paste it in and read along
Open the pixel debugger and show d on the canvas: the distance map from the shape layer
Before changing a number, say what the picture will do, then change it to check