ian-chuang / AlgorithmVisualizer

Visualize sorting algorithms, graph algorithms, and maze generation in this interactive ReactJS web app.

Algorithm Visualizer - ReactJS Web App

Welcome to the Algorithm Visualizer ReactJS web app! This app enables you to visualize a variety of sorting algorithms, graph algorithms, and maze generation algorithms.

Try out the app here: Live Demo

Sorting Algorithms

Visualize different sorting algorithms in action. Watch as the app brings sorting algorithms to life, including:

• Quick Sort
• Shell Sort
• Bubble Sort
• Merge Sort
• Insertion Sort

Customize the number of bars to sort and control the animation speed for a more immersive experience.

Graphs and Maze Visualizations

Experience interactive 2D grid-based graph algorithms and maze generation. Features include:

• Drag and move the green starting square
• Drag the red ending square
• Place walls with left mouse button drag to create obstacles
• Use weights instead of walls for weighted pathfinding algorithms

Unweighted graph algorithms available:

• Breadth First Search
• Depth First Search

Weighted pathfinding algorithms available:

• Dijkstra
• A* Manhattan
• A* Diagonal
• A* Euclidean

Maze generation algorithms at your disposal:

• Recursive Maze
• Prim's Maze
• DFS Maze
• Binary Tree Maze
• Random Maze
• Random Weighted Maze
• Natural Terrain (generated using simplex noise)
• Image Terrain (convert an image into a maze)
• Webcam Terrain (use your webcam to create a maze)

Customize wall weight, grid size, and animation speed to suit your preferences. Click the Reset Grid button to clear out walls and weights, returning the grid to its initial state. Click the Clear Visualization button to stop and clear the visualization of any ongoing algorithm.

Additional Graph Visualizer Features:

• Tutorial: Access the tutorial guide from the bottom left corner.
• Responsive Design: Drag and resize the window, and the grid automatically adapts to the new dimensions.
• Dynamic Points: Drag around the starting and ending points while visualizing a pathfinding algorithm for an engaging effect.

How to Run

To launch the app locally, follow these steps:

1. Clone this repository to your local machine.
2. Navigate to the project directory using your terminal.
3. Run the following command:

npm start

This command will start the app in development mode. Open http://localhost:3000 in your browser to view and interact with the app.

Feel free to contribute, provide feedback, or customize the app to your liking!