Taking min(a, b) over two SDFs gives a hard-edged union. Replacing min with a smooth min rounds the join, so shapes blob together — this is how SDF-based "metaball" rendering works. The slider controls the smoothing radius k; k = 0 is just plain min. The second circle follows the mouse.
See also: SDF of a circle — the operands; SDF of a box.
// Polynomial smooth min
function smin(a, b, k):
h = clamp(0.5 + 0.5 * (b - a) / k, 0, 1)
return lerp(b, a, h) - k * h * (1 - h)
function smin(a, b, k) {
if (k <= 0) return Math.min(a, b)
const h = Math.max(0, Math.min(1, 0.5 + 0.5 * (b - a) / k))
return b * (1 - h) + a * h - k * h * (1 - h)
}
const d1 = sdfCircle(x, y, cx1, cy1, r1)
const d2 = sdfCircle(x, y, cx2, cy2, r2)
const d = smin(d1, d2, k)