Pathfinding Visualiser

29 August 2021 • ☕️ 2 min read

Pathfinding Visualiser cover

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

React

JavaScript

JavaScript

Bootstrap

Bootstrap

CSS

CSS

Last updated: 29 August 2021