02 Drawing shapes with math

fwidth: edges sharp at any zoom

The left half uses a fixed width, the right half fwidth. Zoom the coordinates and compare.

Fixed widthfwidth

Coordinate zoom6.00

160

Fixed width (left)0.010

0.0010.1

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  p *= 6.000;                        // zoom the coordinates -> denser pattern
  float d = length(fract(p) - 0.5) - 0.3;     // SDF of one circle per cell
  float fixedMask = 1.0 - smoothstep(0.0, 0.010, d);
  float w = fwidth(d);                    // how much d changes between neighbouring pixels
  float smartMask = 1.0 - smoothstep(-w, w, d);
  float mask = vUv.x < 0.5 ? fixedMask : smartMask;
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), mask);
  if (abs(vUv.x - 0.5) < 0.002) color = vec3(1.0);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  p *= 6.000;                        // zoom the coordinates -> denser pattern
  float d = length(fract(p) - 0.5) - 0.3;     // SDF of one circle per cell
  float fixedMask = 1.0 - smoothstep(0.0, 0.010, d);
  float w = fwidth(d);                    // how much d changes between neighbouring pixels
  float smartMask = 1.0 - smoothstep(-w, w, d);
  float mask = vUv.x < 0.5 ? fixedMask : smartMask;
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), mask);
  if (abs(vUv.x - 0.5) < 0.002) color = vec3(1.0);
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniform2f(uResolution, …, …)

fwidth(d) is how much d changes between neighbouring pixels; as the smoothstep width it keeps edges one pixel soft at any zoom.

Try it

Zoom to 40 and compare the halves
Widen the fixed width on the left: far away gets blurry; narrow it: close up gets jaggy