Visualizations
355 / 500

355 · Illusions

Visual Cryptography

Two sheets of pure noise. Slide one over the other and a secret appears.

Naor and Shamir's 1994 scheme turns each pixel of a black and white secret into a 2x2 block of subpixels on every share, always two inked and two clear, so a share on its own is a uniformly random choice among six patterns and carries no information at all. A white secret pixel gets the same pattern on both shares and a black one gets complementary patterns, so stacking the transparencies, which ORs their ink, gives 2 of 4 against 4 of 4 inked, and the eye averages that into the message. The 2-of-3 mode deals the rows of a column-shuffled basis matrix to three shares: any two give 3 of 4 against 2 of 4, and all three give 4 of 4. Secrets include text and two pictures (an eye and a cratered moon) dithered to black and white; the magnifier shows the subpixel patterns, and Squint averages the table the way a distant eye does.

Try it. Drag the shares around the light table; released within a few pixels of another share, they snap into register. Arrow keys nudge the top share by one subpixel, which dissolves the message. Type to make your own secret (Enter for a new line, Escape for the presets), and use the buttons for the next secret, 2-of-2 or 2-of-3 shares, fresh randomness, squinting and spreading the shares out.

  • Visual secret sharing
  • Perfect secrecy
  • Basis matrices
  • Floyd-Steinberg dithering

View the source · one module, plus a small shared runtime for sizing, the animation loop and input

Build your own

Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.

Build a visual cryptography demo with JavaScript and the HTML canvas element, based on Naor and Shamir's visual secret sharing scheme. 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:
- Render a short word like SECRET in big bold letters into a small offscreen canvas, about 100x60 pixels, and threshold it to black and white. That is the secret.
- Make two shares. For every secret pixel, pick one of the six 2x2 patterns that have exactly two black subpixels. Share 1 gets that pattern. Share 2 gets the same pattern if the secret pixel is white, and the complementary pattern if it is black.
- Draw each share into its own canvas as black subpixels on a transparent background, so each one looks like pure noise on its own.
- Show both shares on a light background and let me drag either one with the mouse. Because the black ink is opaque, drawing one over the other acts like a logical OR, so when they line up exactly, the word appears: white pixels come out half black, black pixels fully black.

Once that works, make it beautiful:
- Style the shares as transparencies on a warm light table, with soft shadows, registration marks and a labeled tab on each.
- Snap a share into place when it is released within a few pixels of the other, and let the arrow keys nudge it by one subpixel so I can watch the message dissolve.
- Let me type my own secret and regenerate the shares as I type.

Explain the key ideas in short code comments, including why one share alone reveals nothing. When you're done, tell me how to open it and suggest three directions I could take it next, such as a 2-of-3 scheme built from basis matrices, hiding a dithered photograph instead of text, or a magnifier that shows the subpixel patterns.
PreviousBalancing MobileA red-black or AVL tree hangs as a spring-physics mobile while a plain BST droops. NextMountain Wave CloudsWind over a range rings into lee waves, and saucer clouds stack at the crests.

Related visualizations

  • MoireIllusions Two sheets of fine lines beat into giant ghosts, and hide a secret message.
  • Hidden in PixelsType and image A treasure map hides in a landscape's lowest bits. Peel the bit planes to find it.
  • Hidden 3DIllusions A live magic eye picture: a turning 3D sculpture hidden in colorful noise.
  • Checker ShadowIllusions Squares A and B are the exact same gray. Move the light and the shadow keeps lying.
  • Dither LabRetro Seven dithering algorithms race on a moving scene in 1-bit, handheld green, CGA and EGA.
  • Geometric IllusionsIllusions Six classic illusions on graph paper, and a lab that measures how much they fool you.
  • Aperture ProblemIllusions One grating, one true motion, three holes that each report a different direction.
  • Hybrid ImagesIllusions One picture, two subjects: an owl up close, a cat from across the room.
  • Lateral InhibitionIllusions Four brightness illusions, each predicted live by a model of retinal ganglion cells.

Use ← and → to move between demos. While the canvas has focus, keys go to the demo instead.

← More from Emergent Mind Labs