Samenvatting: QR-code Kunst
Dit artikel analyseert hoe men QR-codes kan transformeren van puur functionele zwart-witte blokken naar visuele kunstwerken, zonder de scannabiliteit te verliezen.
De Anatomie van een QR-code Om artistieke vrijheden te kunnen nemen, moet men eerst de structuur begrijpen. Cruciale elementen zijn:
- Zoekpatronen: De grote vierkanten die de oriëntatie en afmetingen bepalen.
- Uitlijnings- en timingpatronen: Hulpmiddelen om vervorming te corrigeren en rijen/kolommen uit te lijnen.
- Data en Foutcorrectie: De kerninhoud, die gebruikmaakt van Reed-Solomon-foutcorrectie. Dit stelt ontwerpers in staat om een percentage van de pixels (tot 30%) aan te passen of te maskeren zonder dat de code onleesbaar wordt.
Artistieke Methoden De auteur onderscheidt verschillende benaderingen voor het creëren van visueel aantrekkelijke codes:
- Afbeeldingscombinaties: Het plaatsen van QR-pixels als stippen of camouflage over een bestaande afbeelding.
- Intrinsieke manipulatie: Het aanpassen van de data zelf door misbruik te maken van padding, foutcorrectie of URL-anchors.
- Designtechnieken: Het gebruik van 'forgery' (vervangen van blokken), handgetekende SVG-stijlen (via
roughjs) en animaties.
Detectie versus Scannen Een belangrijk technisch onderscheid is dat smartphones eerst een code moeten detecteren voordat ze deze kunnen scannen. Hierdoor is hoog contrast en een herkenbare vorm essentieel voor een goede gebruikerservaring. De auteur concludeert dat voor commerciële doeleinden eenvoudige ontwerpen prevaleren, terwijl artistieke experimenten vooral geschikt zijn voor niche-toepassingen.
QR-codes maken: Een diepe duik in QR-code kunst
Reguliere zwart-witte QR-codes zijn echter slechts het topje van de ijsberg. Veel mensen willen iets gepersonaliseers dat past bij hun merk, wat vaak gebeurt door simpelweg een logo in het midden te plaatsen. Dit is mogelijk omdat QR-codes, net als cd's en dvd's, gebruikmaken van Reed-Solomon-foutcorrectie om beschadigde informatie te herstellen.
Dit kan met smaak worden uitgevoerd, maar het kan ook lui worden gedaan. QR-codes worden vaak klein weergegeven, waardoor onleesbare logo's de norm zijn. Bovendien vereist meer foutcorrectie een dichtere code met kleinere pixels. Als je niet voorzichtig bent, eindig je met iets dat zowel lelijk als onmogelijk te scannen is.
Is er een manier om een prachtige én scanbare QR-code te maken? Ja, en dat is het onderwerp van dit artikel.
Het landschap van artistieke QR-codes
Laten we eerst kijken naar wat er mogelijk is.
Sommigen hebben foto's in de gehele code verwerkt, maar er is een duidelijke afweging tussen beeldkwaliteit en bruikbaarheid. Voorbeelden hiervan zijn:
- QArt Codes
- Halftone QR Codes (2013)
- QRpicture
- Burger King VMA-commercials
Voor maximaal stijleffect kunnen kunstenaars volledig op maat gemaakte QR-codes met de hand ontwerpen. Voorbeelden hiervan zijn te vinden bij:
- QRcanvas
- 2012 MTS Calendar Am I Collective
- Elkoy Artists Collective
Er is tegenwoordig ook AI voor beschikbaar (zoals Stable Diffusion). In plaats van voorbeelden te tonen, volgt hier een gedicht:
Ik zal uw vermoeide ogen niet belasten, noch het wereldwijde web verder verzwaren, met pagina's uit dit Babeliaanse plaatjesboek. Dit is geen plek van eer, er zitten dertien vingers aan haar, anime-meisje grote borsten oud rome.
Een interessante richting is om simpelweg te veranderen hoe de zwarte en witte vierkantjes worden weergegeven (bijvoorbeeld via QRBTF).
Geïnspireerd door deze technieken heb ik zelf een designtool gemaakt, beschikbaar op qrframe.kylezhe.ng. Deze bevat presets die eenvoudig kunnen worden aangepast of vanaf nul kunnen worden gemaakt met Javascript.
Om echt te begrijpen waar en waarom we creatieve vrijheden kunnen nemen, moeten we beginnen bij de structuur en het scanproces van QR-codes.
De anatomie van een QR-code
Een QR-code bestaat uit verschillende onderdelen:
Zoekpatronen (Finder patterns)
Dit zijn de grote vierkanten in drie hoeken. Ze worden gebruikt om de oriëntatie, afmetingen en het perspectief van de code te bepalen. De verhouding van zwarte en witte pixels door het centrum is cruciaal (ongeveer 1:1:3:1:1), waardoor de exacte hoeken minder essentieel zijn. Om de detectie te helpen, hebben zoekpatronen een separator of "stille zone" (quiet zone) om zich heen nodig, hoewel deze niet een specifieke grootte hoeft te hebben.
Uitlijningspatronen (Alignment patterns)
Dit zijn kleinere vierkantjes die worden gebruikt om vervorming te corrigeren. Meestal bevindt zich één in de laatste hoek; de kleinste QR-codes hebben er geen, terwijl zeer grote codes er meerdere hebben.
Timingpatronen (Timing patterns)
Dit zijn de horizontale en verticale banen van afwisselende zwarte en witte pixels. Ze helpen bij het uitlijnen van rijen en kolommen tijdens het decoderen. In de praktijk zijn timingpatronen en uitlijningspatronen niet strikt noodzakelijk; een QR-code scant meestal prima zonder deze (hoewel het uitlijningspatroon rechtsonder vooral bij grotere formaten wel helpt).
Formaat- en versie-informatie
- Formatinformatie: Slaat het niveau van foutcorrectie en het toegepaste maskerpatroon op. Er is één kopie linksboven, en een tweede kopie verdeeld over rechtsboven en linksonder.
- Versie-informatie: Zeer grote QR-codes hebben een sectie voor versie-informatie (grootte), variërend van 1 tot 40. Eén kopie staat rechtsboven, de andere linksonder. Bij kleinere codes kan de grootte nauwkeurig worden berekend aan de hand van de afstand tussen de zoekpatronen.
Data en foutcorrectie
De resterende ruimte is voor de data. Verrassend genoeg begint de data rechtsonder en zigzagt deze omhoog en omlaag, van rechts naar links.
De bits zijn georganiseerd in blokken van 8 (bytes). Als het aantal datapixels niet deelbaar is door 8, blijven de laatste pixels ongebruikt.
Er zijn vier niveaus van foutcorrectie, waardoor ongeveer 7%, 15%, 25% of 30% van alle bytes hersteld kan worden. Een hoger niveau van foutcorrectie vermindert de beschikbare datacapaciteit.
De data begint met een header en wordt opgevuld om de ongebruikte capaciteit te vullen. Bij grotere codes worden de databytes "interleaved" (onderling vermengd), zodat ze verspreid over de ruimte staan in plaats van aaneengesloten.
Encoding-modi: De data-header beschrijft de encoding-modus en het aantal tekens. Voor URL's is de Byte-modus (UTF-8) de enige relevante optie. Hoewel de Alphanumerieke modus URL's kan coderen, ondersteunt deze alleen hoofdletters, waardoor deze in de praktijk niet wordt gebruikt.
Het Masker: Tot slot wordt een van de 8 maskerpatronen via een XOR-bewerking met de data gecombineerd om ongewenste pixelpatronen (zoals vormen die lijken op de zoekpatronen) te doorbreken.
Overig
QR-codes kunnen worden gedraaid, gespiegeld, en de "donkere" en "lichte" pixels kunnen worden omgedraaid (inversie).
Kernpunt voor artistieke QR-codes: de zoekpatronen moeten de juiste vorm hebben, en de rest van de code moet simpelweg donker of licht genoeg zijn op de juiste plek.
Gemak tegen een prijs: Detectie versus Scannen
Er is een belangrijk addertje onder het gras: het verschil tussen detectie en scannen.
Multifunctionele scanners (zoals de standaard camera-app van een smartphone) moeten eerst een QR-code detecteren voordat er een scanpoging wordt gedaan. Smartphones zijn veel kieskeuriger dan eenvoudige, altijd actieve scanners. De code moet "lijken op een QR-code" voor het computer vision-model op het apparaat.
Een vuistregel is om solide kleuren met hoog contrast te gebruiken en een goede balans te bewaren tussen donkere en lichte pixels. Er is echter geen alternatief voor testen met echte apparaten.
Methoden voor artistieke QR-codes
1. Een bestaande QR-code combineren met een afbeelding
Het basisidee is om zwarte en witte QR-pixels over een willekeurige afbeelding te plaatsen.
- Puntenmethode: Plaats stippen in het centrum van elke pixel. Een stip van minstens 1/3 van de breedte en hoogte van een pixel is meestal voldoende.
- Licht/Donker-methode: Naast een centrale stip kun je de gehele pixel gedeeltelijk lichter of donkerder maken.
- Camouflage: Door de afbeelding te downscalen, pixel art te gebruiken, dithering toe te passen of het kleurenpalet te beperken (quantization), kan de centrale stip onzichtbaar worden gemaakt.
- Woordwolken: Hierbij worden de overlay-stippen gebruikt in een tussenstap om een tekst-vervormingsalgoritme aan te sturen.
- Animatie: Dit is eenvoudig omdat dezelfde stip-overlay op elk frame kan worden getekend.
2. QR-codes creëren met een intrinsieke afbeelding
In plaats van een afbeelding over een code te leggen, kun je de data manipuleren zodat de afbeelding in de data zelf verschijnt.
Misbruik van Padding Voor een QR-code van een bepaalde grootte is er een vaste hoeveelheid ruimte voor het bericht en de foutcorrectie. Als het bericht te kort is, wordt het opgevuld met willekeurige data (padding). Door deze padding in te stellen, krijg je volledige controle over het middelste gedeelte van de code.
Misbruik van Foutcorrectie Elke twee bytes aan foutcorrectie bieden genoeg informatie om één foutieve byte op een onbekende locatie te herstellen. Dit is de simpelste vorm van QR-kunst: pas pixels aan binnen de limiet van de foutcorrectie. Hoewel dit inefficiënt is (2 bytes overhead per gewijzigde byte), is er geen beperking op waar de pixels veranderd kunnen worden.
Andere technieken:
- URL Anchors: Door gebruik te maken van anchors (bijv.
test.com#anchor), die door browsers worden genegeerd, kan men pixels manipuleren.
- Input-manipulatie: Sommige tools laten je de gewenste output-data tekenen, die vervolgens wordt geïnterpreteerd als onderdeel van de input-tekst (bijv. via een redirect-service).
Niet-beeldtechnieken
Hieronder volgen enkele benaderingen gebaseerd op design en code:
- Forgery (Nabootsing): Het vervangen van 2x2 blokken zwart-wit pixels door grotere, gekleurde vierkanten. Dit is eenvoudig te coderen en een veelgebruikte tactiek.
- Stilering: Het vergroten van de stipgrootte en dichtheid (vooral bij de zoekpatronen) en het toevoegen van donkere schaduwen tussen de stippen om het contrast te verhogen.
- Handgetekende digitale stijl: Met behulp van libraries zoals
roughjs kunnen handgetekende SVG's worden gemaakt. Hierbij is de grens tussen "niet detecteerbaar" en "betrouwbaar scanbaar" erg dun; solide kleuren en hoog contrast blijven essentieel.
- Museum-mozaïeken: Het is mogelijk om de zoekpatronen aan te passen, mits de kernvorm (zoals een kruisvorm) in voldoende mate behouden blijft.
- Animatie via schaling: In plaats van pixels te veranderen, kan men de schaal van pixels variëren, waarbij het centrale derde deel van elke pixel altijd de juiste kleur behoudt.
Hoe zit het met de gebruikers?
De harde waarheid is: je zou deze technieken waarschijnlijk niet moeten gebruiken voor commerciële doeleinden. Een QR-code moet voor gebruikers direct herkenbaar zijn. Een saai ontwerp, eventueel met een logo in het midden, is de beste optie voor usability. Maar als er toch niemand je codes scant, kun je net zo goed uitpakken.
---
Terzijde (Random Tangents)
- Encoding-modi: Hoewel de standaard verschillende modi voorschrijft (Numeriek, Alphanumeriek, etc.), gebruikt vrijwel iedereen in de praktijk alleen de Byte-modus (UTF-8). Modi zoals Kanji worden nauwelijks ondersteund.
- Maskerselectie: Het proces om het beste masker te kiezen is vrij arbitrair. Hoewel er scoringsvoorwaarden zijn, werken alle acht de maskers in de praktijk meestal prima.
- Propriëtaire codes: Het is interessant dat platforms zoals TikTok, Snapchat en Instagram hun eigen custom codes (TikCode, Snapcode, Nametag) inmiddels hebben vervangen door gestileerde QR-codes.
Nuttige bronnen:
thonky.com/qr-code-tutorial: Uitstekende bron voor de wiskunde achter foutcorrectie.segno: Een van de weinige generatoren die Kanji-modus ondersteunt.qrmosaics.art en ineoscan.com/qrcodefactory1: Galleries met 3D QR-kunst.QRazyBox: Een tool voor het herstellen/decoderen van beschadigde QR-codes.
QR-codes maken: Een diepe duik in QR-code kunst
Reguliere zwart-witte QR-codes zijn echter slechts het topje van de ijsberg. Veel mensen willen iets gepersonaliseers dat past bij hun merk, wat vaak gebeurt door simpelweg een logo in het midden te plaatsen. Dit is mogelijk omdat QR-codes, net als cd's en dvd's, gebruikmaken van Reed-Solomon-foutcorrectie om beschadigde informatie te herstellen.
Dit kan met smaak worden uitgevoerd, maar het kan ook lui worden gedaan. QR-codes worden vaak klein weergegeven, waardoor onleesbare logo's de norm zijn. Bovendien vereist meer foutcorrectie een dichtere code met kleinere pixels. Als je niet voorzichtig bent, eindig je met iets dat zowel lelijk als onmogelijk te scannen is.
Is er een manier om een prachtige én scanbare QR-code te maken? Ja, en dat is het onderwerp van dit artikel.
Het landschap van artistieke QR-codes
Laten we eerst kijken naar wat er mogelijk is.
Sommigen hebben foto's in de gehele code verwerkt, maar er is een duidelijke afweging tussen beeldkwaliteit en bruikbaarheid. Voorbeelden hiervan zijn:
- QArt Codes
- Halftone QR Codes (2013)
- QRpicture
- Burger King VMA-commercials
Voor maximaal stijleffect kunnen kunstenaars volledig op maat gemaakte QR-codes met de hand ontwerpen. Voorbeelden hiervan zijn te vinden bij:
- QRcanvas
- 2012 MTS Calendar Am I Collective
- Elkoy Artists Collective
Er is tegenwoordig ook AI voor beschikbaar (zoals Stable Diffusion). In plaats van voorbeelden te tonen, volgt hier een gedicht:
Ik zal uw vermoeide ogen niet belasten, noch het wereldwijde web verder verzwaren, met pagina's uit dit Babeliaanse plaatjesboek. Dit is geen plek van eer, er zitten dertien vingers aan haar, anime-meisje grote borsten oud rome.
Een interessante richting is om simpelweg te veranderen hoe de zwarte en witte vierkantjes worden weergegeven (bijvoorbeeld via QRBTF).
Geïnspireerd door deze technieken heb ik zelf een designtool gemaakt, beschikbaar op qrframe.kylezhe.ng. Deze bevat presets die eenvoudig kunnen worden aangepast of vanaf nul kunnen worden gemaakt met Javascript.
Om echt te begrijpen waar en waarom we creatieve vrijheden kunnen nemen, moeten we beginnen bij de structuur en het scanproces van QR-codes.
De anatomie van een QR-code
Een QR-code bestaat uit verschillende onderdelen:
Zoekpatronen (Finder patterns)
Dit zijn de grote vierkanten in drie hoeken. Ze worden gebruikt om de oriëntatie, afmetingen en het perspectief van de code te bepalen. De verhouding van zwarte en witte pixels door het centrum is cruciaal (ongeveer 1:1:3:1:1), waardoor de exacte hoeken minder essentieel zijn. Om de detectie te helpen, hebben zoekpatronen een separator of "stille zone" (quiet zone) om zich heen nodig, hoewel deze niet een specifieke grootte hoeft te hebben.
Uitlijningspatronen (Alignment patterns)
Dit zijn kleinere vierkantjes die worden gebruikt om vervorming te corrigeren. Meestal bevindt zich één in de laatste hoek; de kleinste QR-codes hebben er geen, terwijl zeer grote codes er meerdere hebben.
Timingpatronen (Timing patterns)
Dit zijn de horizontale en verticale banen van afwisselende zwarte en witte pixels. Ze helpen bij het uitlijnen van rijen en kolommen tijdens het decoderen. In de praktijk zijn timingpatronen en uitlijningspatronen niet strikt noodzakelijk; een QR-code scant meestal prima zonder deze (hoewel het uitlijningspatroon rechtsonder vooral bij grotere formaten wel helpt).
Formaat- en versie-informatie
- Formatinformatie: Slaat het niveau van foutcorrectie en het toegepaste maskerpatroon op. Er is één kopie linksboven, en een tweede kopie verdeeld over rechtsboven en linksonder.
- Versie-informatie: Zeer grote QR-codes hebben een sectie voor versie-informatie (grootte), variërend van 1 tot 40. Eén kopie staat rechtsboven, de andere linksonder. Bij kleinere codes kan de grootte nauwkeurig worden berekend aan de hand van de afstand tussen de zoekpatronen.
Data en foutcorrectie
De resterende ruimte is voor de data. Verrassend genoeg begint de data rechtsonder en zigzagt deze omhoog en omlaag, van rechts naar links.
De bits zijn georganiseerd in blokken van 8 (bytes). Als het aantal datapixels niet deelbaar is door 8, blijven de laatste pixels ongebruikt.
Er zijn vier niveaus van foutcorrectie, waardoor ongeveer 7%, 15%, 25% of 30% van alle bytes hersteld kan worden. Een hoger niveau van foutcorrectie vermindert de beschikbare datacapaciteit.
De data begint met een header en wordt opgevuld om de ongebruikte capaciteit te vullen. Bij grotere codes worden de databytes "interleaved" (onderling vermengd), zodat ze verspreid over de ruimte staan in plaats van aaneengesloten.
Encoding-modi: De data-header beschrijft de encoding-modus en het aantal tekens. Voor URL's is de Byte-modus (UTF-8) de enige relevante optie. Hoewel de Alphanumerieke modus URL's kan coderen, ondersteunt deze alleen hoofdletters, waardoor deze in de praktijk niet wordt gebruikt.
Het Masker: Tot slot wordt een van de 8 maskerpatronen via een XOR-bewerking met de data gecombineerd om ongewenste pixelpatronen (zoals vormen die lijken op de zoekpatronen) te doorbreken.
Overig
QR-codes kunnen worden gedraaid, gespiegeld, en de "donkere" en "lichte" pixels kunnen worden omgedraaid (inversie).
Kernpunt voor artistieke QR-codes: de zoekpatronen moeten de juiste vorm hebben, en de rest van de code moet simpelweg donker of licht genoeg zijn op de juiste plek.
Gemak tegen een prijs: Detectie versus Scannen
Er is een belangrijk addertje onder het gras: het verschil tussen detectie en scannen.
Multifunctionele scanners (zoals de standaard camera-app van een smartphone) moeten eerst een QR-code detecteren voordat er een scanpoging wordt gedaan. Smartphones zijn veel kieskeuriger dan eenvoudige, altijd actieve scanners. De code moet "lijken op een QR-code" voor het computer vision-model op het apparaat.
Een vuistregel is om solide kleuren met hoog contrast te gebruiken en een goede balans te bewaren tussen donkere en lichte pixels. Er is echter geen alternatief voor testen met echte apparaten.
Methoden voor artistieke QR-codes
1. Een bestaande QR-code combineren met een afbeelding
Het basisidee is om zwarte en witte QR-pixels over een willekeurige afbeelding te plaatsen.
- Puntenmethode: Plaats stippen in het centrum van elke pixel. Een stip van minstens 1/3 van de breedte en hoogte van een pixel is meestal voldoende.
- Licht/Donker-methode: Naast een centrale stip kun je de gehele pixel gedeeltelijk lichter of donkerder maken.
- Camouflage: Door de afbeelding te downscalen, pixel art te gebruiken, dithering toe te passen of het kleurenpalet te beperken (quantization), kan de centrale stip onzichtbaar worden gemaakt.
- Woordwolken: Hierbij worden de overlay-stippen gebruikt in een tussenstap om een tekst-vervormingsalgoritme aan te sturen.
- Animatie: Dit is eenvoudig omdat dezelfde stip-overlay op elk frame kan worden getekend.
2. QR-codes creëren met een intrinsieke afbeelding
In plaats van een afbeelding over een code te leggen, kun je de data manipuleren zodat de afbeelding in de data zelf verschijnt.
Misbruik van Padding Voor een QR-code van een bepaalde grootte is er een vaste hoeveelheid ruimte voor het bericht en de foutcorrectie. Als het bericht te kort is, wordt het opgevuld met willekeurige data (padding). Door deze padding in te stellen, krijg je volledige controle over het middelste gedeelte van de code.
Misbruik van Foutcorrectie Elke twee bytes aan foutcorrectie bieden genoeg informatie om één foutieve byte op een onbekende locatie te herstellen. Dit is de simpelste vorm van QR-kunst: pas pixels aan binnen de limiet van de foutcorrectie. Hoewel dit inefficiënt is (2 bytes overhead per gewijzigde byte), is er geen beperking op waar de pixels veranderd kunnen worden.
Andere technieken:
- URL Anchors: Door gebruik te maken van anchors (bijv.
test.com#anchor), die door browsers worden genegeerd, kan men pixels manipuleren.
- Input-manipulatie: Sommige tools laten je de gewenste output-data tekenen, die vervolgens wordt geïnterpreteerd als onderdeel van de input-tekst (bijv. via een redirect-service).
Niet-beeldtechnieken
Hieronder volgen enkele benaderingen gebaseerd op design en code:
- Forgery (Nabootsing): Het vervangen van 2x2 blokken zwart-wit pixels door grotere, gekleurde vierkanten. Dit is eenvoudig te coderen en een veelgebruikte tactiek.
- Stilering: Het vergroten van de stipgrootte en dichtheid (vooral bij de zoekpatronen) en het toevoegen van donkere schaduwen tussen de stippen om het contrast te verhogen.
- Handgetekende digitale stijl: Met behulp van libraries zoals
roughjs kunnen handgetekende SVG's worden gemaakt. Hierbij is de grens tussen "niet detecteerbaar" en "betrouwbaar scanbaar" erg dun; solide kleuren en hoog contrast blijven essentieel.
- Museum-mozaïeken: Het is mogelijk om de zoekpatronen aan te passen, mits de kernvorm (zoals een kruisvorm) in voldoende mate behouden blijft.
- Animatie via schaling: In plaats van pixels te veranderen, kan men de schaal van pixels variëren, waarbij het centrale derde deel van elke pixel altijd de juiste kleur behoudt.
Hoe zit het met de gebruikers?
De harde waarheid is: je zou deze technieken waarschijnlijk niet moeten gebruiken voor commerciële doeleinden. Een QR-code moet voor gebruikers direct herkenbaar zijn. Een saai ontwerp, eventueel met een logo in het midden, is de beste optie voor usability. Maar als er toch niemand je codes scant, kun je net zo goed uitpakken.
---
Terzijde (Random Tangents)
- Encoding-modi: Hoewel de standaard verschillende modi voorschrijft (Numeriek, Alphanumeriek, etc.), gebruikt vrijwel iedereen in de praktijk alleen de Byte-modus (UTF-8). Modi zoals Kanji worden nauwelijks ondersteund.
- Maskerselectie: Het proces om het beste masker te kiezen is vrij arbitrair. Hoewel er scoringsvoorwaarden zijn, werken alle acht de maskers in de praktijk meestal prima.
- Propriëtaire codes: Het is interessant dat platforms zoals TikTok, Snapchat en Instagram hun eigen custom codes (TikCode, Snapcode, Nametag) inmiddels hebben vervangen door gestileerde QR-codes.
Nuttige bronnen:
thonky.com/qr-code-tutorial: Uitstekende bron voor de wiskunde achter foutcorrectie.segno: Een van de weinige generatoren die Kanji-modus ondersteunt.qrmosaics.art en ineoscan.com/qrcodefactory1: Galleries met 3D QR-kunst.QRazyBox: Een tool voor het herstellen/decoderen van beschadigde QR-codes.
Groetjes,