I'm using https://commons.wikimedia.org/wiki/File:Banana-Single.jpg with a very low resolution width=16. The image get's too thick and the black spot on the top disappears. Also, at some resolutions I get a shadow on the bottom and at other it's just a plain color.
Very cool app, would be nice to have a way to either remove background, or use heuristics/Image models like RNNs to detect which parts of the image are more important so that the generator tries to put more colors into those (so that different features are easier to differentiate)
The interesting part is the colour matching. Naive RGB nearest-neighbour looks bad on skin tones and gradients — you get muddy patches. Two passes works much better: map every pixel to the nearest colour in the actual brand palette using CIEDE2000 perceptual distance, then reduce that set by frequency down to the target colour count, then dither against the reduced palette. Matching against the real palette before reduction is what keeps gradients from collapsing.
Background removal combines the alpha channel with a multi-edge flood fill, with a sanity cap so it doesn't eat the subject when foreground and background are close in tone.
It all runs client-side in a Web Worker — no image leaves the browser, and no account is needed to generate a pattern. Static site on Cloudflare Workers.
The palette data took the longest: 1,406 entries across Perler / Hama / Artkal / MARD / COCO. Every brand numbers its colours differently and none of them publish anything machine-readable.
It also self-hosts Fusion Pixel 12 for CJK pixel typography, which meant building a font-slicing pipeline — a full CJK pixel font is far too heavy to ship whole.
I'm using https://commons.wikimedia.org/wiki/File:Banana-Single.jpg with a very low resolution width=16. The image get's too thick and the black spot on the top disappears. Also, at some resolutions I get a shadow on the bottom and at other it's just a plain color.
Very cool app, would be nice to have a way to either remove background, or use heuristics/Image models like RNNs to detect which parts of the image are more important so that the generator tries to put more colors into those (so that different features are easier to differentiate)
Author here. A few notes on how it works.
The interesting part is the colour matching. Naive RGB nearest-neighbour looks bad on skin tones and gradients — you get muddy patches. Two passes works much better: map every pixel to the nearest colour in the actual brand palette using CIEDE2000 perceptual distance, then reduce that set by frequency down to the target colour count, then dither against the reduced palette. Matching against the real palette before reduction is what keeps gradients from collapsing.
Background removal combines the alpha channel with a multi-edge flood fill, with a sanity cap so it doesn't eat the subject when foreground and background are close in tone.
It all runs client-side in a Web Worker — no image leaves the browser, and no account is needed to generate a pattern. Static site on Cloudflare Workers.
The palette data took the longest: 1,406 entries across Perler / Hama / Artkal / MARD / COCO. Every brand numbers its colours differently and none of them publish anything machine-readable.
It also self-hosts Fusion Pixel 12 for CJK pixel typography, which meant building a font-slicing pipeline — a full CJK pixel font is far too heavy to ship whole.
Happy to answer questions.