Path-Finding-Visualizer

Hello Everyone !!
Welcome to my Path-Finder-Visualizer where I have tried implementing various algorithms using Html canvas and vanilla javascript.

The Project is hosted at Path-finding-Visualizer

Tech Used

• HTML5
• HTML Canvas
• CSS3
• Bootstrap
• Vanilla Javascript

Website Demo

Green Color The Start Node

Red Color The Finish/End Node

Purple Color The Wall Node/obstacle

Golden Color The Nodes that are currently being visited

Dark Green Color The Final Path

Algorithm

Here resides various algorithms that can be visualized.
Algorithms implemented currently

• Dijkstra
• Breadth-First-Search
• Depth-First-Search
• A* (Euclid heuristic)
• A* (Manhatan heuristic)
• Bidirectional Dijkstra

Mazes

Certain Techniques to create Mazes.

• Simple
• Recursive division
• Recursive division (Horizontal - Vertical)

Reset

Basically clears the canvas so that we can create new Nodes and walls.

Gap

The + is used to increase the cell width which makes the canvas more bigger.

The - is used to decrease the cell width so that more cells can be accomodated.

Functionalities

• The position of startNode and finishNode can be changed by simply clicking on it.

• For given generated nodes clicking on any algorithm resets the visited nodes and path without changing the configuration of walls and starts running the algorithm.

References

• Dijkstra Algorithm : Dijkstra Algorithm
• A star Algorithm : A* Algorithm
• Bidirectional Dijkstra : Bidirectional Dijkstra
• Recursive Division : Maze-generation
• For learning HTML Canvas : Tutorial

Contributors

• Abhishek Sharma
  • LinkedIn