mennosc / PathfindingVisualizer

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pathfinding Visualizer

To try out this project:

  • Make sure node.js is installed on your machine. check out this link if you don't have it installed.

  • Download this project locally or use git clone.

  • Open the terminal/powershell and navigate to the downloaded folder and

  • Type in the following commands: npm install npm start This will succesfully launch the program

    alt text

How does it work?

The arrow on the left denotes the start node, and the target on the right denotes the end node. If you drag the mouse over the grad and hold the mouse button down, it will place walls. These walls are obstacles for the pathfinding algorithms and the algorithms can't get through them.

Obstacle generation

There are 4 methods of generating obstacles:

  • Recursive Division. Used to generate a maze
  • Basic Random Maze. Used to generate walls randomly
  • Basic Weight Maze. Used to generate random weights for the weighted algorithms
  • Simple Stair Pattern. Used to generate a diagonal line of walls.

Algorithms

There are 5 methods of grid traversal:

  • Dijkstra's Algorithm: Most often used in graph problems, but it can be extended to work on grids
  • A* Search: Really smart algorithm that solves mazes quickly
  • Greedy Best-first Search: A greedy approach that works towards the end goal
  • Breadth-first Search: Grid traversal by looking at all neighbors of the starting nodes, then checking their neighbors etc.
  • Depth-first Search: Grid traversal by exhausting neighbors in the same direction

Visualization

When an algorithm is selected and walls have been drawn, the visualization can start. The blue nodes represent the nodes that have been visited by the algorithm in order to find a path. This pattern is different for all algorithms. When the end node has been found, a yellow line will appear. This line is the shortest (or least weighing) path from the start to the end.

About


Languages

Language:TypeScript 85.8%Language:CSS 7.3%Language:HTML 6.9%