Dijkstra, A*, bidirectional search and contraction hierarchies race on a printed atlas.
A countryside of about nine thousand road junctions is generated from noise: hillshaded relief with contour lines, lakes with ripple shorelines, a river with a handful of bridges, woods, towns, and highways and main roads routed between the towns by A* over the terrain. Four panels search the same map for the fastest route, each settled node bleeding into the paper as a watercolor wash with pooled edges and drying rings. Dijkstra grows a ball of equal travel time, A* leans toward the goal using a lower bound on the time left, and bidirectional Dijkstra grows two smaller balls that meet. The contraction hierarchy is built while the map prints (nodes contracted least important first, with witness searches deciding which shortcuts to add), so its query only climbs upward from both ends, settles a few dozen nodes where Dijkstra settles thousands, and unpacks its shortcuts recursively into the red route.
Try it. Drag the start or destination pin in any panel and all four routes update live, then race again when you let go. Click the map to move the destination (shift-click or right-click for the start). Press H to switch the A* heuristic between straight line, landmarks (ALT) and an inadmissible x2.5 straight line that can return a longer route, Space to rerun the race, S to swap the pins and N for a new map.
Contraction hierarchies with witness search and shortcut unpacking
A* with landmark (ALT) and straight-line heuristics
Bidirectional Dijkstra
Procedural cartography with marching-squares contours
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a route planner that races shortest-path algorithms on a generated map, with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step.
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 cream paper color.
- Build a road network: a grid of nodes about 10 pixels apart, each nudged by a small random offset, joined to their right and lower neighbors. Drop about 20% of the links so the roads look rural.
- Pick a few random nodes as towns and connect them with fast highways (find a path along the grid and mark those links as highways). Each link's weight is its length divided by its speed.
- Draw back roads as thin gray lines and highways as thick orange lines with a dark outline.
- Implement Dijkstra's algorithm with a binary heap, from a start pin to a goal pin. Record the order in which nodes are settled.
- Animate the search by revealing a few more settled nodes every frame as soft translucent blue dots, then draw the final route as a thick red line.
Once that works, make it beautiful:
- Add A* with a straight-line heuristic (distance divided by the highway speed, so it never overestimates), and show both searches side by side on two copies of the map, advancing at the same rate.
- Display how many nodes each one settled.
- Make the frontier look like watercolor: paint the settled nodes into a low-resolution offscreen canvas with soft circles, and draw it over the map with globalCompositeOperation set to multiply.
- Let me drag the start and goal pins and rerun the race on release.
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 bidirectional Dijkstra, landmark (ALT) heuristics, or a contraction hierarchy that answers queries by settling only a few dozen nodes.
