12 From picture to recipe

Edges: one distance, five ways to draw it

Same shape; only the “distance → light” line changes: hard edge, antialiased, outline, glow, contours.

Edge

Width w (outline, glow, contours)0.010

0.0020.04

ExerciseTune values0%

Make this neon glowing outline

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 a = length(p - vec2(-0.1, 0.0)) - 0.2;
  float b = length(p - vec2(0.17, 0.08)) - 0.12;
  float d = min(a, b);   // distance to the two merged circles
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);   // distance → light: only this line changes
  vec3 color = vec3(0.06, 0.10, 0.14) + vec3(0.48, 0.83, 0.69) * ink;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = length(p - vec2(-0.1, 0.0)) - 0.2;
  float b = length(p - vec2(0.17, 0.08)) - 0.12;
  float d = min(a, b);   // distance to the two merged circles
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);   // distance → light: only this line changes
  vec3 color = vec3(0.06, 0.10, 0.14) + vec3(0.48, 0.83, 0.69) * ink;
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniform2f(uResolution, …, …)

d is the distance to the edge. step and smoothstep fill the shape; abs(d) makes both sides of the edge positive, so subtracting w gives an outline; w / abs(d) brightens near the edge, which is glow; cos(d / w) draws contour rings.

Try it

Switch between step and antialiased and compare the edges
Switch to glow and make w larger
Switch to contours: the lines follow the merged shape of both circles