Splashery

Aisle 1No. 8 of 460

Splashery

QR Explained

91,569 small parts. Assembled in your browser.

Empty. Now look down.

QR Explained, a still.
201000800007
$0.00

Swipe across the pack to tear it open.

Press and hold. It pulls itself together.

Let go to drop it.

It stays in its pack here. The Playground has the rest.

Playground

Studio · Built from a recipe

QR Explained

A QR code is a grid of dark and light modules with a fixed plan.

Play with it in the Playground

How to play

Tap to light up each part of the code, or encode your own text step by step.

Toy facts

Item
No. 8 of 460
Shelf
Aisle 1, Studio
Kind
Built from a recipe
Small parts
91,569
Your own
QR Explained
Sound
Yes
Batteries
None
Assembly
It does that itself
Licenses
Apache-2.0, MIT
Price
$0.00

Small parts are the splats in its usual build on a computer. A phone may draw fewer.

Its controls

ControlKindRangeStart
Next partTap
Light it upButton
Place the bitsButton
Apply the maskButton
ShapeList2 choicesSquare
Pop the lit part outSetting

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

  1. Chapter 9: Codes and pages
  2. Chapter 10: Make your own

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>