You see them everywhere—in newspaper ads, on business cards, in shop windows, on posters—those salt-and-pepper jumbles of pixels. It's the invasion of the QR codes. You're supposed to scan the image with a cell-phone app and thereby be transported to a web address encoded in the pattern.
For the holiday greeting cards Rosalind and I sent this year, I created a QR Code with an online tool from Esponce. I wanted lots of pixels, so I chose a long URL and the maximally verbose level of error correction. This yielded a pattern of 53 × 53 pixels, which I exported as an SVG (Scalable Vector Graphics) file. The red and blue coloring was applied in Adobe Illustrator. (As far as I can tell, QR scanners look only at the contrast between light and dark pixels, ignoring hue.)
My plan was to use SVG not only for the printed card but also for the online animation that transforms the QR code into a stylized snowflake. In fact, I built a complete web version based on SVG, with each pixel represented by an SVG <rect> element, with <x>, <y> and <color> attributes. This worked great with various computer browsers—and then I learned that no cell-phone web browsers support SVG. (Might've been smart to check before I started, eh?)
What to do? The whole point was to scan the card with a phone (or possibly an iPad), but these were the very devices on which the program would not run. I turned to the <canvas> element, an alternative scheme for doing graphics on the web. I confirmed that <canvas> works on iPhones, iPads and lots of Android devices. But it has a very different model of drawing on the screen, so I would have to throw away my work and start over. Besides, I wanted to try out Michael Bostock's d3.js visualization library, which plays very nicely with SVG but can't see inside the <canvas> tag.
The solution I eventually stumbled upon strikes me as ridiculous, but it works. Inspired by one of Bostock's example programs, I rebuilt the graphics entirely out of HTML <div> elements. Did the designers of HTML foresee that <div>s might be used in this way? Each <div> has <left>, <top> and <background-color> style properties, and is otherwise empty.
The animation is driven by the d3 Javascript library, which provides a higher-level API than raw Javascript (much like jQuery) and comes with a number of nifty transition effects, in which pixels glide smoothly across the screen and ease into their new positions. Very cool software.
However, the project hit another major snag. Although graphics based on HTML <div>s displayed correctly on various cell-phone browsers and could be manipulated by Javascript, I found that the snazzy d3 transition effects are unbearably slow and jerky on low-power phone CPUs. I was forced to simplify the program for mobile devices, eliminating the transitions. The dumbed-down version is what you see on the screen of your phone if you scan the QR code; you can see the full animation by visiting bit-player.org/sugarpixels with a desktop or laptop computer browser.
—Brian Hayes