Remix.run Logo
aquova 3 days ago

An interesting article, but it seems like quite an oversight to not even mention dithering techniques, which in my opinion give much better results.

I've done some development work in Pico-8, and some time ago I wrote a plugin for the Aseprite pixel art editor to convert an arbitrary image into the Pico-8 palette using Floyd-Steinberg dithering[0]

I ran their example image through it, and personally I think the results it gives were the best of the bunch https://imgur.com/a/O6YN8S2

[0] https://github.com/aquova/aseprite-scripts/blob/master/pico-...

greysonp 3 days ago | parent | next [-]

They don't explicitly state it in the article that I can see, but the PICO-8 is 128x128, and it appears that their output images were constrained to that. Your dithered images appear to be much higher resolution. I'd be curious what dithering would look like at 128x128!

mezentius 3 days ago | parent [-]

Dithering is used quite frequently in PICO-8 projects at the “native” (128x128) resolution. Here’s an example from a few years ago: https://www.lexaloffle.com/bbs/?pid=110273#p

chrismorgan 3 days ago | parent | prev | next [-]

Direct link to the image, though you may have to fetch it through a non-browser to avoid it redirecting back to the stupid HTML: https://i.imgur.com/y93naNw.png

(I don’t know how it works for others, but it has always been atrocious for me. Their server is over 200ms away, and even with uBlock Origin blocking ten different trackers it takes fully 35 seconds before it even begins to load the actual image, and the experience once it’s finished is significantly worse than just navigating directly to the image anyway. Tried it in Chromium a couple of times, 55 and 45 seconds. Seriously, imgur is so bad. Maybe it ain’t so bad in the USA, I don’t know, but in Australia and in India it’s appallingly bad. You used to be able to open the image URLs directly, but some years ago they started redirecting to the HTML in general if not loading as a subresource or maybe something about accept headers; curl will still get it directly.)

wizzwizz4 3 days ago | parent [-]

https://addons.mozilla.org/firefox/addon/fucking-jpeg/

lugarlugarlugar 3 days ago | parent | prev | next [-]

I too thought about dithering while reading the article, but couldn't have imagined the result would be this much better. Thanks for sharing!

kibwen 3 days ago | parent | next [-]

Dithering is sort of like having the ability to "blend" any two colors of your palette (possibly even more than any two, if you use it well), so instead of being a 16-color pallete, it's like working with a 16+15+14+13+12+...=136-color pallete. It's a drastic difference (at the cost of graininess, of course).

smusamashah 3 days ago | parent | prev | next [-]

Tried this online tool https://onlinetools.com/image/apply-dithering-to-image and Floyd and Atkinson both look great, Atkinson a bit better.

sudobash1 3 days ago | parent | prev [-]

Dithering is still more important than is commonly known, even with 24-bit "true color". For example, imagine that you had a gradient that goes from white to black across a 1920x1080 monitor. 24-bit color means you only have 256 levels of color, so a naive gradient implementation will result in 256 discrete bands of different grays, each about 8 pixels wide (about as wide as this "w" character).

You might not thing that you'd notice that, but it looks surprisingly bad. Your eyes would immediately notice that there are "stripes" of solid gray instead of a smooth continuum. But if you apply dithering, your eyes won't be able to notice (at least not easily). It will all look smooth again.

In a situation like this, I like to use "blue noise" dithering, but there are scores of dithering methods to choose from.

p0w3n3d 3 days ago | parent | prev [-]

Yeah I was counting on dithering too