One procedural planet morphing through a dozen map projections, Tissot ellipses and all.
Gauss's Theorema Egregium says a sphere cannot be flattened without stretching, so every world map picks what to distort. A planet is baked once into a cube map from domain-warped noise, tinted like an old atlas with hill shading, an inked coast and water lining. Each projection is a forward formula applied to a 5 degree mesh in its own frame, and morphs blend two meshes while a small software rasterizer with a z-buffer fills every triangle by reading the cube map per pixel, so a globe can open into a flat map and Goode's map can tear along its lobes. Red Tissot indicatrices, equal circles on the globe, show the distortion, and beside the cartouche the worst area and angle error are read from the singular values of the projection's Jacobian at their centers. The finale deflates the globe onto an icosahedron and unfolds Fuller's Dymaxion net, with the icosahedron first rotated by random search so its cuts fall in the sea.
Try it. Drag to turn the planet under the projection and see oblique aspects. Click, tap the cartouche or use the arrow keys to move to the next projection. T toggles Tissot ellipses, G the graticule, Space pauses the tour and R resets the aspect.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animated world map that morphs between map projections, 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 resizes with the window. Paint it a warm parchment color.
- Write a small 3D Perlin noise function yourself. Invent a planet: a point on the unit sphere is land when a few octaves of noise at that point are above a threshold, so continents never have a seam.
- Write forward projections as functions from longitude and latitude to x and y: equirectangular, Mercator, sinusoidal and Mollweide (solve 2t + sin 2t = pi sin(latitude) with a few Newton steps). Scale each one to fit the same box.
- Sample the sphere on a grid of about 2 degrees, project every land sample with the current projection and draw it as a small filled square, so the continents appear.
- Draw meridians and parallels every 30 degrees as polylines through the same projection.
- Morph: every few seconds pick the next projection and, over two seconds, draw each point at a smoothly eased blend of its position under the old and new projections.
Once that works, make it beautiful:
- Add Tissot indicatrices: small circles of equal radius on the globe, projected point by point and filled in translucent red, so you can see which maps keep shapes and which keep areas.
- Give the map an antique atlas style: an inked outline, pale teal sea, ochre land, a serif cartouche with the projection's name, and a double border.
- Let dragging change the central meridian so the continents slide through the projection.
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 filling pixels by inverse projection for a smooth raster map, adding interrupted projections like Goode homolosine, or unfolding the globe onto an icosahedron like Fuller's Dymaxion map.
