Isomap and LLE unroll a paper Swiss roll, and tear it when k is too large.
A printed sheet of 784 points is rolled into a Swiss roll, bent into an S-curve or crumpled, and the methods see only the 3D positions. Isomap links each point to its k nearest neighbors, measures geodesic distance along that graph with Dijkstra from 48 farthest-point landmarks, and solves landmark MDS; LLE fits each point as an affine blend of its neighbors and finds the bottom eigenvectors of (I - W)^T(I - W) with a Cholesky factorization and inverse subspace iteration, spread over frames. The answer, aligned by Procrustes, drives the mesh: vertices peel off in order and settle flat on the table. The dark path is the shortest route between two pins along the kNN graph; raise k and red edges short-circuit between layers, the path cheats through them, and the sheet tears into a loop.
Try it. Drag to orbit, click the paper to move the pins A and B, and use the chips to switch Isomap and LLE, change k, pick a shape, unroll or roll up, and toggle the kNN graph. Keys: Space unrolls, M switches method, 1 to 3 pick a shape, + and - change k, G toggles the graph.
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 Isomap demo that unrolls a Swiss roll, 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 canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and has a warm off-white background.
- Generate about 600 points on a Swiss roll: pick t in [1.5 pi, 4.5 pi] and h in [0, 1], and place the point at (t cos t, h * 10, t sin t). Color each point by t with a smooth gradient so you can see the true layout.
- Write a tiny 3D projection: rotate around the vertical axis by a yaw angle, tilt by a pitch angle, apply perspective, and sort points by depth before drawing them as small circles. Drag the mouse to rotate.
- Build the k-nearest-neighbor graph (k = 8) by brute force, then run Dijkstra from every point (or from 50 landmarks) to get geodesic distances along the graph.
- Run classical MDS on those distances: double-center the squared distance matrix and find its top two eigenvectors with power iteration. That gives each point 2D coordinates.
- Press a key to animate every point from its 3D position to its 2D position laid flat, so the roll visibly unrolls.
Once that works, make it beautiful:
- Sample the points on a grid in (t, h) and draw the sheet as shaded quads with simple Lambert lighting, so it looks like paper.
- Draw the shortest path between two points along the graph next to the straight chord through space.
- Add a k slider and highlight graph edges that jump between layers of the roll, then watch the unrolled sheet tear.
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 adding Locally Linear Embedding for comparison, a soft shadow on the floor, or an S-curve and a crumpled sheet as other datasets.
