QR Code Layout
A QR code is structured as a 21x21 grid with specific regions designated for metadata and message encoding. These are the major regions:
- Orientation Squares : Three large squares in the corners help the decoder determine the QR code’s orientation and how to rotate it into standard position.
- Color Data Boxes : Eleven boxes are allocated to encode color data. The eleventh box is used for the orientation squares' color.
- Size Information Boxes : Three boxes store the encoded messages length. The maximum message length this QR code can encode in 109 characters.
- Logo Region : A 7x7 central area is reserved for the logo.
- Data Region : The remaining grid space is dedicated to storing the encoded message.
Text Encoding Process
To demonstrate the encoding process, we will use the following
quote:
Valuable lessons were code words for pain that no one apologized
for.
― Jennifer A. Nielsen, The False Prince
1. Convert each symbol in the text to its ASCII encoding
86 97 108 117 97 98 108 101 32 108 101 115 115 111 110 115 32 119 101 114 101 32 99 111 100 101 32 119 111 114 100 115 32 102 111 114 32 112 97 105 110 32 116 104 97 116 32 110 111 32 111 110 101 32 97 112 111 108 111 103 105 122 101 100 32 102 111 114 46
2. Pad each ASCII number to a width of 3 by prepending 0s as needed
086 097 108 117 097 098 108 101 032 108 101 115 115 111 110 115 032 119 101 114 101 032 099 111 100 101 032 119 111 114 100 115 032 102 111 114 032 112 097 105 110 032 116 104 097 116 032 110 111 032 111 110 101 032 097 112 111 108 111 103 105 122 101 100 032 102 111 114 046
3. Place padded digits sequentially in the data region following the below layout
4. Fill the rest of the data region with randomly generated digits
5. Choose a color scheme for the QR code
Each digit is mapped to a unique color. Here is the mapping for our 'autumn' color palette.
6. Generate the QR code image
Expand each grid box of the QR code into a 10x10 pixel box with the appropriate color. Then add the logo to the central 70x70 pixel region.
Fun Fact: Our logo is inspired by a certain cat named Proton! 😼 and also refelcts our relationship as twins. The yin and yang symbolize the perfect balance we bring to each other.
Decoding Process
This process of extracting the encoded text from the QR code is the reverse of the encoding process described above.
Convert the QR code image into a 21x21 grid of numbers
The QR code bitmap is transformed into a grid representing numeric values. The decoder automatically adjusts for any rotation of the QR code bitmap by detecting the orientation squares embedded in the design.
Determine the encoded text's length
The length of the encoded text is derived from metadata contained within the QR code.
Traverse the QR code grid to extract data
The decoder reads sequences of three boxes from the data region and converts them into ASCII numerical values.
Map each ASCII value to its corresponding character
Each ASCII number is then mapped to its corresponding character, reconstructing the original encoded text.
Voila! The text has been successfully extracted from the QR code :)