├── LICENSE ├── README.md └── index.html /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Matthew Nolan Caudill 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 Bit Dither 3 | ============== 4 | Implemented by Nolan Caudill 5 | 6 |

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

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.

9 | 10 |

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.

11 | 12 |

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.

13 | 14 | The demo lives here. 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 3 bit dither 5 | 11 | 12 | 13 |

3 Bit Dither

14 |
15 |

Implemented by Nolan Caudill, code on github here

16 |

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

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.

19 | 20 |

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

21 | 22 |

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.

23 |
24 | 25 | 26 | 27 |
28 | 29 | 378 | 379 | 380 | --------------------------------------------------------------------------------