Center for Civic Media meetings start with an icebreaker question: you introduce yourself, and tell us whether you prefer pirates or ninjas, homemade or canned cranberry sauce. You offer your favorite protest chant or tell us what percent (“I am the 99%”) you identify with. Yesterday, on seeing two of Civic’s finest dressed in argyle, I asked people to propose a Civic Media dress code.
The suggestions were wide-ranging and included Jeff Warren’s suggestion of facial tattoos that serve as achievement badges, Nathan Matias’s proposed adoption of Madeline Albright’s “pin code” and Molly Sauter offered a suggestion for remixable, snarky t-shirts.
My favorite suggestion was Lorrie LeJeune’s proposal of a Civic media tartan. (Since Lorrie weaves and spins, as well as writes, edits, makes jewelry, builds guitars and plays mandolin, it’s possible she is weaving a Civic tartan right now.) It was widely observed that we needn’t select a single tartan – instead, we could create a set of tartans that functioned like QR codes, encoding information for anyone capable of comprehending the code.
I’m home sick today, feeling like the cold I’m fighting is perfectly justified given my travel and sleep schedule this fall. (Spontaneous human combustion would also likely have been an appropriate bodily response to the strains of this fall.) So I’ve had some time to think about how we might actually implement a Civic tartan code.
First, some quick comments on QR codes:
– They’re very cool. It’s wonderful that Densu Wave in 1994 figured out such a compact way to encode a surprisingly large amount of data into machine readable form. And there are certainly lots of clever ways to use them, not just for labeling auto parts, but for bridging between the real and digital worlds, tagging physical objects and spaces with unique identifiers and URLs. (See Civic’s Timenesia project for one cool way to use QR codes to tag reality.)
– They’re ugly as sin, and also something of a fashion statement. Commenting on posters from a recent Occupy rally, Sasha Constanza-Chock noted that QR codes on many of the posters and wondered – since most of the codes translate as URLs – whether it wouldn’t be easier simply to put the human-readable URLs on the posters instead. “It seems like the QR code primarily signifies you as the sort of person technologically sophisticated enough to be using QR codes”
There’s a certain charm to having codes that are machine-readable but not human readable, I guess – you can wear http://goatse.cx on your shirt and disturb anyone foolish enough to read the code with their phone. But I suspect fashion statements like haute couture bodices decorated with QR codes are the sort of idea with very little staying power.
– They’re killing kittens. As Scott Stratten explains in this helpful video, most QR codes are misused, and each time designers misuse them, a kitten dies. It’s time we think of the kittens.
Embedding data into physical spaces is a cool idea. But it would be great if we could do so in a way that’s pretty, and at least partially human readable.
Like tartans. Prior to the 19th century, tartans were associated with different regions of Scotland, colored using local dyes to local weaver’s preferences. After the publication of the (wholly fictional) Vestiarium Scoticum in 1842, tartans became associated with specific clans, and it became possible to identify members of some families by the particular tartan they wore. Military units and businesses have created specific tartans, as do most US states, and there are now between 7000 and 14,000 “registered” tartans available.
The Bay State tartan, my state’s official plaid. You may now understand why I prefer my clan tartan.
It’s pretty obvious from looking at a tartan that you’ve got the potential to store a great deal of information within the design of the pattern. The Bay State tartan features 24 stripes before repeating. Each can be a different width and color. With a couple dozen colors to choose from, and stripes ranging from one to 64 stitches, you’ve got 36,864 patterns, or slightly more than 15 bits of information. All well and good, but not enough information to encode a URL.
QR codes can include URLs stored as alphanumeric characters – the QR codes we see most often can support 35-77 alphanumeric characters. That’s a lot of data – ~8.9×10^108 possible combinations, which would require either really wide tartans, or very subtle color variations. The problem is more tractable if we try to represent a shortened URL, using a service like is.gd or bit.ly. Yes, this means our tartan scanner will need to detect color and stripe width, then consult bit.ly before using the domain name service to resolve our website… but remember, QR readers are using the DNS system to turn their codes into websites, in part because encoding IP addresses doesn’t work well anymore now that a site can support thousands of independent domains.
bit.ly produces URLs that look like this: http://bit.ly/t658ko – that URL leads to Center for Civic Media at http://civic.mit.edu. To slightly oversimplify, the service turns each URL it encounters into the next of a sequence of numbers. Rather than use decimal numbers, they use a base-62 system (0-9, A-Z, a-z), which allows them to represent almost 57 billion numbers with only six characters. 57 billion is vastly smaller than the total number of possible URLs, but in practical terms, it works because people haven’t used the service 57 billion times.
Now we just need something capable of producing 57 billion different tartans.
Enter Tartanmaker.com. This lovely online service allows you to design simple tartans to be used as backgrounds for your webpages. You can create three stripes of width from 1-10, using hexadecimal notation to specify colors. That gives you 167 million or so options per stripe (256^3 colors times 10 widths), or roughly 4.722 x 10^24 possible tartans. While that more than satisfies our information needs, most of those colors are going to be too subtle for the human eye to distinguish.
Turns out we can solve our problem using only websafe colors. With three stripes chosen from 216 websafe colors, we get almost 10 billion combinations. Tartanmaker offers us two other options – three thread widths (which basically scale the pattern) and two orientations (horizonal versus diagonal), which bring us up to over 59 billion combinations, just what we need to represent bit.ly URLs.
If we actually wanted to do this, we’d need a good algorithm to map bit.ly’s base-62 numbers to a combination of 3 thread sizes, 2 orientations, and three stripes, each of 216 colors and 10 widths. We might get very clever and figure out how to have tartans darken over time, using darker colors as we move through our list of unique identifiers. And we’d need Tartanmaker to offer an API so we could take an URL, call bit.ly, then call Tartanmaker and produce appropriate outputs. Finally, for this to actually be useful, we’d need to program a webcam to distinguish between color shades and stripe widths.
But it makes me deeply happy to know that Civic Media tartan could exist, and could lead an appropriately equipped smartphone to our site. And it makes me want to build a tartan translator, if only to figure out what URLs I’m advertising when I wear my flannel shirts.
If we’re going to ask Tartanmaker to produce an API, we might as well also try to convince the print-on-demand fabric company Spoonflower to develop an API as well, so we can have print on demand Civic Tartan.
One concern I might have is that tartan codes would be much harder to write software which processes it (QR codes, being monochrome and extremely regular, are reasonably easy to write for.)
Nathan, I _was_ secretly hoping you might write something that decoded the strings Tartanmaker uses and write an algorithm to translate from base 62 to tartan. But I like the idea of bringing it even further into reality with Spoonflower.
Edward, I wonder what the color sensitivity of different cameras is. Microsoft is promoting some sort of MR code that uses multiple colors – how many colors could we support and still be easily machine readable?
@Edward @Nathan Travis pointed me over to this blog post and I heard about this concept through other means. I’ve actually started a lot of work writing decoders (in android, actionscript) which process markers in a screen. It’s tough but completely doable. Travis and I worked on a project which did a superset of whats there:
I started to conceptualize some new thoughts around that project recently and was super excited coming across this
Very cool, Grace. Hope you’ll come over to our group and tell us about what you’ve learned.
Pingback: Sunday Miscellanea | Then again, I might be wrong
See also SnapTags, which use a code ring and leave space in the centre open for an aesthetically pleasing design (or brand).
I’m a little confused by your calculation. 64 widths of 24 colors gives you 1536 combinations (~10 bits per stripe), but the total number of bits for 24 stripes would be 240 bits, giving you 30 characters to work with. Going to a full 216 colors gives you 13 or so bits per stripe, for 39 characters.
Bit.ly can represent 62^6 values which is only about 36 bits. If we allow 8 widths and 8 colors, we get 6 bits per stripe and can represent 36 bits in 6 stripes. We can go up to 8 stripes to allow for not knowing the starting point or the direction (phone might be upside down). And we go up to 10 colors to guarantee that an given stripe doesn’t match the ones on either side. But 10 colors with 8 widths and 8 stripes should handle bit.ly fine and be phone readable I would think.
Of course without the additional stripes and widths, the result may well be back to being ugly (much like Microsoft’s Tag barcodes, which are hideous).
Honestly, without some restrictions, it is the widths that concern me more than the colors. How can my phone tell a 1-2-1-2 etc. from 3-6-3-6 etc. without a baseline of some sort?
Btw, the tartanmaker strings are just base64 coded. For example:
#566B00 with a width a 5
#000000 with a width of 6
#4497A6 with a width of 2
thread size is 2
and the tartan is displayed diagonally (change t to 1 for horizontal)
I’m wondering if there is a way to reverse the process a bit. I already have lots of flannel’s i like. If i could take a picture of the basic pattesrn, teach a program to recognize it and then “tag” it with my own url that would be awesome. people could then later interact with the pattern a lo QR codes.
I think this would create quite a rush to adopt the technology as people race to tag their existing shirts.
It might also allow for some interesting activism going to stores like the gap and tagging their shirts.