Image Dithering

​

Features

• Multiple dithering algorithms (random, 2x2, 4x4, 8x8 Bayer matrices)
• Custom color palettes (2-7 colors)
• Original color preservation mode
• Inverted luminance option
• Adjustable pixel grid size
• Retro/vintage aesthetic

​

Basic Usage

import { ImageDithering } from '@paper-design/shaders-react';

function App() {
  return (
    <ImageDithering
      image="/path/to/image.jpg"
      type="8x8"
      size={2}
      colorFront="#94ffaf"
      colorBack="#000c38"
      colorHighlight="#eaff94"
      colorSteps={2}
      originalColors={false}
      inverted={false}
    />
  );
}

import { mountShader, imageDitheringFragmentShader, DitheringTypes } from '@paper-design/shaders';

const canvas = document.getElementById('canvas');
const mount = mountShader(canvas, {
  fragmentShader: imageDitheringFragmentShader,
  uniforms: {
    u_image: '/path/to/image.jpg',
    u_type: DitheringTypes['8x8'], // 4
    u_pxSize: 2,
    u_colorFront: [0.580, 1.0, 0.686, 1],
    u_colorBack: [0, 0.047, 0.220, 1],
    u_colorHighlight: [0.918, 1.0, 0.580, 1],
    u_colorSteps: 2,
    u_originalColors: false,
    u_inverted: false,
    // Sizing uniforms
    u_fit: 2, // 0=none, 1=contain, 2=cover
    u_scale: 1,
    u_rotation: 0,
    u_offsetX: 0,
    u_offsetY: 0,
    u_originX: 0.5,
    u_originY: 0.5,
  },
});

​

Parameters

​

Visual Parameters

​

Sizing Parameters

​

Animation Parameters

​

Presets

• Default: 8×8 dithering with custom 3-color palette
• Noise: Random dithering with warm colors
• Retro: 2×2 dithering preserving original colors
• Natural: 8×8 dithering with original colors and 5 levels

import { ImageDithering, imageDitheringPresets } from '@paper-design/shaders-react';

function App() {
  return <ImageDithering {...imageDitheringPresets[0].params} image="/image.jpg" />;
}

​

Examples

​

Classic Two-Color Dithering

<ImageDithering
  image="/image.jpg"
  type="8x8"
  size={2}
  colorFront="#000000"
  colorBack="#ffffff"
  colorHighlight="#000000"
  colorSteps={1}
  originalColors={false}
/>

​

Retro Game Effect

<ImageDithering
  image="/image.jpg"
  type="2x2"
  size={3}
  colorFront="#eeeeee"
  colorBack="#5452ff"
  colorHighlight="#eeeeee"
  colorSteps={1}
  originalColors={true}
/>

​

Noise Effect

<ImageDithering
  image="/image.jpg"
  type="random"
  size={1}
  colorFront="#a2997c"
  colorBack="#000000"
  colorHighlight="#ededed"
  colorSteps={1}
/>

​

Natural Gradient

<ImageDithering
  image="/image.jpg"
  type="8x8"
  size={2}
  colorSteps={5}
  originalColors={true}
/>

​

Technical Details

​

Shader Uniforms (Vanilla JS)

import { DitheringTypes } from '@paper-design/shaders';

{
  u_type: DitheringTypes.random, // or 1
  u_pxSize: 2,
  u_colorFront: [r, g, b, a],
  u_colorBack: [r, g, b, a],
  u_colorHighlight: [r, g, b, a],
  u_colorSteps: 2,
  u_originalColors: false,
  u_inverted: false,
}

​

Dithering Types

• random (1): Random noise pattern
• 2x2 (2): Coarse 2×2 Bayer matrix
• 4x4 (3): Medium 4×4 Bayer matrix
• 8x8 (4): Fine 8×8 Bayer matrix

​

Color Modes

• Uses colorFront, colorBack, and colorHighlight
• colorHighlight is used for the brightest areas
• colorSteps controls gradient smoothness

• Preserves image colors while applying dithering
• colorSteps controls quantization levels
• Color palette parameters are ignored

​

Performance Notes

• Static shader (no animation by default)
• Pixel-based rendering for crisp dithering
• Performance scales with canvas size
• Lower size values = more pixels = slower rendering
• Bayer matrices (2×2, 4×4, 8×8) are faster than random