Pathfinding Visualiser
29 August 2021 • ☕️ 2 min read
Visualise pathfinding algorithms within a grid
Introduction
Pathfinding Visualiser is a project designed to visualise pathfinding algorithms within a grid.
Currently, it incorporates the following algorithms:
Features include:
- Visualise the cells visited by the algorithms
- Visualise the shortest path
- Move the start and finish nodes
- Place walls
- Generate random mazes
It was inspired by Clément Mihailescu. I followed his tutorial on how to get started with this project:
Motivation
My motivation for this project was to practise working with algorithms while building something visual and fun. Additional features and algorithms can certainly be added but I chose to incorporate a set of key features that could be completed within a week.
Demo
Visit the live demo to visualise either the A* search algorithm or Dijkstra's algorithm.
- Create maze generates a random maze on each click.
- Clear board removes all walls and resets the start and finish node to their default starting positions.
- Clear path resets the visited nodes and the shortest path but the walls, start node and finish node remain. This allows comparisons between the different algorithms within the same grid layout.
- Cells visited and cells on the shortest path give a count of the cells the algorithm had visited and the cells on its shortest path from start node to finish node, respectively. These counts are inclusive of the start and finish node.
- Click on the start node (rocket) and click on an empty cell to re-position the start node to that cell. The same applies for the finish node (planet).
Tech
React
JavaScript
Bootstrap
CSS
Links
Last updated: 29 August 2021
Next
