1- # [ Interactive pathfinding visualizer live demo] ( https://nellogan.github.io/PathfindingVisualizer )
2- Click on the link above for a live demo. Visualize how search algorithms traverse through a grid with walls and weighted
3- edges. Dijkstra's algorithm guarantees the shortest possible path (optimal). A* algorithm will also determine the
4- shortest path while incorporating a heuristic function. The heuristic estimates the cost of the cheapest path from n to
5- the goal, thereby reducing the amount of neighbors visited and finding the shortest path in less time than Dijkstra's.
6- Greedy best first search only use the heuristic function which will always choose the current shortest cost edge.
1+ # [ Live Demo] ( https://nellogan.github.io/PathfindingVisualizer )
2+ Click on the link above for a live demo. Visualize how search algorithms traverse through a graph with walls and weighted
3+ edges. Dijkstra's algorithm guarantees the shortest possible path (optimal cost path). The A* algorithm will also determine the
4+ shortest path while incorporating a heuristic function (more efficient). The heuristic estimates the cost of the cheapest
5+ path from the current node (denoted as 'n') to the goal, thereby reducing the amount of neighbors visited and finding the
6+ shortest path in less time than Dijkstra's. Greedy best first search only use the heuristic function which will always
7+ choose the current shortest cost edge.
78
89
9- ### Search algorithms to choose from:
10- Breadth first search
10+ ### Search algorithms to choose from
11+ Depth first search
12+ Breadth first search
13+ Greedy best first search
14+ Dijkstra's algorithm
15+ A* search algorithm
1116
12- Depth first search
17+ ### How to interact
18+ Click and drag start node (green) or finish node (red) to move its position.
1319
14- Greedy best first search
20+ Shift click to create or remove a wall node (black).
1521
16- Dijkstra's algorithm
22+ Shift click to add/remove weight (double cost) to/from a node (pink).
1723
18- A * search algorithm
24+ Option to recursively generate a maze. Sometimes the generator will produce a non-solvable maze.
1925
26+ Clean up options:
2027
21- ### How edge cost is calculated:
28+ Reset Graph: resets all path (yellow), visited (gray), and neighbor nodes(light green).
29+ Clear Weights: clears all weight nodes.
30+ Clear Walls: clears all wall nodes.
31+ Clear Graph: clear all node types except for the start and end nodes.
32+
33+ ### How edge cost is calculated
2234g(n) = cost of the path from the start node to n.
2335
2436h(n) = heuristic function that estimates the cost of the cheapest path from n to the finish node.
@@ -29,17 +41,13 @@ A*: f(n) = g(n) + h(n)
2941
3042Greedy best first search: f(n) = h(n)
3143
44+ ### Tools used:
45+ React
46+ CSS
47+ Webpack
48+ ESBuild
3249
33- ### How to interact:
34- Click and drag on empty (white) nodes to make them walls (black).
35-
36- Press shift+click and drag to make weighted (orange) nodes. Weighted nodes cost double compared to normal nodes
37-
38- Click and drag start (dark green) node or finish (red) node to move it.
39-
40- Light green nodes are nodes that are in the neighbor queue while gray nodes are nodes that are already visited.
41-
42- Option to recursively generate a maze.
43-
44- ### Tech stack:
45- Javascript, CSS, and React.
50+ ### How to run locally
51+ git clone https://github.com/nellogan/PathfindingVisualizer
52+ npm install
53+ npm run start-dev
0 commit comments