This page is a collection of sorting algorithms. It allows the user to visualize some algorithms in action and also provides a short explanation of how the algorithms work and their complexity.

See the technical details for more information on how this page was created.

When shuffling or sorting the array you will notice two different colors:

Red is used to indicate that the current element is being changed in some way. Note, it is possible that two elements are red (being changed) at the time. This only happens when these elements are being swapped.

Yellow is used to indicate that the current element is being compared to another element. (Note, in order to see this color you will need to enable the "Animate comparisons" option.)

The visualization is built with HTML divs. The height of each div is determined by the value of the element in the array. When you shuffle the array, the JavaScript on your browser will calculate the shuffle, and saves each step in an array. The visualization will then try to replicate each step of the shuffle.

The sorting on the other hand works different. Your browser will send a request to a server with the algorithm you selected and the array that you want to sort. The server will then try to sort it and saves each step in an other array. When its done sorting, the sever will respond to your browser with each step. Your browser will then try to replicate each step of the sorting and colorize it respectively.

You might be wondering why I didn't just use the JavaScript on your browser to sort the array. Well I think you overlooked the insane amount of advantages that the server has over your browser:

First the server has a lot more computing power than your machine. It is running in a virtual box with a bizarre amount of one CPU core. And the next gen RAM supports your requests with its whopping 500MB of RAM. So the server must be definitely faster than your browser.

Second this approach costs a lot more internet bandwidth. Just think about it. When the server responds to your browser with each step of the sorting, it will send a lot more data than if your browser would just sort the array. Imagine the sheer amount of JSON that is being used to describe the thousands of steps for the sorting. So offloading the calculations to the server is definitely way more efficient.

Third idk. I ran out of ideas. Submit a PR if you know some.

But yes, at least this project was a really great learning experience for me and I didn't enjoyed every minute of it. It was pure pain and suffering.
I hope you had a great time.