Switched

Selection sort run against a list with swapped halves.

Junction

Insertion sort run against a list with the first and last thirds swapped.

Mist

Insertion sort run against a list with both halves swapped. Difference visualization.

Night Sky

Selection sort run against a shuffled list. Difference visualization.

Sortraits

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.

Saturn

Bubble sort run against a shuffled list. Light and dark have been inverted from the original.

Brushed Metal

Comb sort run against a shuffled list.

Brushes

Shell sort run against a reversed list.

Strata

Shell sort run against a shuffled list.

Chandelier

Shell sort run against a list with both halves interleaved. Difference visualization.

Coat of Arms

Cocktail sort run against a list with both halves swapped.

Cross Stitch

Even-odd sort run against a list with the first and last thirds swapped.

Icicles

Hoare-style Quicksort run against a list with the first and last halves swapped.

Magic Hour

Heap sort run against a reversed list.

Organ

Breadth-first merge sort run against a shuffled list.

Lair

Stooge sort run against a list with both halves switched.

Tile

Shell sort run against a list with the first and last thirds swapped.

Poncho

Comb sort run against a list with both halves swapped.

Halfway to Halftone

Even-odd sort run against a reversed list.

Streamers

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

Shaken, Not Stirred

Cocktail sort run against a reversed list.

Babel

Gnome sort run against a shuffled list.

Machines

Depth-first merge sort run against a shuffled list.

Newsprint

Least-significant-digit radix sort run against a shuffled list. Rotated; unsorted input on the left, sorted output on the right.

Letterhead

Most-significant-digit radix sort run against a reversed list. Rotated; unsorted input on the left, sorted output on the right.

Orchid

Even-odd sort run against a list with the first and last thirds swapped. Difference visualization.

Polar Visualizations

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.

Hardwood Nautilus

Heap sort run against a shuffled list. Difference visualization.

A Disco Kinda Love

Bubble sort run against a list with the first and last halves interleaved. Difference visualization.

Ripples in Spacetime

Cocktail sort run against a shuffled list.

Open Your Heart

Cocktail sort run against a list with the first and last thirds swapped. Difference visualization.

Illusion

Even-odd sort run against a reversed list.

Hydra

Bubble sort run against a shuffled list. Difference visualization.

Pendant

Hoare-style Quicksort run against a reversed list.

Symmetry

Hoare-style Quicksort run against a list with the first and last halves swapped.

Engine

Least-significant-digit radix sort run against a list with swapped halves.

But I Still Love You

Selection sort run against a list with swapped halves.

Daisy

Shell sort run against a list with the two halves interleaved.

Kaliedoscope Pinwheel

Even-odd sort run against a shuffled list. Values have been assinged to rainbow hues, rather than to brighter and darker shades.

Further Viewing

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.