Using Color and Geometry to Represent Entropy and Other Big Numbers

A 12 bit cube representing 4096 colors from #000 to #FFF

As time goes by, I find myself interacting more often with giant numbers encoded in hexadecimal strings that are hard to tell apart. There are git commit hashes, API keys, magnet links, public private key pairs, transaction IDs, and with IPv6 even IP addresses are 64bit hexadecimal strings.

Two useful qualities of using random number generators for unique ids and hash functions:

  • With a large enough bitspace, the resulting hash can be assumed to be universally unique (infinitesimal chance of collisions)
  • the output is uniformly distributed — if the input changes even one bit, the output will be drastically different.

However, while its easy enough to look at a list of git hashes and remember the first few letters while you’re checkout out commits, you’ll forget it as soon as you have to remember the next one. Hexadecimal numbers are unique, but they all look the same.

In the interest of making the distinction between large numbers more visual, I started using geometric tessellations where I saw a similarly infinite range of possibilities. In this case with 5 x 24bit colors (between #000000 and #ffffff), and 8 bits to encode edge thickness, you get a large array of visually distinct patterns you could use as a header image, or background images – but this is just with the same 12-pointed star. There are a very large number of possibilities with 4, 5, and 6 fold symmetries and different choices of when to use space and when to alternate stars…

You can try out randomly generated mosaics here by clicking on the “flip 128 coins” link. That’s one coin for each bit of information encoded by the pattern! The URL is updated each time so you can share a pattern, and you can download the SVG ready to use as a background image.

On Twitter, Medium, and Instagram, everyone’s feed looks the same and I can never remember where I saw some piece of information. Maybe by allowing a geometric motif generator to customize a page, or just hashing the contents of a page into a mosaic, we can provide a more visual signal that something on a page changed since you last looked at it, and a way to jog your memory when you do see the same pattern.

Leave a Reply

Your email address will not be published. Required fields are marked *