diff --git a/README.md b/README.md index b356258..47c387a 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,74 @@ -# Algorithm Visualizer +# Algorithm Visualizer - ReactJS Web App -This interactive app visualizes and animates different sorting, graphing, and maze generation algorithms. +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: https://ian-chuang.github.io/AlgorithmVisualizer/ +Try out the app here: [Live Demo](https://your-algorithm-visualizer-app-link.com) -## Sorting! -![](GIFs/sorting-readme.gif) +![Sorting Algorithms](GIFs/sorting-readme.gif) -## Graphs and Mazes! -![](GIFs/graph-readme.gif) +![Graph and Maze Algorithms](GIFs/graph-readme.gif) -## Extra Features! -![](GIFs/luffy-readme.gif) +## 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. + +![Extra Features](GIFs/luffy-readme.gif) ## How to Run -In the project directory, you can 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: + +```bash +npm start +``` -### `npm start` +This command will start the app in development mode. Open [http://localhost:3000](http://localhost:3000) in your browser to view and interact with the app. -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. +Feel free to contribute, provide feedback, or customize the app to your liking!