Task 1 of 6

The Sphere as a Number

A signed distance field describes a shape with one function: for any point in space it returns the distance to the nearest surface — positive outside, negative inside, exactly zero on the skin. A whole sphere collapses into one line: length(p - center) - radius. No vertices, no triangles, just math.

That's a perfect fit for a kernel: one thread per sample point, each evaluating the same tiny function. Here every pixel owns a point on the z = 0 slice through the scene — pixel (ix, iy) maps to world ((ix - 32) / 16, (iy - 32) / 16), so the canvas spans −2…2 and the center pixel sits exactly at the origin.

one function knows the whole sphere: + outside, 0 on the skin, − inside

Goal: make the kernel return the signed distance from this thread's world point to a sphere at (cx, cy) with radius r.

Requirements

Map the thread to world space: (this.thread.x - 32) / 16 (already wired up)
Measure the offset from the sphere center: (wx - cx, wy - cy)
Return its length via Math.sqrt, minus r

Hint 1 — what should the numbers look like?

For the unit sphere at the origin: the center pixel is inside, distance -1. A pixel one unit from the center sits exactly on the surface — distance 0. The far corner at (−2, −2) reads √8 − 1 ≈ 1.83.

Hint 2 — the whole thing

const dx = wx - cx;
const dy = wy - cy;
return Math.sqrt(dx * dx + dy * dy) - r;

Same idea elsewhere

Distance fields are a production technique, not a toy: Valve renders crisp text from SDF textures, and every WebGPU fragment shader that draws rounded rectangles is evaluating exactly this per-pixel field — one invocation per pixel, one signed distance out.

All tasks in Ray-Marched Metaballs

This page is an interactive exercise — the editor, the GPU runner and your saved progress need JavaScript. The text above is the full brief.