Visualizing Sorting Algorithms in Color

· June 28, 2017

Different Color Spaces

There is no correct way to sort a list of colors. Every color can be mapped to a vector in a three-dimensional space. In other words, each color is defined by three unique numbers. There are competing models for representing this space in Computer Science. Probably the most familiar one is the Red-Green-Blue (RGB) color space, a cubic model that breaks each color down into pieces of red, green, and blue. Another color model common in computer science is the Hue-Saturation-Value space. This space maps colors onto a cylinder, highlighting different characteristics of each color that are sometimes more helpful than the RGB descriptions.

So given a set of different colors, there is no single way to sort them – we could sort by their ‘redness’, or their hue, or some combination of saturation and brightness. The way that humans are most familiar with ordering colors, however, is in the order they appear in a natural rainbow; this is equivalent to sorting them by hue.

Unsorted colors
Colors sorted by hue

The Sorter

Since humans are used to seeing colors sorted by hue, I realized that this is an easy way to see large amounts of data and determine whether or not the data are sorted. I mocked up a proof-of-concept ‘Color Sorter’ that also works as a nice way to visualize different sorting algorithms.

Your browser does not support the HTML5 canvas tag.


pixels changed: