Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/abdallahhemdan/pathfinding-visualizer

🎯 VanillaJS pathfinding visualizer using bunch of different shortest-path algorithms (A*, DFS, BFS, ...etc.)
https://github.com/abdallahhemdan/pathfinding-visualizer

astar astar-algorithm astar-pathfinding cmp2022 cufe-2022 hemdan pathfinding pathfinding-algorithm pathfinding-visualization pathfinding-visualizer visualization visulizer

Last synced: 2 months ago
JSON representation

🎯 VanillaJS pathfinding visualizer using bunch of different shortest-path algorithms (A*, DFS, BFS, ...etc.)

Awesome Lists containing this project

README

        




![Pathfinding visualizer](https://user-images.githubusercontent.com/40190772/83947303-6ece9280-a816-11ea-9ac3-72e28ad8af18.png)


🎯 Pathfinding Visualizer


[![GitHub contributors](https://img.shields.io/github/contributors/AbdallahHemdan/Pathfinding-Visualizer)](https://github.com/AbdallahHemdan/Pathfinding-Visualizer/contributors)
[![GitHub issues](https://img.shields.io/github/issues/AbdallahHemdan/Pathfinding-Visualizer)](https://github.com/AbdallahHemdan/Pathfinding-Visualizer/issues)
[![GitHub forks](https://img.shields.io/github/forks/AbdallahHemdan/Pathfinding-Visualizer)](https://github.com/AbdallahHemdan/Pathfinding-Visualizer/network)
[![GitHub stars](https://img.shields.io/github/stars/AbdallahHemdan/Pathfinding-Visualizer)](https://github.com/AbdallahHemdan/Pathfinding-Visualizer/stargazers)
[![GitHub license](https://img.shields.io/github/license/AbdallahHemdan/Pathfinding-Visualizer)](https://github.com/AbdallahHemdan/Pathfinding-Visualizer/blob/master/LICENSE)


---
## 🎈 Pathfinding Visualizer ([Click to try 🚀](https://abdallahhemdan.github.io/Pathfinding-Visualizer/))

> Built VanillaJS **_pathfinding visualizer_** using bunch of different shortest-path algorithms (A*, DFS, BFS, ...etc.) and Generate the grid using maze-generation algorithm and add the ability of controlling the grid structure and the distribution of the blocks and the position of the source and the destination.

## âš™ How it Works

1. Users can drag around a start and end node and set them in any place.
2. Users can then choose a speed of the visualization .
3. Users can optionally choose to clear the maze or draw walls by dragging the mouse.
3. Users can optionally randomize the walls in the maze and add more walls by dragging the mouse.

## 📷 ScreenShots










## 🕶 Demo