This program uses pathfinding algorithms/searches to find the end node from the starting node and visualizes the process it takes along with the result. The grid can be populated with a starting node, end node, wall node, or a weight node. The wall node prevents the algorithms from going through the cell in the grid. Meanwhile, the weight node only affects the weighted algorithms such as the Dijkstra algorithm. The weight will make the cell be considered heavier (or longer route) and will calculate the shortest path accordingly.
An awesome pathfinding visualizer!
View Demo
·
Report Bug
·
Request Feature
Table of Contents
It can sometimes be difficult to tell the difference between the innumerable amount of pathfinding algorithms and searches that are available. It is much easier to grasp the differences by looking at the path the algorithm is taking and identify the patterns that way.
Here's why I felt it needed to be created:
- I wanted to explore different pathfinding algorithms and how to implement them
- Show visually what I implemented and make it look pleasing to the eye
- Helpful for students to see what the process and result for such a problem will look like
- Easy to use interface, and friendly towards users who know nothing about the subject
Although, there is more than one way to implement the various algorithms, I followed pseudo code from various sites that described how the algorithm should be implemented.
A list of commonly used resources that I find helpful are listed in the acknowledgements.
I used pure JavaScript for the implementation of the algorithms.
- [HTML]
- [CSS]
- [JavaScript]
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.
This is an example of how to list things you need to use the software and how to install them.
- npm
npm install npm@latest -g
- Clone the repo
git clone gh repo clone Alejandro-Vega/Pathfinding-Visualizer
- Install NPM packages
npm install
To place a node left click, and to delete a node right click. Click and hold only works with wall and weight nodes.
To use the program you have the following requirements:
- Add a start node somewhere in the grid
- Add an end node somewhere in the grid
- Make a possible path from the start node to the end node
- Select an algorithm to run
Optional features:
- Insert wall nodes to block the path of the algorithm
- Inset weight nodes to increase the weight value of the node
Once you click the "SEARCH" button it will begin the algorithm search. If the end node is found then it will create a yellow path from the start node to the end node. NOTE: Some search algorithms such as Depth-First Search do NOT show the shortest path.
The program uses CSS animation to visualize the algorithms. The animation may stutter or not function properly if the computer running the program is unable to smoothly handle it. Although, it is expected that the more cells that are considered into the algorithm the more computation power and time will be needed to calculate the results. Delay may vary depending on the computation.
Currently not allowing for contributions from other people. Although, if you find an issue with the program feel free to open an issue request.
Distributed under the MIT License. See LICENSE for more information.
Alejandro Vega - LinkedIn - [email protected]
Project Link: https://github.com/Alejandro-Vega/Cubic-Spline-Interpolation-Visualizer