Pathfinding Algorithm Visualizer

An interactive website to visualize popular pathfinding algorithms in real time. Analyse how BFS, DFS, Dijkstra's, and A* algorithms explore a grid to find the shortest path between two points.

---

Main Interface

Algorithm Visualization

---

✦ Key Features

• 4 Classic Algorithms: BFS, DFS, Dijkstra's, and A* Search
• Real-time Visualization: Watch algorithms explore the grid step-by-step
• Interactive Grid: Click to set start/end points, drag to draw barriers
• Adjustable Speed: Control visualization speed from slow to instant
• Multiple Grid Sizes: Choose from 20×20 up to 35×35 grids
• Random Maze Generation: Generate random obstacles for testing
• Performance Metrics: Track nodes visited, path length, and execution time
• Responsive Design: Works on desktop, tablet, and mobile devices

---

✦ Technologies Used

Technology	Purpose
HTML5	Structure and semantic markup
CSS3	Styling, animations, and responsive design
JavaScript (ES6+)	Algorithm implementation and DOM manipulation

---

✦ File Structure

pathfinding-visualizer/
│
├── index.html          # Main HTML structure
├── style.css           # All styling and animations
├── script.js           # Algorithm implementations and app logic
└── README.md           # Project documentation (this file)

---

✦ Installation & Setup

∘ Method 1: Download and Run Locally

1. Clone the repository

   git clone https://github.com/swechchhapatel/pathfinding-visualizer.git
   cd pathfinding-visualizer

2. Open in browser

   • Simply double-click index.html
   • Or right-click → "Open with" → Choose your browser

3. Start visualizing!

∘ Method 2: Use with Live Server (Recommended for Development)

1. Install Live Server (VS Code extension or npm package)

   npm install -g live-server

2. Navigate to project folder

   cd pathfinding-visualizer

3. Start the server

   live-server

4. Open in browser

   • Automatically opens at http://localhost:8080
   • Auto-refreshes on file changes

---

✦ Algorithm Implementations

1. Breadth-First Search (BFS)

• Explores nodes level by level
• Guarantees shortest path in unweighted graphs
• Uses a queue data structure
• Time Complexity: O(V + E)

2. Depth-First Search (DFS)

• Explores as far as possible along each branch
• Does NOT guarantee shortest path
• Uses a stack data structure
• Time Complexity: O(V + E)

3. Dijkstra's Algorithm

• Always picks the node with smallest distance
• Guarantees shortest path (works with weighted graphs)
• Uses a priority queue approach
• Time Complexity: O(V²) or O(E log V) with heap

4. A* Search Algorithm

• Uses heuristic (Manhattan distance) to guide search
• Guarantees shortest path with admissible heuristic
• More efficient than Dijkstra for goal-directed search
• Time Complexity: O(E) in best case, O(V²) in worst case

---

✦ Algorithm Comparison

Algorithm	Shortest Path	Speed	Memory	Use Case
BFS	Yes	Medium	High	Unweighted graphs
DFS	No	Fast	Low	Graph traversal, not pathfinding
Dijkstra	Yes	Slow	Medium	Weighted graphs, no heuristic
A*	Yes	Fast	Medium	Goal-directed search, best overall

---

✦ Future Enhancements

• Add more algorithms
• Implement weighted graphs (different terrain costs)
• Add algorithm complexity visualization
• Implement step-by-step mode (pause/play)

---

✦ Contribution

Contributions are welcome and appreciated!

If you'd like to improve this project, please follow these steps:

1. Fork the repository
2. Create a new branch

   git checkout -b feature/your-feature-name

3. Make changes and commit

   git commit -m "Add: your message"

4. Push to your branch and open a Pull Request

---

Made with ❤️