QR Explained
A QR code is a grid of dark and light modules with a fixed plan.
This picture is a cloud of paint. You can , , , , , , and .
Paint with your finger. It stays on these splats, wherever they go next.
Your paint is on this cloud. to see the sharp picture.
- Shelf
- Studio
- Kind
- Built from a recipe
- Your own
- QR Explained
- Sound
- Yes
- Licenses
- Apache-2.0, MIT
How to play
Tap to light up each part of the code, or encode your own text step by step.
Its controls
| Control | Kind | Range | Start |
|---|---|---|---|
| Next part | Tap | ||
| Light it up | Button | ||
| Place the bits | Button | ||
| Apply the mask | Button | ||
| Shape | List | 2 choices | Square |
| Pop the lit part out | Setting |
About it
A QR code is a grid of dark and light modules with a fixed plan. Three finder patterns mark the corners, timing patterns set the grid, alignment patterns help at an angle, and the format information says the error correction level and the mask. The rest is your text in 8-bit codewords, plus Reed–Solomon codewords that can rebuild damaged ones.
Tap to light up each part. Or type your own text in the Splash tab and step through the encoding: the mode, the count, the data bits, padding, error correction, interleaving, the zigzag placement and the eight masks with their penalty scores. Each step follows ISO/IEC 18004 and is checked against another encoder.
Sources and credits
Made in Splashery. Its code is MIT.
Libraries
- Apache-2.0
- jsQR 1.4.0 (lane LSTUDIO)
- MIT
- QR Code generator library (Project Nayuki)
In The Splash Manual
Share it
This link opens it in the Playground. To put it on your own page, add the element and one script tag. Every option.
https://splashery.app/play/?toy=qr-anatomy
<script type="module" src="https://splashery.app/play/src/element.js"></script> <splashery-toy toy="qr-anatomy"></splashery-toy>
Nearby
QR Damage LabQR codes still scan when part of them is lost, because error correction can rebuild missing codewords: about 7, 15, 25 or 30 percent at levels L, M, Q and H.
Triple QROne square holds three QR codes here: the first sets each module's red, the second its green and the third its blue.
QR MosaicA QR code is only dark and light squares, so it can be built from real things.
QR CodeA QR code stores text in a square grid of dark and light modules.