DITHER_STUDIO

A browser-based image and video dithering tool with a retro terminal aesthetic. Apply classic dithering algorithms and color palettes — all processed locally in your browser.

Features

Dithering Algorithms

• None — No dithering, palette reduction only
• Threshold — Simple threshold-based dithering
• Bayer 2×2, 4×4, 8×8 — Ordered dithering with different matrix sizes
• Clustered Dot — Dot-cluster ordered dithering
• Halftone — Classic print halftone pattern
• Blue Noise — Organic-looking noise dithering
• Random — Stochastic random dithering
• Pattern — Repeating pattern dithering
• Crosshatch — Cross-hatched line dithering
• Riemersma — Hilbert-curve error diffusion
• Variable Error — Adaptive error diffusion
• Dot Diffusion — Dot-based diffusion dithering
• Floyd-Steinberg — Smooth error diffusion
• Atkinson — High-contrast error diffusion (Mac classic style)
• Jarvis-Judice-Ninke — Extended error diffusion kernel
• Stucki — Stucki error diffusion

Color Palettes

• Black & White — Pure monochrome
• Gray ×4 / ×8 / ×16 — Grayscale palettes
• CGA Cyan/Magenta, Red/Green, Cyan/Red — Classic CGA 4-color palettes
• EGA ×16 — Classic 16-color EGA palette
• Game Boy — Original Game Boy green palette
• Mono Color — Pick any color, generates 4 shades (dark → bright)
• Custom — Choose your own number of colors (2–256)

Video Support

• Load video files directly (drag & drop or file picker)
• Play/pause and scrub through frames with dithering applied in real-time
• Record dithered output as WebM

Settings

• Dither Scale — Control the dithering pattern size (1–8×)
• Pixelation — Downsample for an authentic retro look
• Brightness — Adjust image brightness (−100 to +100)
• Contrast — Adjust image contrast (−100 to +100)

Export

• PNG — Lossless, perfect for pixel art
• JPEG — Compressed with adjustable quality
• WebP — Modern format with quality control

Other

• Randomize — One-click random combination of all settings
• Drag & drop — Drop images or videos directly onto the canvas
• Accessible — Keyboard navigation, skip links, ARIA labels, reduced-motion support
• No dependencies — Pure HTML, CSS, and vanilla JavaScript
• Privacy — All processing is client-side; your files never leave your computer

Getting Started

Clone the repo and start the local server:

git clone https://github.com/pixelsign/dither-studio.git
cd dither-studio

Option 1: Node.js

node server.js

Option 2: Python

python3 server.py

Both servers start on http://localhost:3001 and open your browser automatically.

Option 3: Open directly

open index.html

Running via a local server is recommended to avoid CORS restrictions some browsers impose on local files.

Project Structure

├── index.html              # App markup
├── style.css               # Terminal-inspired UI
├── dither.js               # Dithering engine and app logic
├── server.js               # Node.js dev server
└── server.py               # Python dev server

Tips

• Floyd-Steinberg or Atkinson are great starting points
• Pixelation + Bayer matrices gives an authentic retro look
• Game Boy palette + Atkinson = nostalgic perfection
• Mono Color lets you create a Game Boy-style effect in any color
• Adjust brightness/contrast before dithering for more control

Browser Compatibility

Works in all modern browsers supporting HTML5 Canvas, ES6, and CSS Grid. Tested on Chrome, Firefox, Safari, and Edge.

Credits

Inspired by:

• "The Art of Dithering and Retro Shading for the Web" by Maxime Heckel
• "The unreasonable effectiveness of dithering" by Jonathan Dobres

License

MIT