Dither

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4 5/**6 * Ordered dithering — the plasma is quantised to a handful of colours through7 * a Bayer matrix, so it reads as a 1-bit newsprint or Macintosh screen rather8 * than a smooth gradient.9 *10 * The matrix is the whole trick. Rounding each pixel to the nearest available11 * colour produces flat bands; adding a per-pixel threshold that varies on a12 * fixed 8×8 lattice BEFORE rounding turns that error into a stable crosshatch13 * the eye integrates back into the original tone. It is the same maths that14 * let 1984 hardware show photographs in black and white, and it costs one15 * array lookup per pixel.16 *17 * Bayer specifically, not blue noise or Floyd–Steinberg: the ordered matrix is18 * deterministic and position-based, so the pattern stays locked to the pixel19 * grid as the field animates underneath it. Error diffusion would crawl and20 * shimmer, because each frame's error depends on the last.21 */22 23/** Recursive Bayer construction — each level quadruples the matrix. */24function bayer(level: number): number[][] {25  if (level === 0) return [[0]];26  const smaller = bayer(level - 1);27  const n = smaller.length;28  const size = n * 2;29  const out = Array.from({ length: size }, () => new Array<number>(size).fill(0));30 31  for (let y = 0; y < n; y += 1) {32    for (let x = 0; x < n; x += 1) {33      const v = smaller[y][x] * 4;34      out[y][x] = v;35      out[y][x + n] = v + 2;36      out[y + n][x] = v + 3;37      out[y + n][x + n] = v + 1;38    }39  }40  return out;41}42 43/** `#rrggbb` to a byte triple. */44function toRgb(hex: string): [number, number, number] {45  const match = /^#?([\da-f]{6})$/i.exec(hex.trim());46  if (!match) return [0, 0, 0];47  const n = parseInt(match[1], 16);48  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];49}50 51export interface DitherProps {52  ink?: string;53  paper?: string;54  /** Pixel size of one dithered cell. Larger reads as coarser newsprint. */55  scale?: number;56  /** Bayer matrix level: 1 → 2×2, 2 → 4×4, 3 → 8×8. */57  level?: number;58  speed?: number;59  /** Tones between paper and ink. 2 is pure 1-bit. */60  levels?: number;61  still?: boolean;62  className?: string;63}64 65export function Dither({66  ink = "#c3f53c",67  paper = "#0a0b0e",68  scale = 3,69  level = 3,70  speed = 1,71  levels = 2,72  still = false,73  className = "",74}: DitherProps) {75  const ref = useRef<HTMLCanvasElement>(null);76 77  useEffect(() => {78    const canvas = ref.current;79    if (!canvas) return;80    const ctx = canvas.getContext("2d", { alpha: false });81    if (!ctx) return;82 83    const matrix = bayer(Math.max(1, Math.min(3, Math.round(level))));84    const size = matrix.length;85    const inkRgb = toRgb(ink);86    const paperRgb = toRgb(paper);87 88    const reduced =89      still ||90      (typeof matchMedia === "function" &&91        matchMedia("(prefers-reduced-motion: reduce)").matches);92 93    /* Rendered at 1/scale resolution and stretched back up with smoothing94       off. Drawing every device pixel and then quantising would cost scale²95       times the work to produce an identical image — the whole point is that96       the output has no detail finer than one cell. */97    let width = 0;98    let height = 0;99    let image: ImageData | null = null;100 101    const resize = () => {102      const w = Math.max(1, Math.floor(canvas.clientWidth / scale));103      const h = Math.max(1, Math.floor(canvas.clientHeight / scale));104      if (!canvas.clientWidth || !canvas.clientHeight) return false;105      if (w === width && h === height) return false;106      width = w;107      height = h;108      canvas.width = w;109      canvas.height = h;110      image = ctx.createImageData(w, h);111      ctx.imageSmoothingEnabled = false;112      return true;113    };114 115    const draw = (time: number) => {116      if (!image) return;117      const data = image.data;118      const steps = Math.max(2, Math.round(levels));119 120      for (let y = 0; y < height; y += 1) {121        for (let x = 0; x < width; x += 1) {122          /* A plasma field: layered sines are smooth, cheap and — unlike123             noise — produce the long sweeping gradients that show off what124             dithering does to a tonal ramp. */125          const fx = x / width;126          const fy = y / height;127          let v =128            Math.sin(fx * 6.0 + time) +129            Math.sin((fy * 5.0 - time) * 0.9) +130            Math.sin((fx + fy) * 4.0 + time * 0.6) +131            Math.sin(Math.hypot(fx - 0.5, fy - 0.5) * 12.0 - time * 1.2);132          v = (v + 4) / 8; // → 0–1133 134          /* The dither: offset by the matrix threshold, THEN quantise. */135          const threshold = (matrix[y % size][x % size] + 0.5) / (size * size);136          const shifted = v + (threshold - 0.5) / (steps - 1);137          const tone = Math.max(0, Math.min(1, Math.round(shifted * (steps - 1)) / (steps - 1)));138 139          const i = (y * width + x) * 4;140          data[i] = paperRgb[0] + (inkRgb[0] - paperRgb[0]) * tone;141          data[i + 1] = paperRgb[1] + (inkRgb[1] - paperRgb[1]) * tone;142          data[i + 2] = paperRgb[2] + (inkRgb[2] - paperRgb[2]) * tone;143          data[i + 3] = 255;144        }145      }146 147      ctx.putImageData(image, 0, 0);148    };149 150    let frame = 0;151    const start = performance.now();152 153    const loop = (now: number) => {154      resize();155      draw(((now - start) / 1000) * speed);156      frame = requestAnimationFrame(loop);157    };158 159    resize();160    // Paint one frame synchronously before scheduling the loop, in both161    // paths. Leaving the first draw to rAF means a blank panel for however162    // long the first frame takes — which is forever in a background tab, and163    // visibly long on a slow start.164    draw(reduced ? 1.8 : 0);165    if (!reduced) frame = requestAnimationFrame(loop);166 167    const observer = new ResizeObserver(() => {168      if (reduced && resize()) draw(1.8);169    });170    observer.observe(canvas);171 172    return () => {173      cancelAnimationFrame(frame);174      observer.disconnect();175    };176  }, [ink, paper, scale, level, speed, levels, still]);177 178  return (179    <canvas180      ref={ref}181      aria-hidden182      // The upscale must not be smoothed, or the dither blurs into the183      // gradient it was quantised away from.184      style={{ imageRendering: "pixelated" }}185      className={`block h-full w-full ${className}`}186    />187  );188}189