Effects / Dither

Floyd-Steinberg

Floyd-Steinberg is the classic error diffusion dithering algorithm, widely used since 1976. It produces high-quality results by distributing quantization error to neighboring pixels in a specific pattern, creating the illusion of more colors with fewer.

dither-floyd-steinbergFree

Effect ID: dither-floyd-steinberg

Example Configuration

floyd-steinberg.json

{
  "effectId": "dither-floyd-steinberg",
  "dither": {
    "pattern": "floydSteinberg",
    "pixelation": 4,
    "paletteId": "monochrome",
    "colors": ["#000000", "#ffffff"],
    "brightness": 1,
    "contrast": 1,
    "threshold": 0.5
  }
}

Settings

Property	Type	Default	Description
`pattern`	string	"floydSteinberg"	Dither pattern algorithm
`pixelation`	number	4	Point size (1-10)
`paletteId`	string	"monochrome"	Color palette ID (monochrome, gameboy, cga, etc.)
`colors`	string[]	["#000", "#fff"]	Color array (dark to light)
`brightness`	number	1	Brightness adjustment (0.5-2)
`contrast`	number	1	Contrast adjustment (0.5-2)
`threshold`	number	0.5	Error diffusion strength (0-1)

How It Works

Floyd-Steinberg scans the image left-to-right, top-to-bottom. For each pixel:

The pixel is quantized to the nearest available color in the palette
The error (difference between original and quantized) is calculated
The error is distributed to neighboring pixels using this pattern:

      X    7/16
3/16  5/16  1/16

Where X is the current pixel and the fractions show how much error goes to each neighbor.

Available Palettes

monochrome - Black and white only
gameboy - Classic Game Boy green shades
cga - CGA 4-color palette
ega - EGA 16-color palette
custom - Define your own palette colors

API Usage

render-request.json

POST /api/v1/render
{
  "state": {
    "canvas": {
      "aspectRatio": "16:9",
      "backgroundColor": "#1a1a1a"
    },
    "layers": [...],
    "selectedLayerId": null,
    "effect": {
      "effectId": "dither-floyd-steinberg",
      "enabled": true,
      "dither": {
        "pattern": "floydSteinberg",
        "pixelation": 4,
        "paletteId": "gameboy",
        "colors": ["#0f380f", "#306230", "#8bac0f", "#9bbc0f"],
        "brightness": 1,
        "contrast": 1,
        "threshold": 0.5
      }
    }
  },
  "format": "png",
  "width": 1920,
  "height": 1080
}

Tips

Start with 2 colors for classic 1-bit dithering
Increase contrast slightly for better definition
Game Boy palette creates nostalgic handheld gaming aesthetic
Compare with Atkinson for a more "open" look