Dithering

[PAEz]

Still haven't got around to trying your stuff (web workers are tomorrow), but love rgbQuant and thought you might like a look at this.... https://dl.dropboxusercontent.com/u/3610419/JsGifStuff/Dithering.zip ...I did dithering! Ive been looking around getting stuff for gif in js and was amazed no one had dithering so looked into it and found some nice AS to convert (the urls to the originals are in the source if you want to check my work). Makes a real nice difference on gradients. Sorry bout the awful test code ;) Im still in mucking around mode so I just throw what ever I need in there ;) You want to look at the Bitmap.prototype.dither function at the end of dither.js. Sorry bout the odd Bitmap class aswell ;) was just meant to give me something to work with and I know its odd.

[PAEz]

Updated the above link. The speed was awful and figured it was due to the looking for the closest color when putting a pixel into the indexed data so made it cache the previous finds and that speed it up ALOT. If they used every color in the spectrum thats gonna be one HUGE lookup table tho...memory or speed....speed!

By the way, I only test my stuff in Chrome.

[leeoniya]

thanks, i will take a look at this.

GIFter.js is going through a pretty significant rewrite to integrate RgbQuant and make both the quantizer and encoder swappable. i'm also updating the frame differencing code so the output is a good amount smaller and, in addition, looking into a cleaner separation of some parts that can be made web worker friendly.

please hold off on trying it. i updated the README.md prematurely and it claims to do some things which it doesn't yet do. it will encode stuff, but there's no quantization, (it basically fills the palette with any color as it encounters it, so more than 256 will make it barf). also, the frame diffing doesnt really reduce the animation size because i still create full size frames with transparency instead of smaller diffBox frames with x/y offsets.

i'm a bit busy right now with some other projects so it may be a week or two :(

[PAEz]

Those updates sound great, like exactly what I want....the ability to pick from lots of options. And take your time, no pressure. I only do this for fun (I dont do this for work), so as soon as it feels like work I stop ;)

Sorry but I realised the original code was broken....thought it was but its so hard to tell with out something working to compare it against.
But the new version totally works! And its got serpentining now, which is that it will alternate between going left to right and right to left when doing the kernel on alternating lines. This can hide some of the pattern some times and other times false is better.
Check out the screenshot, how nice is that dithering :P
http://jsbin.com/iXofIji/2/edit

[leeoniya]

hey @PAEz,

rather than implementing dithering here, i've instead done so in RgbQuant.js, where i think it belongs: https://github.com/leeoniya/RgbQuant.js/commit/6de8497e5b88d87e887c6ba18b770cba1103be8a

I don't get quite the same results on your specific gradient example, likely because we use different nearestColor() algos and prolly some other stuff. However the quality improvement on many of the demo images is quite drastic, though obviously a bit slower.

I noticed that @panrafal also implemented your dithering code directly into gif.js: https://github.com/jnordberg/gif.js/pull/26

As for GIFter, the repo code is stale, but i completed some major rework several months ago that fixes bugs and integrates RgbQuant.js as the primary palette builder. In effect this now brings across the implemented dithering capability. I will try to get the new GIFter code cleaned up a bit and pushed soon, then play with web workers.

Thanks for your help!