Tuesday, August 3, 2010

QR Code hacks: modifying and altering for artistic fun

QR Codes are a quick way to get information with a camera. (Think modern evolution of a UPC Bar Code). Smart phones will scan them for you to quickly get information into your phone, such as a URL to browse, a business card, etc.

I was inspired by the BBC QR Code that intentionally distorts the image to insert the letters "BBC" in the middle. QR Codes have redundant information to offer error correction, and I am amused at the different ways you can abuse this.

First, this is what a QR Code for "http://beautifulpixels.blogspot.com/" looks like unmodified:
"Pure" QR Code:
Now, the experiments:

Simple pixelated distortion in the center (similar to BBC code):
Any image could have just been overlaid, just like plopping a sticker in the middle, but doing it in the pixel grid feels nice.

The idea I like most is using a collage of images that form the QR Code. Where the collage gets the pattern right, there's no need for error correction. But there's slack for the collage to be off a bit. It's very tedious to do, so I only have this partial version, but I'm certain with patience a fully collaged version could be made:

Collage:
The collage might be automated too. Do an image search and then paste in images "fit" to the QR Code target.

There are several ways to play with color, as the scanners will just care about the luminance.

Pixel grid colorization:

Gradient:

High resolution image colorization:

There are several ways to play with the QR Code as conceptually just "dots".

Dots:

Dots merging:

Dots as images:

And on we go, a few more ideas: 
Rounded corners:

Perspective:
I wasn't able to change the perspective to something as extreme as I thought, this was about as far as I could get it.

I also didn't have the patience to create several "natural media" QR Codes. But I thought sand art, pebbles, leaves, etc, done with real world materials would be great. Here's a synthetic Go board (the gaps maintain a valid game state, ;):

Go Board:

And I should show failures too. I had high hopes for a pen sketch, but it doesn't scan. :( I'm convinced it could work, though I think a more even contrast would need to be used.

Ink Sketch:

Except for the last, all of these scanned correctly for me using the ZXing Barcode Scanner 3.3 on my Android phone. Collage clip art included elements from flicker users greekadman, bombardier. 

[Edit:] A Link from the comments that shows a good 'natural media' example:

