/Path-Finding-Visualization

A web app written primarilly javascript with HTML5 and CSS to visualize path finding and maze generation algorithms.

Primary LanguageJavaScript

Path Finding and Maze Generation Visualization

Netlify Status

Overview

This is a web app written primarilly javascript with HTML5 and CSS to visualize path finding and maze generation algorithms.

LIVE LINK: http://path.meizayaga.com

The path finding algorithms currently available are:

  • Uni-directional Djikstra's
  • Bi-directional Djikstra's
  • Uni-directional A* Search
  • Bi-directional A* Search
  • Breadth First Search
  • Depth First Search
  • Greedy Best First Search

The maze generation algorithms are:

  • Recursive Division
  • Depth First Search
  • Krusal's
  • Prim's
  • Random Walls (high, medium, low density)
  • Stair Pattern

This project should be viewed on a desktop or laptop computer.


Placing and removing walls
Just click and drag anywhere on the board, same goes for removing a wall. Placing Walls on the board


Moving starting and ending point
Click and hold on the start or end and move it to the desired spot.

Moving starting and ending point


Choosing a path finding algorithm
Go to the algorithm drop down at the top and pick your desired algorithm, then click VISUALIZE!.

Choosing a path finding algorithm

Move start/end after completing algorithm
You can move the start and end blocks after you have completed a path-finding algorithm to see how it would behave in different environments.

Moving start and end blocks after algorithm completion


Choosing a maze generation algorithm
Go to the maze dropdown menu on the top and then click the maze algorithm of your choice.

Choosing a maze generation algorithm


Change the program's settings
Go to the gear icon at the bottom right of the screen and change a variety of settings like amount of rows and columns, size, rendering and speed.

Changing the program's settings