Resources
This page is for people looking for more technical information about dithering, color quantization or WebGL. For general information about Dithermark, including how to use it, please see the FAQ page.
- Source
- Dithering
- Ordered Dithering
- Color
- Color Cycling
- Color Quantization
- Image Filters
- Canvas API
- WebGL
- Related Apps
Source
- Dithermark GitHub Page the complete source code for Dithermark
Dithering
- Image Dithering: Eleven Algorithms and Source Code the article that served as the original inspiration for Dithermark
- Ditherpunk — The article I wish I had about monochrome image dithering Good overview of monochromatic dithering, and includes lesser know methods, such as blue noise and Riemersma dithering.
- DITHER.TXT one of the orginal references for image dithering
- ImageMagick Color Quantization and Dithering examples of using ImageMagick to reduce colors and dither an image
- Libcaca study: the science behind colour ASCII art very thorough series of chapters on different aspects of dithering, including lesser known variations on ordered and error diffusion dithering. Also is the source for the halftone ordered dither pattern.
- a dither the basis for the arithmetic dithers
- FFmpeg CVS Commit: add two spatially stable dithering methods Commit where a dither was integrated into FFmpeg with description of its advantages
- Riemersma dither Description of an original approach to error diffusion dithering using a Hilbert curve
- This codegolf challenge to dither an image had some interesting, original approaches
- Artistic dithering with textures describes converting a texture into dither matrix, as well as the Veryovka-Buchanan dithering method. Also contains an overview of other dithering methods.
- OpenCV: Image Thresholding compares adapting thresholding with classical threshold algorithm
- Dither Stabilization describes the creator of Return of the Obra Dinn’s process for making an image dithering visual effect that would remain stable even when the player moves the camera
Ordered Dithering
- Wikipedia’s ordered dither article Good introduction to ordered dithering with Bayer matrix examples and formula. However, note that while the formula for the Bayer matrix is correct, the example for the 8×8 matrix is not, something that caused me many headaches.
- Dithering on the GPU the inspiration to port the dithers to WebGL, and the source for the hue-lightness dithering algorithm
- Joel Yliluoma’s arbitrary-palette positional dithering algorithm a variation on ordered dithering specifically tuned to give better contrast and color fidelity than classical ordered dithering. Also the source for the Yliluoma 1 and Yliluoma 2 dithering algorithms.
- This blog post from one of the developers of Uncharted 4 details how they used dithering to simulate semi-transparent foliage in front of the camera
- Bayer Matrix creation function in Python One of the only source code examples I could find for generating a Bayer matrix
- University of Wisconsin Madison lecture (Power Point) The basis for the clustered ordered dithering matrix
- Clustered-dot-ordered Dither (Power Point) Includes an example of the spiral ordered dithering matrix which has similar results to the cluster pattern. Also mentions digital halftoning.
Color
- Wikipedia’s article on color difference Overview of the different ways colors can be compared
- Seven grayscale conversion algorithms interesting article about how something as seemingly as simple as converting an image into black and white is really not so simple. Also is the inpiration for the color dither ‘Luma’ color comparison algorithm
Color Cycling
- Color Cycling in Pixel Art Good introduction to color cycling, why it was used, how it works and includes examples
- Old School Color Cycling with HTML5 examples of Mark J. Ferrari’s color cycling work
Color Quantization
- An Overview of Color Quantization Techniques a good general overview
- University of Wisconsin Madison lecture (Power Point) demonstrates the differences in output between various color quantization algorithms. Also mentions clustered ordered dithering.
- Color quantization using k-means blog post that introduces k-means color quantization and compares results with a randomly generated palette. Includes sample code in Python.
- Improving the Performance of K-Means for Color Quantization academic paper that describes performance and accuracy improvements for k-means color quantization, and compares it to other color quantization methods.
- RgbQuant.js the source for the RGB Quant algorithm.
- A Simple Method for Color Quantization: Octree Quantization (PDF) the original paper introducing octree quantization.
- An Effective Color Quantization Method Using Octree-Based Self-Organizing Maps a paper that describes using neural networks to improve octree color quantization
- Octree color quantizer in Python the basis for the octree optimize palette algorithm
- Leptonica Color Quantization describes their variations on median cut and octree color quantization.
- scolorq: A Spatial Color Quantization Utility an original color quantization algorithm and implementation in C++, specifically tuned for small output color palettes.
- A Simple - Yet Quite Powerful - Palette Quantizer in C# details an original color quantization algorithm and associated utility in C#. Also includes comparison with other color quantization methods, including some lesser known ones.
- High quality GIF with FFmpeg (Hacker News comments) fascinating discussion that includes several different color quantization recommendations
Image Filters
- Non-linear filters & Image Compression (PDF) Differences between median and bilateral filters (with image examples) as well as denoising in general
- Smoothing Operations Nice chart and image examples that show the differences between different linear and non-linear filters, as well as their time complexities.
- OpenGL Kuwahara filter example The source for the smoothing (Kuwahara filter) translated into WebGL.
- Post Processing: Pixelation An article about creative uses of pixelation
Canvas API
- Optimizing canvas I wasn’t able to make use of any of these tips, but the article makes good points that should be kept in mind.
WebGL
- WebGL Fundamentals a great resource for learning WebGL, this page on recreating DrawImage was used when implementing the dithers in WebGL
- GLSL Data Types and Variables the range of values for the different data types table ended up being very valuable for fixing some bugs caused by lower default precision on mobile devices.
- WebGL GLSL built-in functions a frequently consulted resource
- WebGL Stats the closest thing to Can I use… for WebGL support
- Improvements to the canonical one-liner GLSL rand() the source for the random function used in the WebGL dithers
- WebGL Bitwise functions the source for the bitwise functions used in the WebGL arithmetic dithers
- glfx.js A library of different image filter implemented in WebGL. The source for the denoise and outline filters as well as the contrast filter used on Safari and Edge.
- Made by Evan cool WebGL projects