Pathfinding Algorithms Visualizer
Below there are some tips to inform you how the Visualizer works. If you want to directly check it out, please click here.
Endpoints
The green sphere in the board indicates the start, whereas the red sphere indicates the target square. Each algorithm will try to find the shortest path connecting the start square to the target square.
Navbar
You can use the navbar below the board to control the board. The 'Choose the Algorithm' dropdown can be used to choose which pathfinding algorithm to visualize. The 'Visualize' button starts the visualization. The 'Reset' button resets the board in its initial state, whereas the 'Clear' button only clears the weights and walls. At last, the 'Weights' button can be used to control the weights. The weight of each square will show up only if the chosen algorithm is weighted. Pressing the button will change its color to green, red, or white. If it is green you can add weights by clicking on the squares. If the color is red, you can remove a weight from the square by clicking on it. If the color is white, then you can add walls in the board.
Endpoints
You can drag the start or target square over the board using the mouse
Walls
When the 'Weights' button in the navbar is white, you can add walls using the mouse.
Weights
Upon choosing a weighted algorithm (currently only Dijkstra) weights will immediately show up in each node. You can add or remove weights depending on the color of the 'Weights' button. (max 99, min 1).
Visualization example
Below there is a visualization of the A* algorithm.
Hope you now have an idea of how to use the pathfinding visualizer. Enjoy :)