QR Code Hacking

While there is considerable debate whether or not QR Codes will “catch on”, they are beginning to show up in more and more places. Although a code can store as many as 4,096 characters of text in any format, QR codes are most commonly used to provide easy access to a web address. It makes sense, anything beyond a basic domain name is a pain for people to enter themselves, and while many services exist to alias URLs into shorter paths, the result is hardly user friendly.

Still, to many designers at least, QR codes are generic and ugly. Someone realized that QR codes implement error correction and that means that a certain amount of the data can be corrupted without losing effectiveness. For a long time, it was largely a trial and error process of deleting sections and seeing if it was still readable. Odds could be increased by padding the code out with additional data. But there is another way to better your odds. The secret was explained to me in this great blog post.

Here is the process I followed to create one for Artifacture. First, I created a QR code using one of the many websites devoted to offering that service. I used BeQRious.com.

First, certain regions of the QR code are reserved. The red shading is devoted to alignment of the scan. The green and blue shaded areas tell the scanner other details including the size of the code, the encoding version, etc. Nothing can interfere with these areas without making the code unreadable.

The balance of the code is composed of small squares. Those squares are divided into groups of 8 (bits), or 1-byte of data. The bytes are read beginning at the bottom-right corner and read up and then down, right-to-left. The bits are initially arranged in a 2×4 grid and stay in that arrangement until the reserved areas are encountered. Then the bits have to shift around to fit. The bytes are shown as various shades of gray. in the diagram below.

If we lay that diagram over our QR code, we can see how the data is divided up. The key to removing data is to understand that once you remove one bit in a byte, it’s corrupt, so you may as well remove all 8 bits.

Going back to our map so it’s easier to see, our goal is to pick the areas to remove that represent as few bytes as possible. Here I put in a part of our logo. After some experimentation, I arrived at this arrangement. You can see where I positioned it just right to retain the light gray and medium gray bytes at the top-middle of our logo.

I tried having it read without erasing the data behind the logo, but it didn’t work. So I marked out the area to fill white. For aesthetic reasons, I didn’t white out the whole bytes in all cases. It doesn’t matter, as it knows where they should be, and once some is gone, the whole byte is invalid.

Here we’ve filled the background with white.

Here we put the QR code back in.

And lastly, we turn off the mapping layers to get the final product.