The Engineer’s Guide to Dithering: Floyd-Steinberg, Bayer Matrices & Halftone in JavaScript

Why Low-Bit Graphics Still Captivate Modern Engineers

In an era where 4K OLED screens deliver billions of true-to-life colors, why are engineers, UI designers, and digital artists increasingly obsessed with 1-bit, 2-bit, and 8-bit visual aesthetics?

The answer lies in constraint and tactile clarity. Dithered and quantized imagery strips away the glossy homogeny of modern anti-aliasing, replacing it with sharp geometric patterns, intentional texture, and nostalgic personality reminiscent of early Macintosh OS, Game Boy, and arcade hardware.

Understanding how dithering works fundamentally requires examining how humans perceive spatial frequency and how algorithms trick the eye into blending discrete monochrome points into continuous grayscale tones.

Error Diffusion: The Elegance of Floyd-Steinberg (1976)

Introduced by Robert W. Floyd and Louis Steinberg in 1976, error diffusion remains one of the most versatile quantization techniques in computer science.

When an algorithm clamps a high-precision 8-bit color channel (0–255) to a quantized palette (for example, purely 0 or 255), a rounding discrepancy—an "error"—is produced. If you simply discard this error, you get harsh banding and blown-out flat regions. Floyd-Steinberg solves this by distributing that residual error to adjacent unvisited pixels according to an exact distribution kernel:

// Floyd-Steinberg Error Propagation Matrix
// Current Pixel: [ * ]
// Neighbors:
//            [ * ]  -> 7/16 (Right)
//   3/16 <-  5/16   -> 1/16 (Bottom row)

function distributeError(imgData, x, y, width, height, errR, errG, errB) {
  const addError = (px, py, factor) => {
    if (px < 0 || px >= width || py < 0 || py >= height) return;
    const idx = (py * width + px) * 4;
    imgData[idx]     += errR * factor;
    imgData[idx + 1] += errG * factor;
    imgData[idx + 2] += errB * factor;
  };

  addError(x + 1, y,     7 / 16);
  addError(x - 1, y + 1, 3 / 16);
  addError(x,     y + 1, 5 / 16);
  addError(x + 1, y + 1, 1 / 16);
}

Ordered Dithering: Bayer Matrices and Crosshatch Geometry

While Floyd-Steinberg is sequential (requiring a line-by-line raster scan where errors propagate downstream), Ordered Dithering is embarrassingly parallel. Every pixel can be evaluated independently without knowing the state of its neighbors.

The algorithm modulates pixel luminance against a normalized Bayer threshold matrix (typically 2x2, 4x4, or 8x8). If the pixel value exceeds the matrix threshold for that specific coordinate coordinate modulo the matrix size, it fires positive; otherwise, it fires zero.

The result is a strikingly rhythmic, geometric crosshatch texture that screams retro 1980s computing and is trivial to compute at lightning speed in web graphics shaders.

Building Interactive Retro Studios on the Web

In tools like the llmscope.link Retro Dither Filter Studio, we combine these classic algorithms with modern canvas mechanics: dynamic gamma correction, CRT scanline overlays, high-contrast monochrome palettes (Game Boy Green, Cyberpunk Amber, Apple II Phosphor), and interactive split-screen inspectors.

By running the quantization loop inside an optimized canvas buffer directly in the user’s browser, creators can tweak threshold matrices, export ultra-high-resolution 4x upscale posters, and create retro social headers without uploading a single pixel to an external server.