https://github.com/bingyangchen/path-finding-visualizer
Explore and visualize various path-finding algorithms with this interactive webpage. Perfect for learning and understanding algorithms like A*, Dijkstra, and more through engaging animations and intuitive controls.
https://github.com/bingyangchen/path-finding-visualizer
a-star-algorithm dijkstra-algorithm maze-generation-algorithms path-finding-algorithms path-finding-visualizer
Last synced: about 2 months ago
JSON representation
Explore and visualize various path-finding algorithms with this interactive webpage. Perfect for learning and understanding algorithms like A*, Dijkstra, and more through engaging animations and intuitive controls.
- Host: GitHub
- URL: https://github.com/bingyangchen/path-finding-visualizer
- Owner: bingyangchen
- License: mit
- Created: 2021-01-26T09:16:45.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-01-25T02:19:41.000Z (5 months ago)
- Last Synced: 2025-01-25T03:17:45.912Z (5 months ago)
- Topics: a-star-algorithm, dijkstra-algorithm, maze-generation-algorithms, path-finding-algorithms, path-finding-visualizer
- Language: TypeScript
- Homepage: https://byc1999.com/path-finding-visualizer/
- Size: 669 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Path Finding Visualizer
An interactive web application for visualizing path-finding algorithms in action. This project helps users understand how different path-finding algorithms work through intuitive visualization and animation.
## Features
- Multiple path-finding algorithms including Dijkstra's algorithm
- Interactive grid where users can:
- Draw/erase walls by clicking and dragging
- Move source and target points
- Generate random mazes
- Adjustable visualization settings:
- Grid cell size (Small/Medium/Large)
- Animation speed (Slow/Normal/Fast)
- Responsive design that works on both desktop and mobile devices
- Detailed algorithm explanations
- Interactive tutorial for new users
## Live Demo
Visit [https://byc1999.com/path-finding-visualizer](https://byc1999.com/path-finding-visualizer) to try it out!
## Development
### Install Dependencies for Development
```bash
npm install
```
### Build for Production
```bash
npm run build
```
### Watch & Build on the Fly
```bash
npm run dev
```
## Technologies Used
- TypeScript
- SCSS
- HTML5 Canvas
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Author
Bing-Yang Chen