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, Picasso's Guernica, a Mondrian Composition, a Rothko colour field - one random pixel cluster at a time 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.
Thirty canonical artworks. The catalogue covers ten classic figurative works (Starry Night, The Great Wave, The Scream, The Shipwreck of the Minotaur, Composition (Kandinsky), Picasso's 1907 Self-Portrait, Frida Kahlo's Self-Portrait, Woman with a Hat, Seated Nude, Udnie); eight further iconic figurative or stylised works (Composition VII, Guernica, La Muse, Portrait of Dora Maar, Hand with Reflecting Sphere, Rain Princess, Feathers, Roman Mosaic); and twelve hard-edge / colour-field icons (Mondrian's Composition with Red Blue Yellow + Broadway Boogie Woogie, Malevich's Black Square + Black Cross, Rothko's Orange-Red and Yellow-Blue, Albers' Homage to the Square in Yellow and Blue, Newman's Onement I, Reinhardt's Abstract Painting (Black), Kusama's Pumpkin, and Johns' Target). Every round shows the artist, the year, and the art movement after you guess · so you build a mental catalogue of art history one round at a time.
Pure HTML5 Canvas. Each painting renders as ~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. Eighteen of the works download from public ML neural-style-transfer reference repositories on GitHub; the remaining twelve 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?
Thirty works span four centuries and most of the major movements. Figurative classics: The Starry Night (Van Gogh, 1889), The Great Wave (Hokusai, 1831), The Scream (Munch, 1893), The Shipwreck of the Minotaur (Turner, 1810), Composition (Kandinsky, 1913), Picasso's Self-Portrait (1907), Frida Kahlo's Self-Portrait (1940), Woman with a Hat (Matisse, 1905), Seated Nude (Picasso, 1909), Udnie (Picabia, 1913), Composition VII (Kandinsky, 1913), Guernica (Picasso, 1937), La Muse (Picasso, 1935), Portrait of Dora Maar (Picasso, 1937), Hand with Reflecting Sphere (Escher, 1935), Rain Princess (Afremov, 2014), Feathers (Klimt-style, 1908), and a Roman mosaic (~3rd century). Hard-edge / 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 and in Blue (Albers, 1959-1965), Onement I (Newman, 1948), Abstract Painting (Reinhardt, 1963), Pumpkin (Kusama, 1990), and Target (Johns, 1958). -
How does the random reveal work?
Each round seeds a Fisher-Yates permutation of all ~100 000 cells, then paints them in that order one batch per tick. The tick interval is set by difficulty (590 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 roughly 100 000 base-62 characters (one per cell) that decode into per-cell hex colours at runtime. Eighteen works are URL-fetched from public ML neural-style-transfer reference repositories on GitHub at build time. The other twelve - Mondrian, Malevich, Rothko, Albers, Newman, Reinhardt, Kusama, Johns - 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.