A tangled island shrinks by its own curvature and leaves a topographic map behind.
The red curve moves with velocity equal to its curvature, so tight capes retreat fast and bays bulge outward. Grayson's theorem says any embedded loop, however tangled, becomes convex and then shrinks to a round point, and its area falls at exactly 2 pi per unit time: the plot in the corner is a straight line for every shape, and the curve vanishes right on schedule at A0 / 2 pi. Each step is an implicit cyclic tridiagonal solve followed by arc-length resampling, so even razor-sharp fjord tips stay stable. Every cell the front passes is stamped with the time, and that arrival-time field is drawn as a hillshaded, hypsometrically tinted map with contour lines, a dashed line where the curve first turns convex, and a summit where it disappears.
Try it. Draw any closed curve to flow it (crossings split it into separate embedded islands). Press 1 to 5 for an island, spiral, serpentine, pinwheel or dumbbell, R for the next shape, Space to pause and V to toggle the curvature velocity ticks.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive curve shortening flow toy with JavaScript and the HTML canvas element. 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:
- Make a full-window canvas that stays sharp on high-DPI screens and resizes with the window.
- Let me draw a closed curve by dragging. On release, close the curve and resample it to about 300 points spaced evenly along its length.
- Each frame, move every point toward the average of its two neighbors: x_i += k * (x_(i-1) - 2 x_i + x_(i+1)). That is the curvature vector, so the curve moves with velocity equal to its curvature. Then resample to equal arc length again so points never bunch up.
- Keep k small (about 0.2) so this explicit step stays stable, and run several steps per frame.
- Draw the curve as a bold line, and every half second stamp a faint copy of it onto a second canvas so the history builds up like contour lines.
Once that works, make it beautiful:
- Swap the explicit step for an implicit one: solve (I - dt/h^2 D) x_new = x_old, where D is the cyclic second-difference matrix. A tridiagonal solver with a small correction for the wrap-around corner entries makes huge time steps stable.
- Compute the enclosed area with the shoelace formula and plot it against time. It should fall in a straight line with slope -2 pi for any embedded curve, which is a lovely check that your solver is right.
- Fill the region the curve still encloses with a color that depends on time, so the history becomes a tinted topographic map with a summit where the curve vanishes.
- Draw short ticks along the curve showing the velocity, one color where it moves inward and another where it bulges out.
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 splitting self-crossing scribbles into separate loops, hillshading the arrival-time map, or comparing with flows that are not area-preserving like affine curve shortening.
