Watch the classic isosurface algorithm march cell by cell, then zoom out to clay.
Four metaballs define a field f, sampled on a grid, and the surface f = 1 passes between the samples. The march visits one cube at a time: its 8 corners are inside or outside, those bits make a case number from 0 to 255, and a lookup table says which of the 12 edges the surface crosses and how to join the crossings into triangles, each crossing slid along its edge by linear interpolation. The table is generated in code rather than typed in: on every face the crossed edges are joined (cutting inside corners off separately on the ambiguous faces, so neighbouring cubes agree and the mesh is watertight), the segments link into loops, and each loop is turned to face away from the inside corners and fanned into triangles; trying all 24 cube rotations sorts the 256 cases into the 15 classes. The diagram card shows the current cube's numbered corners, its bits, its case and its class. Then the view zooms out to a 30-cubed grid re-extracted every frame and rasterized with a z-buffer and a clay matcap, lit by the field's analytic gradient.
Try it. Drag a blue + to move a blob and watch the surface follow, and drag elsewhere to turn the view. Pause, step to the next surface cell with Next cell (or the right arrow, and back with the left arrow), make the grid Coarser or Finer, and switch between the diagram and the Clay view (C). Space plays and pauses. Left alone, it marches a grid, zooms out to clay, then starts again at another resolution.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a marching cubes demo with JavaScript and the HTML canvas element: blobby metaballs turned into a triangle mesh, with the algorithm's progress shown cell by cell. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Define a field from three metaballs moving slowly inside a unit box: f(p) = sum of r^2 / |p - c|^2. The surface is where f = 1.
- Sample f on a 16 x 16 x 16 grid of cubes. For each cube, number its corners 0 to 7 and build an 8-bit case number with bit i set when corner i is inside (f > 1).
- Build the triangle table in code instead of pasting one: for each of the 256 cases, on every face of the cube join the edges whose two ends differ (when two inside corners sit diagonally, cut each inside corner off on its own), link those segments into closed loops through the shared edges, and fan each loop into triangles.
- For each triangle corner, place the point on its edge by linear interpolation of the two corner values.
- Rotate the box slowly, project in perspective, sort triangles back to front and shade each by its normal against a light. Draw the box outline too.
Once that works, make it beautiful:
- Animate the march: reveal cells one at a time in scan order, pausing on cells the surface passes through, and highlight the current cube with its corners drawn filled (inside) or hollow (outside).
- Show a side panel with the current cube's corner numbers, its bits and its case number.
- Use a warm paper background with a faint grid and ink-colored lines, then add a button that zooms out to a finer grid with smooth shading from the field's gradient.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as dragging the blobs, grouping the 256 cases into the 15 classes by rotation, or a z-buffer rasterizer for smooth clay shading.
