Scratch, smudge and tear a printed barcode while Reed-Solomon algebra repairs it live.
A message, a terminator and pad bytes are encoded with a real Reed-Solomon code over GF(256) into 50 bytes and printed as a matrix barcode on a shipping label, each byte a compact 2 x 4 block of modules. A reader samples every module through the damage you add: scratches lift ink so dark reads light, smudges add grime so light reads dark, and tears remove paper so those bytes become known erasures. The decoder then works the way real scanners do: it evaluates the syndromes, folds out the erasures, runs Berlekamp-Massey to find the error locator polynomial, finds its roots by Chien search and computes each error value with Forney's formula. Repaired modules glow green, torn ones are rebuilt in cyan, and the parity meter shows the hard limit of 2 x errors + erasures, past which the code fails or, now and then, confidently decodes the wrong message.
Try it. Drag on the sticker to damage it with the current tool: Scratch, Smudge or Tear (keys 1, 2, 3). Use the minus and plus buttons (or the - and + keys) to change the number of parity bytes, type to change the printed message, and press Enter or Reprint for a fresh label. Hover a byte in the codeword grid or a module on the sticker to see which modules belong to it.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive Reed-Solomon error correction demo with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Implement arithmetic in GF(256) yourself with the primitive polynomial 0x11d: build exp and log tables for alpha = 2, so multiplication is an addition of logs, and addition is XOR.
- Write polynomial helpers (multiply, evaluate, remainder) and a systematic encoder: append the remainder of msg(x) * x^nsym divided by the generator (x - 1)(x - alpha)...(x - alpha^(nsym-1)).
- Write the decoder for errors only: compute the syndromes, run Berlekamp-Massey to get the error locator, find its roots with a Chien search, and compute the error values with Forney's formula. Test it in the console by corrupting random bytes.
- Encode a short text message with 16 parity bytes and draw the bits as a square grid of black and white modules, 8 modules per byte.
- Let the mouse paint over modules to flip them, then re-read the grid, decode it, and show the decoded text and whether it succeeded.
Once that works, make it beautiful:
- Highlight the modules the decoder corrected in green, and the bytes it could not fix in red.
- Draw the syndromes as a row of small bars that are all flat when nothing is wrong, and show how much of the correction budget (2 per error) is used.
- Lay out each byte as a 2 x 4 block so a scratch hits a few whole bytes, and explain in a comment why that helps.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as erasure decoding for torn regions, interleaving several code blocks, or rendering the code as a printed label with realistic scratches.
