Mosaic
A famous painting paints itself row by row from coloured-emoji squares. Guess the work before the scanline finishes
About PlayMemorize Mosaic
Mosaic is a "spot the painting" pattern-recognition game. A high-resolution mosaic paints a famous public-domain artwork - Van Gogh's Starry Night, Hokusai's Great Wave, Munch's Scream, a Mondrian Composition, a Rothko colour field - one cell at a time, in random order, until the picture emerges. Your job: pick the painting from a multiple-choice list before the canvas finishes revealing. The earlier you guess, the higher the score, so visual familiarity with the canon pays off.
Twenty canonical artworks. Ten come from photographs of figurative or early abstract paintings. Those ten: The Starry Night, The Great Wave, The Scream, The Shipwreck and Composition (Kandinsky). Then Woman with a Hat, Udnie, Composition VII, Feathers and a Roman mosaic. The other ten are hard-edge and colour-field works drawn as vector art. They are two Mondrians, two Malevichs, two Rothkos, two Alberses, one Newman and one Reinhardt. Every round shows the artist, the year and the art movement after you guess.
Pure HTML5 Canvas. Each painting renders as 89 000 to 100 000 flat fillRect blocks · twenty times the resolution of the original 5 000-cell prototype, so silhouettes and brushwork survive quantisation rather than dissolving into a coarse grid. The cell colours are drawn from a 45-chip palette of emoji-derived hex values (moon-cream, stone-grey, terracotta, peach, night-blue, fir-green, …) chosen so muted oil-paint mid-tones land on a faithful sibling instead of collapsing to black. Each painting also keeps its source aspect ratio · landscape works frame as landscape, portraits as portrait.
No images stored. The repository ships only the quantised palette-index strings · one base-62 character per cell. To regenerate or expand the catalogue, run node scripts/build-mosaic-paintings.mjs. Ten of the works download from public ML neural-style-transfer reference repositories on GitHub; the other ten hard-edge / colour-field works ship as small inline SVG strings inside the build script and rasterise locally through sharp, so they don't depend on a reachable URL. Either source path resizes to fit ~100 000 cells while preserving aspect ratio, lifts saturation a touch so muted mid-tones land on a coloured chip, and matches every pixel to the nearest palette entry using perceptual OKLab distance. Output goes straight into paintings.generated.ts.
Deterministic rounds. Same seed always produces the same painting, the same shuffled choice list, and the same random reveal order, so save-codes work and the labyrinth's resume flow stays cheat-proof. The whole game is a registered GameModule, so the labyrinth can drop you into a Mosaic encounter at any level and the picture you see in the labyrinth is byte-identical to the one you'd see in the standalone page.
Part of the PlayMemorize family of brain-training games. Runs entirely in your browser, works offline as a Progressive Web App.
FAQ
-
What is Mosaic?
Mosaic is a pattern-recognition streak game that doubles as an art-history primer. A high-resolution mosaic paints a famous public-domain painting in random pixel order · you have to identify the work from a multiple-choice list before the picture finishes revealing. The earlier you guess, the higher the score, and the artist + year + movement are shown after every round. -
Which paintings are in the catalogue?
Twenty works span eighteen centuries and most of the major movements. Figurative and early abstract: The Starry Night (Van Gogh, 1889), The Great Wave (Hokusai, 1831), The Scream (Munch, 1893), The Shipwreck (Turner, 1810), Composition (Kandinsky, 1913), Woman with a Hat (Matisse, 1905), Udnie (Picabia, 1913), Composition VII (Kandinsky, 1913), Feathers (Klimt-style, 1908), and a Roman mosaic (3rd century). Hard-edge and colour-field icons: Composition with Red, Blue, and Yellow (Mondrian, 1930), Broadway Boogie Woogie (Mondrian, 1943), Black Square (Malevich, 1915), Black Cross (Malevich, 1915), Orange and Red (Rothko, 1961), Yellow and Blue (Rothko, 1955), Homage to the Square in Yellow (Albers, 1959), Homage to the Square in Blue (Albers, 1965), Onement I (Newman, 1948), and Abstract Painting (Reinhardt, 1963). -
How does the random reveal work?
Each round seeds a Fisher-Yates permutation of every cell in the canvas. That is 89 000 to 100 000 cells. The game paints them in that order, one batch on each of 100 ticks. The tick interval is set by difficulty (490 ms on Easy, 390 ms on Medium, 240 ms on Hard). Same seed always replays the same sequence, so a shared link or labyrinth resume reveals the painting in exactly the same way. -
How is the score calculated?
The round starts at 1 000 points. The score drops linearly as more cells are revealed: score = 1 000 × (cells left / total cells). Guess at first sight and you get nearly the full 1 000; guess at the last cell and you get 0. A wrong guess always scores 0 and ends the streak. -
Are the source images stored in the repo?
No · only the quantisation result. Each painting compresses to 89 000 to 100 000 base-62 characters (one per cell) that decode into per-cell hex colours at runtime. Ten works are URL-fetched from public ML neural-style-transfer reference repositories on GitHub at build time. The other ten - two Mondrians, two Malevichs, two Rothkos, two Alberses, one Newman and one Reinhardt - ship as small inline SVG strings inside the build script and rasterise locally through sharp, so they need no network. Either path resizes to fit ~100 000 cells while preserving the source aspect ratio, lifts saturation a touch so muted oil-paint mid-tones land on coloured palette entries instead of black, and matches every pixel to the nearest palette colour using perceptual OKLab distance. The result is a small TypeScript data module · the site never ships the source pixels. -
Why a 45-chip palette instead of nine emoji squares?
The original prototype used the nine Unicode 12 colour-square emojis (🟥 🟧 🟨 🟩 🟦 🟪 🟫 ⬛ ⬜). Nine flat hues collapsed too many shades into the same chip · skin tones became orange, sky-blue and mid-blue and night-blue all fell on 🟦, and muted mid-greys went black. The current 45-chip palette draws extra mid-tones from emojis whose Twemoji rendering reads as a specific shade at a distance · 🌕 moon-cream, 🦴 ivory, 🌫️ fog-grey, 🪨 stone, 🐋 slate, ⚱️ charcoal, ⚫ jet, 🍑 peach, 🏜️ sand, 🦌 fawn, 🪵 wood, 🍂 russet, 🍫 chocolate, 🥬 lime, 🍵 matcha, 🪺 khaki, 🌲 fir, 🌊 teal, 🌌 night-blue, 🪻 lavender, 🍇 grape, 🌹 rose, 🌷 magenta, 🍷 wine. The build verifies every chip is actually picked by at least one cell across the catalogue, so no slot is wasted. -
Can I play offline?
Yes. PlayMemorize is a Progressive Web App and Mosaic is part of the offline pre-cache. Once loaded, every round generates locally from a seed · no network needed. -
Can MemPi help me study and practice this game?
Yes! Click MemPi in the header or on the game board to summon him. He observes the board, thinks out loud, and can demonstrate moves or guide you through tricky steps.