SmartPath Visualizer 🚀

🌍 Live Demo: Click here to try it

---

A modern, interactive web application for visualizing graph pathfinding algorithms. This tool allows users to see how different algorithms explore a grid to find the shortest path between two points in real-time.

🧭 How to Navigate

You can quickly switch between algorithms using the Navigation Bar at the top of the application. There is no central dashboard—the app starts directly with Dijkstra's algorithm for an immediate pathfinding experience.

---

📸 Visuals

Algorithm Gallery

Dijkstra	Bellman-Ford	Floyd-Warshall

---

✨ Features

• Interactive Grid: Place start and end points, draw walls, and add weighted nodes.
• Multiple Algorithms:
  • Dijkstra's Algorithm: The gold standard for shortest paths (no negative weights).
  • Bellman-Ford: Handles negative weights and detects negative cycles.
  • Floyd-Warshall: All-pairs shortest path calculation with step-by-step visualization.
• Real-time Visualization: Watch the algorithm explore nodes and backtrack to find the optimal path.
• Premium UI: Sleek, modern design with smooth animations and responsive controls.

---

📊 Algorithm Comparison

Algorithm	Type	Time Complexity	Handles Negative Weights
Dijkstra	Greedy	O(V²) / O(E log V)	❌ No
Bellman-Ford	Dynamic Programming	O(VE)	✅ Yes
Floyd-Warshall	Dynamic Programming	O(V³)	✅ Yes

---

🛠️ Technology Stack

• Core: HTML5, Vanilla JavaScript (ES6+)
• Styling: Vanilla CSS3 with custom animations
• Icons: Custom image assets for walls and weights

---

📂 Project Structure

SmartPath-Visualizer/
│── Algorithms/
│── imgs/
│── tables/
│── index.html
│── bellman.html
│── floyd-warshall.html
│── table.css
│── README.md

🚀 Getting Started

Prerequisites

You only need a modern web browser.

Running Locally

1. Clone the repository:

   git clone https://github.com/your-username/SmartPath-Visualizer.git

2. Navigate to the project directory:

   cd SmartPath-Visualizer

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

   # If you have Node.js installed
   npx serve .

🎮 How to Use

Discover the shortest path in 3 easy steps:

1. Configure the Grid: Use your mouse to draw walls. No path can pass through these obstacles.
2. Add Complexity: Hold the 'W' key and drag to place weights. These represent "rough terrain" that algorithms will try to avoid if a shorter path exists.
3. Visualize: Select your preferred algorithm from the top navigation and hit "RUN ALGORITHM".

⌨️ Keybindings Reference

Key	Action
Left Click	Place/Remove Walls
"W" (Hold)	Place Weighted Nodes (Cost +1)
"X"	Stop placing weights / Return to wall mode
Clear Board	Reset the entire grid to its original state

🧠 Algorithms Deep Dive

🟦 Dijkstra's Algorithm

• Best for: Single-source shortest path on non-negative graphs.
• How it works: It maintains a set of unvisited nodes and calculates tentative distances. It always picks the "closest" node next.

🟩 Bellman-Ford Algorithm

• Best for: Graphs where edges might have negative values.
• How it works: It relaxes all edges multiple times. It's slower than Dijkstra but more versatile.

🟪 Floyd-Warshall Algorithm

• Best for: Calculating the shortest path between every possible pair of nodes.
• Visualization: In this app, we visualize the dynamic programming steps as it considers each node as an intermediate bridge.

---

Developed with ❤️ by Rishabh