One of the traditional rites of passage that new computer programmers have to go through is learning a variety of functions called sorting algorithms. Arguably, sorting is a misnomer, as these functions deal with taking a list of items and putting them in the proper order, not separating them into different categories. They are used everywhere from ranking search results to alphabetizing address books.
There are dozens of these functions described in academia and in industry, all with subtly different properties. New sorting algorithms, and improvements to existing sorting algorithms, are an endless source of research papers. Some are faster than others, some require less memory than others, some are adapted to special hardware, and some are adapted to special datasets.
This is a project to create portraits of a variety of sorting algorithms. For each portrait, I started with one line of pixels, where each pixel is assigned a number. Larger numbers make brighter pixels, and smaller numbers make darker pixels. Then, I run the algorithm. Each time the algorithm moves items around in the list, I add another row to the picture showing the current state of the list. This continues until the list is entirely ordered, with black at the left, and white at the right.
I used several types of starting lists: I tried lists shuffled in random order. I tried lists set up in reverse order. I tried starting with an ordered list, and interleaving pixels from the two halves. I tried swapping the two halves. I tried swapping the first and last thirds. I even tried running the algorithms on an already sorted list--several algorithms insist on completely rearranging the list and then putting it back in order!
I also tried difference visualizations as well: For each pixel, I compared the current value of the pixel, and the value that it should have when the list is properly ordered. If they are the same, I color the pixel black. The more different they are, the brighter the pixel becomes. Areas that need work will light up, and areas that are already sorted go dark.
I've collected the most interesting pictures here. I have cropped or resized several, and I have tinted several with different colors that felt right. Enjoy.
Even-odd sort run against a shuffled list. (In this image, different values have been mapped to rainbow hues instead of shades of light and dark.)
Least-significant-digit radix sort run against a shuffled list. Rotated; unsorted input on the left, sorted output on the right.
Even-odd sort run against a list with the first and last thirds swapped. Difference visualization.
The following visualizations use a polar coordinate system. The starting input is at the center of the image, and the final result is wrapped around the outside edge of the image. This transforms vertical stripes to radiating lines, horizontal lines to concentric circles, and diagonal lines into spirals.
Bubble sort run against a list with the first and last halves interleaved. Difference visualization.
Cocktail sort run against a list with the first and last thirds swapped. Difference visualization.
Sorting Algorithms Visualized by user morolin on Imgur. There's lots of big animations on this page, so don't follow that link if you're on a slow connection! This was the original inspiration for my project.
16 Sorting Algorithms by user w0rthy on YouTube. This inspired my difference visualizations.
Sorting Algorithms Visualization by Trevor Meiss. I didn't discover this video until I was well into this project, but Meiss had almost exactly the same idea as I did.
The Sound of Sorting by Timo Bingmann. Bingmann creates sound and video from various sorting algorithms.
Sortraits GitLab Project From this page you can access all the code used to develop in images in this set.