Algorithm Visualization
Project Description
This project is broken up into two parts. The first part is the sorting algorithm visualization and the second part is a path finding algorithm visualization. I choose these two types of algorithms to visualize because I thought they looked intreating and their algorithms are used commonly within programming. I wanted to practice and learn more about just pure JavaScript so I wanted this project to be done in as pure JavaScript as possible.
Sorting Algorithms
This section of the project focused on creating a sorting algorithm visualizer. I wanted to be able to show the difference between how the different sorting algorithms worked and could be implemented. When you enter the page you are greeted with a side bar full of options and a blank canvas. These options are the number of elements that will be sorted and displayed, which sorting algorithm that will be visualized, the case (Best, Worst, Average) the arry is in and then finally how long you want each step will take in milliseconds. Once a sorting algorithm is selected the summary and pseudo code is filled in with information about that algorithm. The summary section describes how the algorithm works as well as shows the Big O complexity of the given algorithm. The pseudo code section gives a basic idea of the code required to implement the algorithm. This is not the exact code used to create the visualization of the algorithm as they needed to be change slightly to be able to visualize them. Once all the options are selected and the user presses start the canvas will fill bars representing the values within the array. It will then start applying the sorting algorithm to the arry. When two elements are being compared they will be highlighted in green. If they then need to swap they will be highlighted in red. This is done to shows how many comparisons and swaps are required to completely sort the array. Currently there are four sorting algorithms implemented.
Current sorting algorithms
- Bubble Sort
- Selection Sort
- Insertion Sort
- Merge Sort
Path Finding Algorithms
Coming soon!
What I Learned
Sorting Algorithms
Starting this part of the project I had never done any visualization or graphics work before. I learned a lot about how the HTML canvas worked and the powerful things it can do. I learned that I was not able to translate directly from the algorithm to draw on the canvas. If I did that it would be over very quickly for small to medium size arrays making it difficult to see how the algorithm works. To slow the process down I had to take steps to create an actions array that would capture the steps that would need to be taken so that they could be animated within this canvas. Once the action array was created I was able to get it to be able to be stepped through in a fashion that would be able to be animated. This gave me more control over how the animation worked and the speed in which it could be stepped through.
Languages and Frameworks Used
jQuery