01 Fragments and data

One rule paints the whole picture

Drag the radius. Every position runs the same program and gets its own colour.

Circle radius0.30

0.050.48

Edge softness0.040

0.0010.2

ExerciseEdit code0%

Turn the circle into a square — by editing code, not dragging sliders

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float d = length(p);
  float circle = 1.0 - smoothstep(0.300, 0.300 + 0.040, d);
  vec3 gradient = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), vUv.y);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), gradient, circle);
  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);
  float circle = 1.0 - smoothstep(0.300, 0.300 + 0.040, d);
  vec3 gradient = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), vUv.y);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), gradient, circle);
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniform2f(uResolution, …, …)

Vertices set shape and position → fragments compute colour → the picture appears. Same code, different position, different result.

Try it

Make the circle’s edge very blurry
Open “Pixel debugger”, put the pointer on the circle’s edge and read d and circle