16 Shades of Gray

If you’ve been following me long enough, you’ve probably noticed that my site is completely devoid of color, except for in imagery and code blocks. A friend even joked that I must be allergic to color because I’ve exterminated it from every part of my UI. Admittedly, I do enjoy working in grayscale because it allows me to focus on contrast, typography, and spacing over color, which can be overwhelming to implement.

In a recent redesign of my site, I also decided to make my layout wider and bigger, but this left a noticeably big gap to the right of the hero banner on my home page. And thus began my quest to fill that space with something meaningless to stare at. It wouldn’t really make sense to show a photo of myself next to my name and intro, so I had to search for more reasonable options.

I enjoy generative art, especially works that are seeded with random hashes—like Jordan Scales’s hashart project, where he draws various math-based artworks using SHA-256 hashes. I also recently had an idea to show my site’s git hash in my footer as part of my 11ty build. And so I wondered: Could I somehow turn this random string of symbols into a mediocre work of art? Indeed, I could!

I decided to take my git hash and convert it to a four-by-four grid of colored tiles. Naturally, having been confronted about my phobia of color, I had no choice but to redouble my efforts and make this a grayscale artwork, in keeping with tradition. To introduce color when I’ve renounced it for so long would be regressive, a sign of weakness, and cause for rebellion.

The code to do this is short—it just reads my latest Git commit hash at build time and converts it to an array of bytes. Since one byte represents 28 = 256 values, and there are 256 values per channel in the RGB true color model, it makes sense to just interpret each byte as a color value. Grays are achieved by setting red, green, and blue to all be the same value. Note that I’m excluding the last four bytes because there are 20 bytes in a Git hash, and I’m only interested in the first 16 for the sake of symmetry.

const hash = childProcess.execSync(`git rev-parse HEAD`).toString().trim();
const bytes = new Uint8Array(Buffer.from(hash, 'hex'));
let result = `<svg viewBox="0 0 4 4" width="100" height="100">`;
for (let i = 0; i < bytes.length - 4; i++) {
  const gray = bytes[i];
  const color = `rgb(${gray}, ${gray}, ${gray})`;
  const x = i % 4;
  const y = Math.floor(i / 4);
  result += `<rect x="${x}" y="${y}" width="1" height="1" style="fill: ${color}"></rect>`;
}
result += `</svg>`;

Since it’s an SVG, I can easily scale it to any size I want later.

Below are some examples of the output images this generates:

Git hashes interpreted as four-by-four grayscale grids
Hash Output
d0c50e3e6e5c215b49afe882bce5e382cb16c626 Four-by-four grayscale grid for the git commit hash d0c50e3e6e5c215b49afe882bce5e382cb16c626.
3b203fd5b0bde1a51cb39de0823e64dd27bab798 Four-by-four grayscale grid for the git commit hash 3b203fd5b0bde1a51cb39de0823e64dd27bab798.
3b5875ce12be8bd07cf00249732c8edd7da6145f Four-by-four grayscale grid for the git commit hash 3b5875ce12be8bd07cf00249732c8edd7da6145f.
0f1f9f3e7a5c6cdd8263e20b0afb18cfe64e696c Four-by-four grayscale grid for the git commit hash 0f1f9f3e7a5c6cdd8263e20b0afb18cfe64e696c.
c32a1cde0eb3d3c99d9b12d6025c1de43b510ed7 Four-by-four grayscale grid for the git commit hash c32a1cde0eb3d3c99d9b12d6025c1de43b510ed7.

Nothing super exciting, but there is one problem: Mathematically speaking, the hash should eventually generate an embarrassing permutation of tiles. When you consider that I make frequent and atomic commits, this may not end well. On the other hand, there are 256 grayscale values for each of the 16 tiles, which when you do the math comes out to—counts fingers—lots and lots of permutations. So it’s unlikely that I’ll ever run into edge cases where this algorithm produces something silly. Plus, there are only so many ways to draw things in the confines of a four-by-four grid.