
AI is dreaming...
Stylizing your photo
PolyColor
Digital Paint by Numbers
PolyColor
Digital Paint by Numbers
My AI Gallery
No custom puzzles yet
Open PolyColor Studio from the menu to turn your photos into paint-by-number maps!
Options
Help & Info
Data & Storage
Clear your saved paintings or AI gallery if you want a fresh start.
How to Play
Pick a Color
Select a color from the palette at the bottom of the screen. The number inside corresponds to unpainted shapes.
Find & Tap
Search the canvas for shapes matching your active color number. Tap them to paint! Don't worry about being perfectly precise—our Smart Bucket has a 25px tolerance for fat fingers.
Pan & Zoom
Pinch with two fingers to zoom in and out. Drag with one finger to pan around the canvas.
Use the Hint Bulb
Can't find that last tiny speck of color? Tap the lightbulb icon in the top right, and the camera will instantly zoom you directly to a missing shape.
Stats for Nerds
Welcome to the Physics Bowl of PolyColor. If you are reading this, you are either a software engineer, an artificial intelligence enthusiast, or you clicked the wrong button while looking for the bathroom.
The Great Storage Collapse
At first, the universe was hot, dense, and full of LocalStorage Quota Exceeded errors. We originally attempted to store fully base64-encoded canvas snapshots of the user's progress. This was, to put it mildly, as scientifically sound as Howard Wolowitz’s space toilet.
To solve this, we employed an elegant deterministic stringified JSON recipe paradigm. By utilizing a seeded pseudo-random number generator, we can dynamically reconstruct thousands of polygon coordinates on the fly. We only save an array of IDs representing painted shapes. Boom. Our save states dropped to under 3KB.
The AI Photo Assimilation
But that was mere child's play. Then came the AI Photo Assimilation. Our goal was to map any photo into a valid stained glass vector SVG.
Our initial algorithm—let’s call it 'The Great Mud'—created '50 Shades of Beige' due to an overly aggressive Gaussian blur convolution prior to color quantization.
We fixed this by employing a custom K-Means clustering algorithm, effectively acting as a 'bouncer' to force the image into exactly 32 distinct colors based on untouched RGB values.
However, antialiasing from the AI created microscopic 'confetti' shapes along contrasting edges. We therefore implemented an aggressive garbage collection protocol within our vector tracing engine, setting pathOmit to 60. This mathematically swallows any polygon smaller than 60 pixels, merging its vertices into the surrounding geometric mass.
The Label Placement Conundrum
Then, we encountered the Label Placement Conundrum. Standard bounding-box center placement put numbers directly on the stroke lines of curved ('C' or 'U' shaped) polygons.
We implemented an 8-way raycasting algorithm—conceptually similar to Sheldon's 3D chess but constrained to a 2D Cartesian plane—to find the 'pole of inaccessibility'. This guarantees the text label is always placed in the thickest, safest center of the polygon.
Fat Fingers & Inverse Scaling
And for the 'fat finger' hypothesis? We added a 25-pixel radial tap-tolerance heuristic. If you miss the shape, the app checks the adjacent pixels in a concentric circle to find the closest valid unpainted shape for your active color.
We even utilized inverse scaling via CSS variables so the SVG text magically shrinks as you zoom in: font-size: min(calc(11px / var(--zoom-scale, 1)), 22px);
In short: it's a highly modular, strictly cel-shaded, recursively-optimized digital paint-by-numbers ecosystem. Bazinga.
PolyColor Studio
Procedural Map Builder
Choose the visual theme for your map.
This smart code contains your Theme, Complexity, and Map layout.
Turn any photo into a custom paint-by-numbers map using AI.
Subject flattens background noise. Landscape preserves the scene.
PolyColor
Masterpiece!
You have painted every shape perfectly.