Signed Distance

Wait — what am I looking at?

The scene above is not a photo, not a video file, not a 3D model. No artist sculpted it, and no game engine is drawing it. It is one short formula, asked the same simple question at every pixel of your screen — how far away is the nearest surface? — sixty times a second. The melting, the shadows, the reflections of light: all of it falls out of that one question, asked with increasing ambition.

That sounds like a magic trick. It is — and unlike most magic tricks, this one gets betterwhen you learn how it's done. Three reasons it's worth your time:

• It hides in plain sight. The same idea draws the razor-sharp text on your phone at any zoom, the clouds and soft shadows in modern games, effects in film, the insides of 3D printers — and entire animated worlds that fit in a file smaller than an email. Once you see it, you will spot it everywhere.
• You make things almost immediately.This is not a course where the payoff waits at the end. You'll bend your first shape minutes into Level 1, export your own generative artwork in Level 2, and by Level 4 you'll have built — piece by piece, understanding every piece — the very scene at the top of this page.
• It's the friendliest real door into computer graphics.Graphics usually greets newcomers with a wall: engines to install, linear algebra to survive. This door needs school math and the browser you're already in. Every idea is a picture first and a formula second — and every picture is interactive, with its code one click away, editable on the spot.

And if you simply like beautiful machinery: this is one of the rare corners of computing where something photographic emerges from arithmetic a teenager can check by hand. That feeling is the site's real subject.

The five levels

A ladder from one measurement to infinite worlds — each level ends with something in your hands. The prerequisites are honest, so start where you actually are.

1. 1 · The Distance Picture●○○

   One number per point: how far to the nearest surface, negative inside. A shape becomes a formula you can read.

   You leave with: You can read any distance picture — and you've edited your first shape-as-formula, live.

   Prerequisites: Coordinates — nothing more.

2. 2 · An Algebra of Shapes●○○

   min is union, max is intersection — and a smooth minimum melts shapes together. Then: transform space itself.

   You leave with: Your first piece of generative art, exported as a PNG you made from five formulas and a melt slider.

   Prerequisites: Level 1.

3. 3 · The March Into 3D●●○

   A ray walks toward the surface in leaps the field itself guarantees are safe. Watch it step — then watch it render.

   You leave with: The one trick that turns formulas into 3D images — watched step by step, then run for every pixel.

   Prerequisites: Levels 1–2. Vectors introduced in-page.

4. 4 · Light, Shadow, and a Camera●●○

   Assemble a real renderer one toggle at a time: normals, light, shadows that miss by a little, and a camera you steer.

   You leave with: A complete renderer you assembled yourself — the very one drawing this page's front door.

   Prerequisites: Level 3.

5. 5 · Infinite Worlds From Formulas●●●

   Fractals with distance estimators, 4-kilobyte demoscene worlds, SDF fonts, neural fields — and a studio that is yours.

   You leave with: Infinite worlds at your fingertips, the hero scene as your personal studio — and you'll spot this idea everywhere.

   Prerequisites: Level 4 for full value — skimmable by anyone.

What is this site?

A museum exhibit crossed with an interactive textbook crossed with a playground, about one deceptively simple idea: describing shapes by distanceinstead of by points, polygons, or pixels. The idea has a technical name — the signed distance function — but the site's whole job is to make it feel obvious, one level at a time.

The promise: no graphics libraries, no hidden machinery; every pixel you see comes from formulas you will read. Every picture here is drawn live by a small program you can open, read — and on the centerpieces, edit and re-run while it plays. Break the formulas, bend them, make them yours; the site is built to survive your curiosity.

• Works at every depth.The main path needs nothing beyond coordinates; expandable “Go deeper” panels (rated ★–★★★) carry the rigorous version for those who want it. A curious 15-year-old and a graphics engineer should both leave satisfied.
• Never lies to you. When a formula is an approximation, the page says so, says what it approximates, and says why it still looks right. The math on screen is checked, numerically, against the code that draws the pictures.
• Demonstrates itself. The renderer you assemble in Level 4 is the renderer drawing the scene at the top of this page — and Level 5 ends by handing you its controls.

Entry requirement: coordinates and what a graph is. Vectors are introduced gently when 3D arrives. Nothing to install, nothing to sign up for.