nurasad/sorting-visualizer

Sorting Algorithms Visualizer

Interactive React JS web application that visualizes Bubble Sort, Merge Sort, Quick Sort, and Heap Sort algorithms in real-time. This includes step-by-step execution and animation of the sorting process.

Live Demo: https://nurasad.github.io/sorting-visualizer

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.

Spotlight

Key features of this web application include:

1. "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.

2. 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.

3. 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.

Lessons Learned

Initially, the idea for this project came from viewing videos on YouTube on how different sorting algorithms work. I thought that such animations could be created with JavaScript. Thankfully, YouTube videos gave me an idea that such animation can be done using an array of vertical bars with different heights.

After the preparation of such an array, the real hard work started. Understanding the principles of sorting algorithms turned out to be insufficient to implement them right away. Also, React DOM tends to collect all changes before updating, which is great for efficiency but bad for the main purpose 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.

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.