An animated A* pathfinding visualization on a square grid. Click/drag to paint walls, and the search replays automatically: open set in blue, closed set in dim teal, final path in bright teal. Built to internalize how the heuristic shapes the frontier — try walling off the direct route and watch the frontier bloom.
Reuse
src/astar.js exports a plain astar(grid, start, goal) returning
{ path, visitedOrder } — the visitedOrder array is what makes it animatable;
step through it on any renderer. No dependencies, grid is a 2D array of 0/1.
Gotchas
- Heuristic is Manhattan distance; swap in octile distance if you allow diagonals (the neighbor function is the only other change needed).
visitedOrderincludes the goal node; the demo replays at a fixed 300 nodes/sec regardless of grid size.- The demo bundles its own copy of
astar.js(self-contained by contract); re-copy after editingsrc/.