Sorting Algorithms Visualizer

The application provides an interface where users can choose from four sorting algorithms: Bubble Sort, Merge Sort, Quick Sort, and Heap Sort, and observe how the selected algorithm is visually represented on an array of elements.

As the sorting process unfolds, the application dynamically updates the visualization, allowing users to observe each step of the algorithm's execution. Additionally, users can set the speed of the animation to better understand the intricacies of each sorting algorithm's behavior.

This project was built entirely from scratch using React JS. Sorting functions were refactored from existing web sources for integration. This hands-on approach ensured a deeper understanding of the algorithms and seamless integration within the application's architecture.

Live Demo Source Code

Purpose

The purpose of the Sorting Algorithms Visualizer project is to create an interactive and educational tool for exploring various sorting algorithms in action. By providing real-time visualizations of sorting processes, the project aims to enhance understanding and appreciation of fundamental algorithms used in computer science. It serves as a platform to experiment with different algorithms, observe their behavior, and gain insights into their performance characteristics.

Features

• "Generate New Array" Button: Upon clicking this button, a new row of vertical bars with varying heights is generated. These bars represent the elements of an array, which will then be sorted using the chosen algorithm.
• Animation Control: During the visualization process, all other functionality is disabled to focus on the sorting animation. Once the animation stops, sorting buttons remain inactive until a new array is generated, ensuring a smooth and uninterrupted user experience.
• Speed Adjustment: Users can adjust the speed of the sorting process using a speed slider. This allows for customization of the animation speed according to individual preferences, facilitating a tailored and interactive learning experience.

Leasons Learned

React DOM tends to collect all changes before updating, which is great for efficiency but bad for the animation, which is the main driver of this project. The solution that I came up with was using the setTimeOut functionality to give React time to update DOM and show changes in the array. I rewrote some sorting algorithms to collect all changes that were made at each step of sorting and then animated them.

During working on this project I learned how to correctly update state of different components depending on the stage of process.

Drawbacks

One of the big drawbacks of this web application is that it is not designed to be responsive because the vertical bars used to visually represent the sorting process need to be of sufficient height and quantity, which may not scale effectively on smaller screens.