Dither Shader

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { cn } from "$UTILS$";
4 
5	type DitheringMode = "bayer" | "halftone" | "noise" | "crosshatch";
6	type ColorMode = "original" | "grayscale" | "duotone" | "custom";
7 
8	interface DitherShaderProps {
9		/** Source image URL */
10		src: string;
11		/** Size of the dithering grid cells */
12		gridSize?: number;
13		/** Type of dithering pattern */
14		ditherMode?: DitheringMode;
15		/** Color processing mode */
16		colorMode?: ColorMode;
17		/** Invert the dithered output colors */
18		invert?: boolean;
19		/** Pixelation multiplier (1 = no pixelation, higher = more pixelated) */
20		pixelRatio?: number;
21		/** Primary color for duotone mode */
22		primaryColor?: string;
23		/** Secondary color for duotone mode */
24		secondaryColor?: string;
25		/** Custom color palette array for custom mode */
26		customPalette?: string[];
27		/** Brightness adjustment (-1 to 1) */
28		brightness?: number;
29		/** Contrast adjustment (0 to 2, 1 = normal) */
30		contrast?: number;
31		/** Background color behind the dithered image */
32		backgroundColor?: string;
33		/** Object fit behavior */
34		objectFit?: "cover" | "contain" | "fill" | "none";
35		/** Threshold bias for dithering (0 to 1) */
36		threshold?: number;
37		/** Enable animation effect */
38		animated?: boolean;
39		/** Animation speed (lower = slower) */
40		animationSpeed?: number;
41		/** Additional CSS classes for the container (use this to set size via Tailwind) */
42		class?: string;
43	}
44 
45	let {
46		src,
47		gridSize = 4,
48		ditherMode = "bayer",
49		colorMode = "original",
50		invert = false,
51		pixelRatio = 1,
52		primaryColor = "#000000",
53		secondaryColor = "#ffffff",
54		customPalette = ["#000000", "#ffffff"],
55		brightness = 0,
56		contrast = 1,
57		backgroundColor = "transparent",
58		objectFit = "cover",
59		threshold = 0.5,
60		animated = false,
61		animationSpeed = 0.02,
62		class: className,
63	}: DitherShaderProps = $props();
64 
65	// 4x4 Bayer matrix for ordered dithering
66	const BAYER_MATRIX_4x4 = [
67		[0, 8, 2, 10],
68		[12, 4, 14, 6],
69		[3, 11, 1, 9],
70		[15, 7, 13, 5],
71	];
72 
73	// 8x8 Bayer matrix for finer dithering
74	const BAYER_MATRIX_8x8 = [
75		[0, 32, 8, 40, 2, 34, 10, 42],
76		[48, 16, 56, 24, 50, 18, 58, 26],
77		[12, 44, 4, 36, 14, 46, 6, 38],
78		[60, 28, 52, 20, 62, 30, 54, 22],
79		[3, 35, 11, 43, 1, 33, 9, 41],
80		[51, 19, 59, 27, 49, 17, 57, 25],
81		[15, 47, 7, 39, 13, 45, 5, 37],
82		[63, 31, 55, 23, 61, 29, 53, 21],
83	];
84 
85	let containerRef: HTMLDivElement;
86	let canvasRef: HTMLCanvasElement;
87	let animationFrameId: number | null = null;
88// … truncated