12 From picture to recipe

Five layers: from picture to code

Almost every 2D shader splits into five layers: space, shape, edge, paint and time. Change one layer at a time and watch what changes.

① Space

② Shape

③ Edge

④ Paint

⑤ Time · spinOff

ExerciseTune values0%

Read the target layer by layer: how is space changed? which shape? filled or outlined? what drives the colour?

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: origin at the centre of the picture
  vec2 q = p;   // keep the original coordinates for painting
  float d = length(p) - 0.15;   // ② shape: distance to the shape
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);   // ③ edge: distance → light
  vec3 tint = vec3(0.48, 0.83, 0.69);   // ④ paint: where the colour comes from
  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: origin at the centre of the picture
  vec2 q = p;   // keep the original coordinates for painting
  float d = length(p) - 0.15;   // ② shape: distance to the shape
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);   // ③ edge: distance → light
  vec3 tint = vec3(0.48, 0.83, 0.69);   // ④ paint: where the colour comes from
  vec3 color = vec3(0.06, 0.10, 0.14) + tint * ink;
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniform2f(uResolution, …, …)

Look at a picture and ask five questions: ① how is space transformed? ② what is the distance to the shape? ③ how does distance become light and dark? ④ where does the colour come from? ⑤ what moves? Each answer is a line or two of code.

Try it

Change one layer at a time and say what changed in the picture
Open the pixel debugger and show d on the canvas: the shape layer only computes a distance map
Switch space to “repeat”, then change the shape: the two layers don’t affect each other