3 ms·

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

by aquova 1y 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 https://imgur.com/a/O6YN8S2 [0] https://github.com/aquova/aseprite-scripts/blob/master/pico-dither.lua https://github.com/aquova/aseprite-scripts/blob/master/pico-...

lugarlugarlugar 1y ago
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 1y ago
  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 1y ago
  Tried this online tool https://onlinetools.com/image/apply-dithering-to-image https://onlinetools.com/image/apply-dithering-to-image and Floyd and Atkinson both look great, Atkinson a bit better.
- sudobash1 1y ago
  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.
chrismorgan 1y ago
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 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 1y ago
  https://addons.mozilla.org/firefox/addon/fucking-jpeg/ https://addons.mozilla.org/firefox/addon/fucking-jpeg/
greysonp 1y ago
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 1y ago
  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 https://www.lexaloffle.com/bbs/?pid=110273#p
p0w3n3d 1y ago
Yeah I was counting on dithering too

by aquova 1y ago

lugarlugarlugar 1y ago

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 1y ago
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 1y ago
Tried this online tool https://onlinetools.com/image/apply-dithering-to-image https://onlinetools.com/image/apply-dithering-to-image and Floyd and Atkinson both look great, Atkinson a bit better.
sudobash1 1y ago
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.

chrismorgan 1y ago

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 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 1y ago
https://addons.mozilla.org/firefox/addon/fucking-jpeg/ https://addons.mozilla.org/firefox/addon/fucking-jpeg/

greysonp 1y ago

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 1y ago
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 https://www.lexaloffle.com/bbs/?pid=110273#p

p0w3n3d 1y ago

Yeah I was counting on dithering too