danielepiccone / ditherjs

A javascript library which dithers an <img> using a fixed palette
http://danielepiccone.github.io/ditherjs/
131 stars 22 forks source link

Refactoring to facilitate realtime video dithering #2

Closed calaldees closed 8 years ago

calaldees commented 9 years ago

Hi

I loved your DitherJS library! Seeing images transformed by the browser was really nostalgic.

I have been experimenting recently with realtime webcam feeds and planing around with drawing a video feed to a canvas. I got this crazy idea of running the images through your dithering code. After looking under the hood at your Dither library I noticed that none of the externals were exposed and the library would need a bit of refactoring to separate the internal processing.

I've tried to maintain complete backwards comparability with the original spec. I have introduced a new global namespace DitherJSInternals. This stateless object holds the pallets, algorithms and main dither function call. Most of this work is just moving the functions and unpicking some of the variables that were used to be passed as parameters.

I have included a demo of dithering realtime webcam feeds. This demo should work in Firefox and Chome. I haven't tried other browsers.

I've updated to the readme with some new instructions.

Other than the demo provided I don't have any further sites to test my modifications on. Could you check nothing has been damaged in the rework with any existing sites you have using the lib.

I will leave the version incrementing and other tweaks to you. I may have a look at your monochrome branch in a few weeks. Rather than having a separate branch could we implement this as an passable option?

Please feel free to discuss this submission further. I hope you approve the contribution.

Thanks again for a great library.

Allan

danielepiccone commented 8 years ago

Hi,

Thanks for the contribution!

I read through the code and saw that the only change needed to enable video rendering was to expose the rendering algorithm, no need to include a new global object or hard-code the palette matrix :)

I have taken your webcam demo and included it in the /demo folder (https://github.com/dpiccone/ditherjs/commit/27790c0440e7065e339da28ab7baf314f1167c93) , but I had to discard the refactor