It’s banal by now to observe that most of our mundane-seeming technology relies on mind-boggling ingenuity and complexity underneath. But it’s one thing to observe it and another to experience it. That’s the genius of this interactive explainer entitled “Unraveling The JPEG.” Using deftly deployed interactive code “notebooks,” it invites you to pop the hood on a run-of-the-mill internet cat photo and fidget around with the thousands upon thousands of numbers meshed inside it.
And that’s the key word: “invite.” As the article’s author (Philadelphia-based graphics programmer Omar Shehata) admits up front, you could do the same thing with that cat JPEG on your own, simply by forcing your computer to open the file in a plaintext editor instead of an image viewing app. The result would be an unintelligible splash of ASCII characters–and not very inviting of further investigation. Instead, Shehata has designed lightweight code editors right into the layout of his article that display the cat photo and its numerical guts side by side. The invitation is clear: dork around with the numbers, and instantly watch what happens to the cat photo.
But even that isn’t giving Shehata (and his collaborators at Parametric Press, the new online magazine that published the article) enough credit. As anyone who’s followed the influential work of Bret Victor over the past decade will know, it’s one thing to embed sophisticated interactives into an article and quite another to do so in a way that doesn’t feel overwhelming, distracting, or opaque. Let’s be honest: unless you’re a tech geek, blindly twiddling the mathematical knobs inside a JPEG in hopes of divining its inner workings—or just seeing something cool happen—is going to get old fast, because most of the things you twiddle with won’t have any interesting effects. You need a guide who already knows all the deep inner workings to steer you toward the fun stuff.
Explore the interactive demo here. [Image: Parametric Press]That’s the role Shehata plays as the article’s writer, coder, and designer. He repeats the same “code notebook” interactive seven times over the course of the article, but each time it shows up, it’s pre-filtered to only highlight certain image effects (and obscure others). Even better: if you’re not the tinkering type, the article text includes hyperlinks that “cut to the chase” by making the interactive model snap into whatever state Shehata happens to be explaining in that section. Like, for example, the fact that changing a single digit in the first line of numbers will turn the entire image into a glitched-out rainbow.
Still, the code notebooks are designed to be “forgiving” enough to handle rough-and-tumble play without breaking. The first thing I did when I saw one (having barely read the accompanying text) was select a huge swath of numbers and just delete them, like a toddler swatting a Jenga tower just to watch it fall down. That’s not an interaction Shehata necessarily “wanted” me to try, but his thoughtful, Montessori-like interaction design accommodated it with aplomb—and the fact that it was easy to undo (via a giant, friendly blue “reset” button) made me more than willing to follow him down the rabbit hole into more sophisticated manipulations.
And sophisticated, they surely are. Shehata explains concepts like “chrominance subsampling,” “discrete cosine transform coefficients,” and “Huffman encoding” without dumbing anything down. Did I remember many of the details? Honestly, no. (Well, I do remember that Huffman encoding is part of what makes the aforementioned glitched-out rainbow effect happen, if you mess around with it.) But what did stick with me was a visceral, limbic-system-level sensation of discovery—of possibility, of play, of the pleasure of finding things out. Even if that’s the only thing that Shehata’s interactions get across, it’s more than enough.
Recognize your brand’s excellence by applying to this year’s Brands That Matter Awards before the early-rate deadline, May 3.
