Splashery

Playground
QR Code, a still.

Studio · Built from a recipe

QR Code

C4 on the major comb. Its drum rings at 250.2 Hz.

Turn it in the PlaygroundTap the picture to strike it.

A QR code stores text in a square grid of dark and light modules.

Shelf
Studio
Kind
Built from a recipe
Your own
Your QR code
Sound
Yes
Licenses
MIT, Apache-2.0

Its note

Splashery stretches a drumhead over this Splash's outline, twelve inches across, and finds the ways it can ring. Its lowest is 250.2 Hz, 77 cents flat of C4, the nearest tine on the comb. The next fifteen are its overtones, and each one draws its own figure: sand gathers on the lines that stay still.

The sixteen ways QR Code's drum can ring, lowest first.
  1. 1250 Hz
  2. 2396 Hz
  3. 3396 Hz
  4. 4500 Hz
  5. 5559 Hz
  6. 6559 Hz
  7. 7638 Hz
  8. 8638 Hz
  9. 9729 Hz
  10. 10729 Hz
  11. 11750 Hz
  12. 12791 Hz
  13. 13791 Hz
  14. 14884 Hz
  15. 15884 Hz
  16. 16901 Hz

How to play

Type a link in the Splash tab, pick a style or a theme, and tap the code.

Its controls

ControlKindRangeStart
Knock looseTap
AssembleButton
FlipButton
Burst and returnButton
RippleButton
Split-flapButton
FoldButton
RainButton
Knock looseButton
Point cloudButton
AliveSwitchOff
Alive speedSlider0 to 100%50%
ShapeList2 choicesSquare
FrameList2 choicesNone: filled to the edge
Error correctionList5 choicesAuto (M, which the scan lab found best)
Code colorColor#14161c
BackgroundColor#ffffff
GradientList3 choicesNone
Gradient toColor#1d4f9c
Eye colorsList2 choicesSame as the code
Eye colorColor#b3261e
PlateList4 choicesPaper
Back of the tilesColor#e8743b
Alive wave colorColor#1d4f9c

About it

A QR code stores text in a square grid of dark and light modules. Three big finder patterns tell a camera where the code is and which way up it sits, and Reed-Solomon error correction lets it lose up to 7, 15, 25 or 30 percent (levels L, M, Q and H) and still read back. Masahiro Hara's team at Denso Wave invented it in 1994.

Here every dark module is a crisp cell of splats, in one of seven styles and in a color theme or a country's flag colors, always with the contrast a camera needs. The splash reads its own picture back to check that it scans. Tap it and the modules around your finger are knocked loose and snap back; the Splash tab has eight more motions, each ending on a code that scans. Alive moves colors through the code at the speed you choose, and every frame still scans, because each module keeps nearly the same lightness. Your text never leaves your device.

Controls made by Ryan Kamp, MIT.

Sources and credits

Made in Splashery. Its code is MIT.

Libraries

MIT
gifenc 1.0.3
Apache-2.0
jsQR 1.4.0 (lane LSTUDIO)
MIT
QR Code generator library (Project Nayuki)
MIT, Apache-2.0
zxing-wasm 3.1.4, with zxing-cpp (copied from Splashery)

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-code<script type="module" src="https://splashery.app/play/src/element.js"></script> <splashery-toy toy="qr-code"></splashery-toy>

Nearby on the strip