Forty small WebGL sketches. Each one is under fifty lines and every line has a comment, because I keep this notebook to stay honest about what I actually understand.

A page from it

// 07: soft circle
precision mediump float;
uniform vec2 u_res;

void main() {
  vec2 p = (gl_FragCoord.xy * 2.0 - u_res) / u_res.y; // centre, keep the aspect
  float d = length(p) - 0.5;                           // distance to a circle
  float a = smoothstep(0.01, -0.01, d);                // one pixel of softness
  gl_FragColor = vec4(vec3(a), 1.0);
}

What is in it

• Noise, from value noise to fractal sums
• Signed distance fields and how to combine them
• Lighting with three numbers
• A few happy accidents, kept because they taught me something

Every sketch runs in the browser with a slider for each uniform.