12 From picture to recipe

Write the recipe yourself

No options this time. Look at the target, say its recipe in five layers, then change the code until it matches.

ExerciseEdit code0%

Match the target: glowing small circles in a six-slice kaleidoscope, coloured by distance

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  // ① space → ② shape → ③ edge → ④ paint
  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);
  // ① space → ② shape → ③ edge → ④ paint
  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 sidegl.uniform2f(uResolution, …, …)

Say the recipe before you write: space (polar, folded into 6 slices), shape (a small circle away from the centre), edge (glow), paint (a palette driven by distance). If you can say the recipe, you can write the code, and you can tell an agent exactly what you want.

Try it

Before writing code, describe the target in one sentence, layer by layer
Start from the space layer and change one layer at a time, checking the picture each time
Open the pixel debugger and show r, a, d and ink on the canvas one by one