Shortest Path Visualizer 🗺️

An interactive web-based visualizer for shortest path algorithms including Dijkstra's Algorithm, A* Search, and Breadth-First Search (BFS). This project provides an intuitive way to understand how different pathfinding algorithms work through real-time visualization.

🚀 Live Demo

View Live Demo

✨ Features

• Multiple Algorithms: Dijkstra's Algorithm, A* Search, and Breadth-First Search
• Interactive Grid: Click and drag to create walls and obstacles
• Real-time Visualization: Watch algorithms explore the grid step by step
• Customizable Speed: Adjust visualization speed from slow to instant
• Responsive Design: Works seamlessly on desktop and mobile devices
• Algorithm Comparison: See how different algorithms perform on the same maze
• Maze Generation: Built-in random maze generator
• Statistics: View algorithm performance metrics

🎮 How to Use

1. Set Start and End Points: Click on the grid to place your start (green) and end (red) points
2. Add Walls: Click and drag to create walls (black squares) that block the path
3. Choose Algorithm: Select from Dijkstra's, A*, or BFS in the control panel
4. Adjust Speed: Use the speed slider to control visualization speed
5. Start Visualization: Click "Start" to watch the algorithm find the shortest path
6. Clear Grid: Reset the grid to try different configurations

🛠️ Algorithms Implemented

Dijkstra's Algorithm

• Guarantees: Shortest path
• Time Complexity: O((V + E) log V)
• Best For: Weighted graphs, guaranteed shortest path

A* Search

• Guarantees: Shortest path (with admissible heuristic)
• Time Complexity: O(b^d) where b is branching factor, d is depth
• Best For: Goal-directed search, faster than Dijkstra's

Breadth-First Search (BFS)

• Guarantees: Shortest path in unweighted graphs
• Time Complexity: O(V + E)
• Best For: Unweighted graphs, simple implementation

🎨 Color Legend

• 🟢 Green: Start node
• 🔴 Red: End node
• ⚫ Black: Wall/Obstacle
• 🟡 Yellow: Visited nodes
• 🔵 Blue: Current frontier
• 🟣 Purple: Shortest path

📁 Project Structure

shortest-path-visualizer/
├── index.html              # Main HTML file
├── css/
│   └── style.css           # Styling and animations
├── js/
│   ├── main.js             # Main application logic
│   ├── algorithms/
│   │   ├── dijkstra.js     # Dijkstra's algorithm
│   │   ├── astar.js        # A* search algorithm
│   │   └── bfs.js          # Breadth-first search
│   ├── grid.js             # Grid management
│   └── visualizer.js       # Visualization controller
├── assets/
│   └── images/             # Screenshots and icons
└── README.md               # This file

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• No additional dependencies required!

Installation

1. Clone the repository:

git clone https://github.com/yourusername/shortest-path-visualizer.git

2. Navigate to the project directory:

cd shortest-path-visualizer

3. Open index.html in your web browser or serve it using a local server:

# Using Python 3
python -m http.server 8000

# Using Node.js
npx serve .

4. Open your browser and navigate to http://localhost:8000

🔧 Configuration

You can customize the visualizer by modifying the following parameters in js/main.js:

const CONFIG = {
    gridWidth: 50,          // Number of columns
    gridHeight: 25,         // Number of rows
    animationSpeed: 50,     // Default animation speed (ms)
    wallProbability: 0.3    // Probability for random maze generation
};

📊 Performance Metrics

The visualizer tracks and displays:

• Nodes Visited: Total number of nodes explored
• Path Length: Length of the shortest path found
• Execution Time: Time taken to find the path
• Algorithm Efficiency: Comparison between different algorithms

🎯 Educational Value

This project is perfect for:

• Computer Science Students: Understanding pathfinding algorithms
• Algorithm Enthusiasts: Visualizing algorithm behavior
• Interview Preparation: Common technical interview topic
• Teaching: Demonstrating algorithm concepts

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Areas for Contribution

• Add new algorithms (Bellman-Ford, Floyd-Warshall)
• Implement weighted edges
• Add more maze generation patterns
• Improve mobile responsiveness
• Add algorithm explanations and tutorials

📝 TODO

• Add Bellman-Ford algorithm
• Implement weighted edges
• Add more maze generation algorithms
• Include algorithm complexity analysis
• Add step-by-step tutorial mode
• Implement save/load functionality for grid states
• Add keyboard shortcuts
• Include algorithm comparison charts

🐛 Known Issues

• Large grids may cause performance issues on older devices
• Mobile touch interactions need refinement
• Some edge cases in maze generation

📱 Browser Compatibility

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by pathfinding visualizers across the web
• Thanks to the computer science community for algorithm resources
• Special thanks to contributors and users providing feedback

📧 Contact

• GitHub: @vinayreddy765
• Email: vinayreddy7628@gmail.com

---

⭐ Star this repository if you found it helpful! ⭐