0xrory / living_qr_code

A QR code that appears to be entirely composed of your webcam video — and yet remains scannable!

Living QR code

A QR code that appears to be entirely composed of your webcam video — and yet remains scannable!

Live demo: https://openprocessing.org/sketch/2289887

This Processing script shows a 29x29-squares QR code where a video is shown in between the necessary squares. This works because the squares that make up the QR code actually consist of 3x3 smaller squares. Only the middle one is needed for the QR code to work.

You can also watch my demo at Hackaday Berlin 2024 for an explanation.

(The Processing version works a bit better than the P5 version you see in the live demo; see my notes on that.)

Making the base QR code

The base QR code pattern is stored in a PNG file called blank_qr_code.png. The pixels in that image tell this script which squares should appear larger (without those the QR code would not scan correctly).

The actual data for the QR is created using an online service. There are several that will let you create QR codes for free. Goqr.me will let you output QR codes as vector images, which you can then convert to a tiny PNG file.

The script expects the QR code to have a size of 29x29 squares (QR code version 3). To get that from Goqr.me, you have to enter at least 33 characters. If necessary, pad the url with spaces. Click on 'Download', set border to 0, leave everything else as-is, then under 'Download QR Code as' click on 'SVG'.

Using Inkscape: open the SVG, File > Export, set width and height both to 29 in the Document tab, set the filetype to PNG at the bottom there, choose a name and set the destination folder to the data folder for the Processing script and click 'Export'. You may need to uncheck 'Hide Export Settings' and set 'antialias' to 0 in the export settings window that pops up.

To do

This is my wishlist of thing I'd like to add:

• full screen video (with the QR code in the middle)
• use Processing to generate a QR code
• try out how well this works with different QR versions, so bigger than 29x29
• showing a different QR code depending on what is in view
• use pre-made effects as overlay. I'm thinking large marquee text scrolling by.
• colour! (HSL palette should make it possible to have colours that have high enough contrast)

Thanks

I had the idea for using live video in QR codes when I saw this QR code published by someone named Repeated Failure. (More info here.)

I based the script on Mirror 2 by Daniel Shiffman, where pixels from the video source are drawn as rectangles with a size based on their brightness. (See Dan's tutorial on live video.)

The dithering is handled by Julian Hespenheide's dithering class for Processing.

The photo on this page was made by Aldo Hoeben, demonstrating the living QR code. Both his amazing artworks and my living QR code were part of the Raspberry Pi Jam I organised in The Hague in January 2024. Yes, the Processing script with the QR code runs on a Raspberry Pi 5!