search

leeoniya / RgbQuant.js

color quantization lib
http://leeoniya.github.io/RgbQuant.js/demo/
MIT License
427 stars 57 forks source link

Ordered Dithering #32

Open alexharris opened 4 years ago

alexharris commented 4 years ago

Hi Leon,

I am interested in adding some ordered dithering options to RgbQuant.js. I am trying to implement, to start, a 2x2 Bayer Matrix. I am trying to do this by adding the following to the kernels array:

Bayer2x2: [
[3 / 6, 0, 0],
[1 / 6, 1, 0],
[0 / 6, 0, 1],
[2 / 6, 1, 1],
],

However, it seems that setting the first value at 0,0 is preventing colors from getting applied. Having a little trouble understanding the code to debug, I can dig in more but thought you might have some quick ideas of where to look.

thanks, love the script,

Alex

leeoniya commented 4 years ago

i'm pretty sure that an ordered dither will need a dedicated loop since it operates on a different principal than error diffusion dithers - you cannot just stick a bayer matrix into an error diffusion loop and have it work. you'll likely need to implement an ordered dither as its own loop.

here's way too much info on how both work, with pseudo-code:

http://www.tannerhelland.com/4660/dithering-eleven-algorithms-source-code/ https://bisqwit.iki.fi/story/howto/dither/jy/

also, serpentine error diffusion currently has a bug [1] that i haven't gotten around to diving into. feel free to take a look at that, if interested.

i'm currently working on another project that i'd like to get to 1.0, but i'd be happy to review code or discuss dithering further. i'm no expert in the subject either, so i can't give you much advice without sinking some additional time myself.

[1] https://github.com/leeoniya/RgbQuant.js/issues/30

alexharris commented 4 years ago

Thanks for the response. I'll take a look at that bug, and put some more thought into the ordered dither situation. It looks like the fork that you mentioned in another issue comment is considering implementing ordered dithering, so I might poke around over there too. Thanks!

leeoniya commented 4 years ago

i've got a bunch of thoughts rolling around. at some point i want to look into improving perf and color accuracy via non-rgb color spaces in https://github.com/leeoniya/RgbQuant.js/issues/31. i've recently stumbled upon https://github.com/photopea/UPNG.js which is very fast and great at 256 colors, but further testing is revealing that it often misses key colors at palette sizes of e.g. <= 32 and rgbquant does better. i've inquired about dithering support in https://github.com/photopea/UNN.js/issues/1.

it's all lazy investigative work at this point.