Skip to content

Commit 73a263a

Browse files
author
rain
committed
updated README.md
1 parent deca371 commit 73a263a

File tree

1 file changed

+34
-26
lines changed

1 file changed

+34
-26
lines changed

README.md

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,36 @@
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
2234
g(n) = cost of the path from the start node to n.
2335

2436
h(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

3042
Greedy 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

Comments
 (0)