This project provides a visualization of the Breadth First Search (BFS) algorithm, allowing users to observe how BFS explores and finds the shortest path from a source to a destination on a grid.
- Interactive Interface: Simple and intuitive interface with "Start BFS" and "Reset" buttons to initiate the algorithm and reset the grid, respectively.
- Color-coded Nodes: Nodes are color-coded to distinguish between different states such as the source, destination, and visited nodes.
- Real-time Visualization: The visualization updates in real-time, providing a step-by-step view of the BFS algorithm's execution.
- Customizable Grid: The grid size and node colors are customizable, providing flexibility for different scenarios.
- p5.js: The project utilizes the p5.js library for creating the interactive canvas and handling graphics.
- HTML and CSS: The structure and styling of the user interface are implemented using HTML and CSS.
- Open the HTML file in a web browser.
- Click on "Start BFS" to initiate the BFS algorithm from the source node.
- Observe the real-time visualization as the algorithm explores the grid.
- Click on "Reset" to clear the grid and start over.
- index.html: Defines the structure of the HTML page, including the canvas and buttons.
- index.css: Provides styling for the HTML elements, creating an aesthetically pleasing interface.
- index.js: Implements the BFS algorithm, grid creation, and visualization using p5.js.
This project provides a solid foundation for further enhancements. Consider contributing by adding more features, optimizations, or exploring other algorithms for visualization. Your creativity and ideas are welcome!
Feel free to explore, fork, and contribute to this project. Your feedback and contributions are highly appreciated.