12 From picture to recipe

smin: shapes that melt together

min just puts two shapes together; smin fills the seam with a smooth curve, like two drops of water touching.

Gap between circles0.36

0.10.7

k · blend range0.10

0.010.3

Join

ExerciseTune values0%

Join two separate circles with a wide bridge

Runs once per pixelDrag numbers, or edit the code

float smin(float a, float b, float k) {   // a smooth min: blends where a and b are close
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = length(p - vec2(-0.360 / 2.0, 0.0)) - 0.16;
  float b = length(p - vec2(0.360 / 2.0, 0.05)) - 0.11;
  float d = smin(a, b, 0.100);
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);
  float rings = 0.5 + 0.5 * cos(d * 120.0);   // distance rings: see the field smoothed out
  vec3 color = mix(vec3(0.06, 0.10, 0.14) + 0.06 * rings, vec3(0.96, 0.43, 0.30), ink);
  gl_FragColor = vec4(color, 1.0);
}

float smin(float a, float b, float k) {   // a smooth min: blends where a and b are close
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = length(p - vec2(-0.360 / 2.0, 0.0)) - 0.16;
  float b = length(p - vec2(0.360 / 2.0, 0.05)) - 0.11;
  float d = smin(a, b, 0.100);
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);
  float rings = 0.5 + 0.5 * cos(d * 120.0);   // distance rings: see the field smoothed out
  vec3 color = mix(vec3(0.06, 0.10, 0.14) + 0.06 * rings, vec3(0.96, 0.43, 0.30), ink);
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniform2f(uResolution, …, …)

smin(a, b, k) blends a and b wherever they are within k of each other and grows the shape slightly into the seam. A larger k melts over a wider range. Liquids, metaballs and organic shapes all use it.

Try it

Switch the join back to min and compare the seam
Pull the circles apart, then raise k: they connect across the gap
Watch the background rings: smin smooths the distance field itself