An Algebra of Shapes

Level 1 ended with a heresy: a shape is its distance function. Here is why that matters. Functions return numbers, and numbers have arithmetic — so if shapes are functions, shapes have arithmetic too. This level builds that algebra: three boolean operations that cost one comparison each, a blend that melts geometry like wax, and a family of tricks that conjure infinite copies for free.

min, max, and the algebra of solids

Suppose shape A has field $a(p)$ and shape B has field $b(p)$, both signed the usual way: negative inside. What is the field of A-or-B— the union? Stand at any point: you are as close to the union as you are to whichever shape is nearer. And if either field says “inside” (negative), you are inside the union. Both facts at once:

Intersection is the mirror image: you must be inside both, so the larger (least inside) value rules. Subtraction is intersection with the complementof A — and negating a signed distance field flips inside and outside, so A's complement is simply $-a$. Three set operations from two comparisons and a minus sign:

One honest footnote, because this site promised honesty: min gives the true distance everywhere outside the union exact, but inside an overlap it can report a distance to a boundary that no longer exists (it got swallowed by the other shape). Intersection and subtraction inherit the same caveat bound. The values are never too large in magnitude — they remain safe bounds — which, as Level 3 will show, is the only property the renderer actually needs.

The smooth minimum — where it starts to feel alive

min has a personality flaw: it is decisive. At every point one shape wins outright, so where the winners change, the combined surface keeps a hard crease. But nothing forces us to be decisive. Near the crossover — wherever $a$ and $b$ are within $k$ of each other — we can let the two fields negotiate:

That is the library's opSmoothUnion bound, written exactly as it ships (mix(b, a, h) is the linear blend $b\,(1-h) + a\,h$). Far from the crossover, $h$ clamps to 0 or 1 and you get plain min back. Near it, the blend term $-k\,h\,(1-h)$ bulges the field outward, and the crease becomes a fillet. Drag the slider slowly:

This one slider is the gateway to generative art, character modeling, and every “blobby” aesthetic you have seen in demoscene work. Two formulas plus $k$ equals an organism. It is also our first deliberate trade: smoothness for exactness — the Go deeper below has the fine print.

Domain tricks: transform space, not the shape

Every operation so far acted on the fields' outputs. The other half of the algebra acts on the input — the point $p$itself — before the field ever sees it. Want the shape somewhere else? Don't move the shape; ask about a moved point. Each trick below is one line applied to $p$:

• Repetition: q = mod(p + 0.5*c, c) - 0.5*c folds all of space into one cell of size $c$ — the motif repeats forever, for the price of one mod. exact while the shape fits in its cell.
• Symmetry: q = vec2(abs(q.x), q.y) folds the left half-plane onto the right — instant mirror image.
• Rotation: q = rot2(angle) * q rotates space backwards, so the shape appears rotated forwards. Distances survive untouched — rotation is rigid.
• Scaling: d = f(p / s) * s. Shrinking space makes the shape bigger, but it also shrinks the field's values — the trailing * s restores honest distances. Forget it and you break the Lipschitz promise from Level 1.

Internalize the inversion, because it is the deepest habit of field-thinking: the shape never moves; space is folded, mirrored, and tiled around it. An infinite forest costs the same as one tree.

The mini-studio: your first payoff

You now hold every tool a 2D generative artist needs: a library of exact shapes, a melt knob, and infinite repetition. The studio below composes five random library shapes with opSmoothUnion, optionally tiles them, and lets you export the result — at double resolution, straight from the shader that drew it.

The field as an oracle

One more gift before the deep dive panels — and it costs nothing you don't already own. Ask the field its value at any point inside a shape. That number is not just a distance: it is the radius of the largest circle that fits there, guaranteed by Level 1's no-surface-within-this-distance promise. Which means the classic generative-art problem of packing shapes snugly — usually solved with collision tests and rejection loops — collapses into a three-step chant: ask the field, place the circle, min it in.

Two things worth savoring here. First, the algorithm above runs in plain JavaScript on the CPU — no shader computes it, only draws it. Distance fields are mathematics, not GPU technology; plotter artists drive pen-and-paper robots with these same formulas. (This framing — and the packing trick itself — is a staple of the creative-coding world; Piter Pasma's Genuary tutorial is a lovely shader-free introduction.) Second, file away the shape of the move — the field tells you how big a step is safe, you take exactly that step, then ask again. Next level, that exact move, aimed along a ray instead of around a circle, becomes a 3D renderer.