← Back to index

Signed distance field — circle

A signed distance field gives, for every point in space, the distance to the nearest surface — negative inside the shape, positive outside. For a circle this is exactly the same formula as point-distance, with the radius subtracted. The iso-bands visualise the field; the dark line is the surface (d = 0). Move the circle with the mouse.

See also: Distance between two points — the raw ingredient; SDF smooth min — combine SDFs.

Pseudocode

sdfCircle(p, centre, r) = |p - centre| - r

Source

function sdfCircle(px, py, cx, cy, r) {
    const dx = px - cx
    const dy = py - cy
    return Math.sqrt(dx * dx + dy * dy) - r
}