An interactive web application that visualizes popular pathfinding algorithms in real-time. Watch how different algorithms explore a grid to find the shortest path between two points.
- Interactive Grid: Click and drag to create walls, move start/end points
- Multiple Algorithms: Compare different pathfinding strategies
- Real-time Visualization: See algorithms in action step-by-step
- Maze Generation: Generate random mazes to test algorithms
- Responsive Design: Works on desktop and mobile devices
- Algorithm Statistics: View performance metrics after each run
- Breadth-First Search (BFS) - Guarantees shortest path (unweighted)
- Depth-First Search (DFS) - Does not guarantee shortest path
- Dijkstra's Algorithm - Guarantees shortest path (weighted)
- A Algorithm* - Optimal with heuristic function
- Binary Tree - Simple maze generation
- Randomized Prim's - Creates more organic mazes
- Recursive Division - Divides space recursively
- Frontend Framework: React 18 with TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- UI Components: Custom components with Radix UI primitives
- Icons: Lucide React
- State Management: React Context API
- Animation: Custom animation engine with requestAnimationFrame
- Set Start & End Points: Drag the 🎯 (start) and 🏁 (end) nodes
- Draw Walls: Click and drag on empty cells to create walls 🧱
- Select Algorithm: Choose from BFS, DFS, Dijkstra, or A*
- Adjust Speed: Set visualization speed (slow/medium/fast)
- Run Algorithm: Click "Run" to start the visualization
- Generate Maze: Use maze generators for complex layouts
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/kartikkapri/PF-Visualization.git
cd PF-Visualization- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run build- Click & Drag: Draw walls on the grid
- Drag Nodes: Move start (🎯) and end (🏁) points
- Run Button: Start algorithm visualization
- Reset Button: Clear the grid and reset
- Clear Walls: Remove all walls from grid
- Clear Path: Remove the found path only
| Algorithm | Guarantees Shortest Path | Time Complexity | Space Complexity |
|---|---|---|---|
| BFS | ✅ (unweighted) | O(V + E) | O(V) |
| DFS | ❌ | O(V + E) | O(V) |
| Dijkstra | ✅ (weighted) | O(V²) | O(V) |
| A* | ✅ (with admissible h) | O(b^d) | O(b^d) |
- 🎯 Start Node - Algorithm starting point
- 🏁 End Node - Target destination
- 🧱 Wall - Impassable obstacle
- 🟦 Visited - Explored by algorithm
- ✨ Path - Shortest path found
- ⬜ Empty - Unvisited cell
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
Made by Kartik Kapri
⭐ Star this repository if you found it helpful!