An interactive visual guide to common pathfinding algorithms. Place a start and destination, draw a route around obstacles, then watch the chosen algorithm explore the grid.
- Drag S (source) and D (destination) to any open square.
- Choose Wall or Bomb, then click or drag across the grid to place obstacles. Select the same obstacle again to remove it.
- Pick an algorithm, choose a speed from 1× to 10×, and press Play. Speed changes take effect immediately while an animation is running.
- Pause, resume, reset the visualization, or clear every obstacle without moving the source and destination.
- Follow the colour legend to see frontier cells, visited cells, and the final route. After a run, the app reports visited nodes and path length.
- Use it on desktop, tablet, or touch devices—the grid adapts to the available screen space.
| Algorithm | What to expect |
|---|---|
| Breadth-first search (BFS) | Finds the shortest route on this unweighted grid. |
| Depth-first search (DFS) | Explores deeply first; its route may not be the shortest. |
| Dijkstra | Finds the shortest route by expanding the closest known cells first. |
| Bellman–Ford | Shows route relaxation across the grid. |
| A* search | Uses the destination’s distance as a guide to reach it efficiently. |
The grid uses four-directional movement only: up, down, left, and right. Walls and bombs both block traversal.
- Node.js 20 or newer
- npm (included with Node.js)
Open a terminal in this project folder, then run:
npm install
npm run devVite will print a local address, usually http://localhost:5173. Open it in your browser to use the app.
npm run buildThe optimized files are generated in dist/. You can also run npm run lint to type-check the project.