Skip to content

prtvi/astar-vis

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React - A* Shortest Path Search Algorithm - Visualization

Netlify Status

Check out the link in the repository details to view the application

About the algorithm

A* Search Algorithm is one of the best and popular technique used in path-finding and graph traversals. Unlike Dijkstra’s algorithm, A* search algorithm is much more efficient as it also considers its current position from the end node while traversal. Click here to read more about the algorithm.

About the project

In this application, you can use various grid sizes and also adjust the visualization speed. You first set the grid size and then set the visualization speed.

Now you click on the boxes to first set the start node 🟧 then the end node 🟪. Then you start adding the barrier nodes 🟫. Reference to different types of nodes is given in the legend below.

Now click on the start button to start the visualization.

Output

Here are some snapshots from the visualization:

1: Start, end node and barriers set, algorithm to be started

Start, end node and barriers set, algorithm to be started


2: Halfway of the algorithm running

halfway snapshot of algorithm running


3: The end result, the shortest path highlighted in green 🟩

end result


Legend

⬜️ Reset (default unset node)
🟧 Start node
🟪 End node
🟫 Barrier node
🟦 Open node (traversing yet possible over this node)
🟥 Closed node (no more traversing will happen on this node)
🟩 Path (shortest path found)

Other links

Click here to check out my other projects

About

A* shortest path search algorithm visualization using React

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published