37 comments:

  1. Hello,

    nice experiments, here's one I made too with QR Code, although the result is not a QR Code meaning anything.

    http://www.xgouchet.fr/blog/public/processing/qrlife.html

    ReplyDelete
  2. I like your work and i speak here : http://bit.ly/dCvfEk

    ReplyDelete
  3. Cool! See also -
    http://www.youtube.com/watch?v=M5lAT3gVzFc

    ReplyDelete
  4. Some nice effects ;)

    -pd

    ReplyDelete
  5. Hello

    Looks very interesting . I'm wondering what king of software did you use.

    ReplyDelete
  6. I used http://zxing.appspot.com/generator/ to create the initial code, and Photoshop to modify the images. The Go board was made with CGoban http://www.gokgs.com/download.jsp

    ReplyDelete
  7. Cool designs. A lot of marketing firms get nervous about how well designer QR codes will work to access mobile landing pages. There's always a risk, so testing and playing with error correction levels is advisable. One company with lots of experience in both areas -- creating designer codes AND testing, mobile site design, etc. -- is Warbasse Design (http://www.warbassedesign.com)

    ReplyDelete
  8. I could read the "Ink Sketch" very easily with EZQR app (from Korean developper)

    ReplyDelete
  9. I was able to read the ink sketch also, but it was a one time deal. I kept rotating my EVO until i found it's sweet spot... which I have yet to be able to duplicate.

    Suggestion, as you try different styles, use different shortened urls so you can track those that manage to get it. :) Kinda helps you see success by someone else. :)

    Awesome fun though. I need to try more as well.

    ReplyDelete
  10. Can you suggest a software or a script to insert logo or other pictures automatically in a QR code?

    Thanks and congratulations, your design is very very cool!

    ReplyDelete
  11. Using Beetagg, I found the pixelgrid colorization, the perspective one, the go board and the Hi res image didn't work, all others worked fine. I guess it may depend upon the scanner/software being used.
    While it may be nice to play with designs, to be effective it may be better to stick to plain vanilla!

    ReplyDelete
  12. Looked interesting, and the simple logo added certainly works reliably it seems, but trying the rest with a variety of devices and software, it seems only the Gradient, Dots, Dots merging and Rounded corners examples worked reliably across all platforms and software.

    Pity, as I was looking forward to seeing lots of really elaborate QR codes on packaging soon.

    ReplyDelete
  13. You've inspired me to try my own hand-drawn QR code, and IT SCANS!

    You've also inspired a bout of insomnia like I haven't seen since college. Oh well. Did I mention IT SCANS!!!???

    http://paparouxindy.com/QR-sketch.png

    ReplyDelete
  14. I'm trying to create my own using the pixel distortion technique in the first example above but seems i may be editing too much.
    How do you figure out the limit of what you can and can't change in the code?

    ReplyDelete
  15. Trial and error. ;) But, also check out the wikipedia link http://en.wikipedia.org/wiki/QR_Code and make sure you aren't modifying the position, alignment, timing, or version codes...

    ReplyDelete
  16. I like the "rounded corners" version. Did you do that manually, or is there a Photoshop filter that can create this result? Thanks!

    ReplyDelete
  17. Rounded corners: take image, add Gaussian blur, then use Image threashold (or just boost contrast a lot, or use curves to do so)

    ReplyDelete
  18. Thanks. I should have thought about that myself.

    Looks very nice. I wanted to print one on my business card, pointing to an online VCF file, but then realised that Android does not know how to handle VCF files. Lame.

    ReplyDelete
  19. Looks like people often use MeCard when encoding in a QR code http://zxing.appspot.com/generator/ http://en.wikipedia.org/wiki/SPARQCode

    ReplyDelete
  20. Thanks that works well!

    ReplyDelete
  21. I just dove into QR code manipulation and found your page helpful. I made an interactive sketch using Processing to do some manipulation. Thanks!

    http://www.markroland.com/project/qr-code

    ReplyDelete
  22. Thanks for sharing your QR code experiments! This opened up my mind to new design possibilities. :)

    ReplyDelete
  23. the last one did scan for me.

    ReplyDelete
  24. How do you make a dotted qr code...,
    i'm interested in making stencils for qr graphiti, and it seems to be the easiest way, to make it happen.

    ReplyDelete
  25. Here you can find a QR Code flash game: QR Pacman.

    http://www.qreativeshirt.com/qr-pacman.html

    As you can see this time the QR Code is already
    dynamic and interactvie.

    Really unique QR Code!

    ReplyDelete
  26. Hi,
    I'd also like to know how you did the dot-style qr codes. If you have the time (or anyone else reading this blog), please give some further instructions.

    Thanks for your time!

    ReplyDelete
  27. How to makes dots:
    - Create QR Code
    - resize image so that one square is e.g. 20x20 pixels.
    - Make a dot that is 20x20 pixels, define it as a pattern
    - Fill a layer with the dot pattern.
    - Composite the QR code and dot pattern layers with a blend mode such as Screen that causes everything to be white except where both layers are black.

    ReplyDelete
  28. Thanks a lot Vincent! That was a REALLY fast reply!

    ReplyDelete
  29. Hi Vincent
    Great codes great ideas thanks for everything i have a question what will be the default size of the code in Photoshop that the each square will 20x20.
    And also can we use any other shape as we use the dot?
    I'll wait for your fast response.
    Thanks

    ReplyDelete
  30. Create the code using e.g. http://zxing.appspot.com/generator/ and it will likely create an image where each QR code square is larger than just 1 pixel. You'll have to magnify the image, take a look, and figure out how big they are.

    You could then resize the image down such that there's one pixels to one QR code square.

    Then resize again up to whatever size you want to have the squares be. E.g. multiply size by 2 and add a zero to have them be 20x20.

    Of course you can use any other shape than a dot, experiment and see what works.

    ReplyDelete
  31. thanks a lot for your response.
    i am now going to try some thing new i'll cut all the squares with different shapes with pen and then color them after that i'll marge all the layers and blending mode to screen will it work?
    Also where from i can get the qr code reader?
    Thanks

    ReplyDelete
  32. it is not working can you tell me how can i change the shape of the blocks not dots i want to change it's corners round or sharp and how can i put the logo on the code some time it works and some time not it's really very interesting but i want to test different things can you send me any psd file of any qr code i want to see what method you use for it?
    PLZZZZZZZZZZZZZZZZZZZZZZ
    here is my email address. khan_t112@yahoo.com

    ReplyDelete
  33. We made this :)

    http://youtu.be/56ghseE8Vf4

    ReplyDelete
  34. Do it online :)

    www.unitaglive.com/qrcode
    qrcode.kaywa.com
    www.the-qrcode-generator.com
    goqr.me
    keremerkan.net/qr-code-and-2d-code-generator/
    www.qrstuff.com
    www.patrick-wied.at/static/qrgen/
    www.qrhacker.com

    ReplyDelete
  35. http://radiolg.blogspot.co.uk/2012/01/el-smartphone-para-situacion-de-calle.html
    Did you do it? Or someone took your QR code for it?

    By the way.. the Go QR Code is simply amazing!

    ReplyDelete
  36. nice, i made photoshop actions to customize codes, you can download them here: http://bit.ly/QRactions

    ReplyDelete