Inspiration
Our inspiration was Timo Bingmann, who initially showed a prototype video of how sorting algorithms work by demonstrating their course of action in a graph.
What it does
Our program generates an array with a set of random values, from which it generates an unorganized graph. Once the graph is generated, the program can proceed to sort the values of the array using merge sort while also displaying an animation to illustrate how this algorithm works. Some extra functions allow the user to modify the loglinear complexity, the amount of elements in the graph, and the speed of the animation.
How we built it
We built the program using react with three indexes being the main body of the program. The first index is the sorting algorithms which uses JavaScript to make the logic behind the sorting mechanism. The second index, which uses JavaScript and HTML, takes the logic, and creates the graph and buttons that composed the program. And lastly, the third index uses CSS to give a stylish look to the program.
Challenges we ran into
At first out team wanted to implement quick sort, bogo sort, and insertion sort but we were unable to create animations that fit how those sorting algorithms work. Additionally, we also wanted to add an audio system that further enhances the animation, however we were not able to make it work.
Accomplishments that we're proud of
While not all our initial goals were met, we still managed to create a functional program that visually displays how merge sort works using React.
What we learned
We learned how to set a workspace in GitHub for better team organization. We also learned how to use arrays to create graphs. And lastly, we learned how to manipulate values in an array to display animations.
What's next for Sort Visualizer
Firstly, we would like to add the missing functions, prioritizing sound effects as it would add more appeal to the program. We would also like to get a better understanding of other sorting algorithms so we can successfully create graphs depicting other sorting methods.
Log in or sign up for Devpost to join the conversation.