Floyd-Stein Dithering

Developed by the infamous duo, Floyd and Stein, this technique creates a visually striking dithered image by alternating pixels in a predictable pattern.

				function floydSteinDithering(imageData: Uint8Array, palette: Uint8Array, width: number, height: number): Uint8Array {
					let ditheredImageData = new Uint8Array(width * height * 4);
					for (let x = 0; x < width; x++) {
						for (let y = 0; y < height; y++) {
							let pixelIndex = (x + y * width) * 4;
							let r = imageData[pixelIndex + 0];
							let g = imageData[pixelIndex + 1];
							let b = imageData[pixelIndex + 2];
							let a = imageData[pixelIndex + 3];
							let ditheredR = Math.round(r + (palette[r] - 255)) % 256;
							let ditheredG = Math.round(g + (palette[g] - 255)) % 256;
							let ditheredB = Math.round(b + (palette[b] - 255)) % 256;
							ditheredImageData[pixelIndex + 0] = ditheredR;
							ditheredImageData[pixelIndex + 1] = ditheredG;
							ditheredImageData[pixelIndex + 2] = ditheredB;
							ditheredImageData[pixelIndex + 3] = a;
						}
					}
					return ditheredImageData;
				}
View Example

Continue reading for more advanced dithering techniques.

Error-Falloff Dithering and Ordered Arrays Dithering are also available.