Dithering that runs completely client-side
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
LICENSE Create LICENSE Aug 5, 2013
README.md markdown Apr 1, 2012
index.html duh Apr 2, 2012


3 Bit Dither

Implemented by Nolan Caudill

This demo currently uses two different error-diffusion dithering algorithms: Atkinson's and the Floyd-Steinberg algorithm.

Error-diffusion means that the algorithm goes pixel by pixel, rounds the individual R, G, and B channels to either 0x00 or 0xff, and then distributes those differences (which the algorithm calls the "quantization error") in differing amounts to pixels further down the line. It being a 3-bit dithering means that your red, blue, and green channels are represented by a single bit (off or on), giving you a total of 8 colors.

The demo also does halftone dithering and Bayer dithering (just 2 bit) which don't use error-diffusion, which for these two makes the patterns evident that error-diffusion usually lessens.

This runs completely client-side, using the FileReader and canvas APIs. If you have a somewhat modern browser, this should work. Also, you can right-click and save the result of the dithering.

The demo lives here.