Fast, private, client‑side dithering for images and video — with classic + experimental algorithms, palettes, presets, and an interactive explorer.
Use it in your browser: https://ditheringstudio.com/
No uploads, no account. Everything runs locally in the tab.
- 30 algorithms: error diffusion, ordered matrices, stochastic, adaptive, ASCII.
- Image and video modes. Export frames (PNG/JPEG/WEBP/SVG) or full videos (WebM/MP4*).
- Built‑in palettes (Game Boy, PICO‑8, DB16/32, CGA/EGA, etc.) with live swatch toggling.
- Presets you can save, rename, import/export as tokens, and re‑apply.
- Shareable URLs for algorithm/threshold/resolution/palette/serpentine/invert/ASCII ramp.
- Keyboard shortcuts and grid overlay for precise inspection.
*MP4 availability depends on your browser/OS codecs; WebM is widely supported. WEBP export falls back to PNG if unsupported.
git clone https://github.com/Oslonline/dithering-studio.git
cd dithering-studio
npm install
npm run devOpen the local URL printed in the terminal, drop an image or select a video, tweak settings, and export.
- Load media
- Images: drag & drop one or more files.
- Video: switch to Video Mode and pick a file; scrub/play to preview.
- Choose an algorithm
- Error diffusion (Floyd–Steinberg family, Sierra/Stucki/JJN, Ostromoukhov, adaptive FS) or ordered/stochastic (Bayer 2×2…32×32, Blue Noise), or experimental (dot diffusion, halftone, random threshold, ASCII mosaic).
- Tune controls
- Threshold, resolution, serpentine traversal (diffusion), invert.
- Palette: apply built‑ins or custom colors.
- Presets
- Save the current setup as a preset. Rename, delete, export/import via tokens.
- Export
- Frames: PNG, JPEG, WEBP; plus SVG vector (images only). You can also copy the frame to clipboard.
- Video: record and download as WebM or MP4* directly from the browser.
Every algorithm runs in the live app at ditheringstudio.com. Use the links below to open the interactive tool or read the technical reference page.
| Algorithm | Try live | Reference |
|---|---|---|
| Floyd–Steinberg | Try Floyd–Steinberg Live | Algorithm details |
| False Floyd–Steinberg | Try False Floyd–Steinberg Live | Algorithm details |
| Atkinson | Try Atkinson Live | Algorithm details |
| Sierra Lite | Try Sierra Lite Live | Algorithm details |
| Burkes | Try Burkes Live | Algorithm details |
| Stucki | Try Stucki Live | Algorithm details |
| Sierra | Try Sierra Live | Algorithm details |
| Jarvis–Judice–Ninke | Try JJN Live | Algorithm details |
| Two-Row Sierra | Try Two-Row Sierra Live | Algorithm details |
| Stevenson–Arce | Try Stevenson–Arce Live | Algorithm details |
| Ostromoukhov | Try Ostromoukhov Live | Algorithm details |
| Adaptive FS 3×3 | Try Adaptive FS 3×3 Live | Algorithm details |
| Adaptive FS 7×7 | Try Adaptive FS 7×7 Live | Algorithm details |
| Sierra 2-4A | Try Sierra 2-4A Live | Algorithm details |
| Custom Kernel | Try Custom Kernel Live | Algorithm details |
| Riemersma | Try Riemersma Live | Algorithm details |
| Algorithm | Try live | Reference |
|---|---|---|
| Bayer 2×2 | Try Bayer 2×2 Live | Algorithm details |
| Bayer 4×4 | Try Bayer 4×4 Live | Algorithm details |
| Bayer 8×8 | Try Bayer 8×8 Live | Algorithm details |
| Bayer 16×16 | Try Bayer 16×16 Live | Algorithm details |
| Bayer 32×32 | Try Bayer 32×32 Live | Algorithm details |
| Blue Noise 64×64 | Try Blue Noise 64×64 Live | Algorithm details |
| Algorithm | Try live | Reference |
|---|---|---|
| Binary Threshold | Try Binary Threshold Live | Algorithm details |
| Halftone | Try Halftone Live | Algorithm details |
| Random Threshold | Try Random Threshold Live | Algorithm details |
| Dot Diffusion (Simple) | Try Dot Diffusion Live | Algorithm details |
| ASCII Mosaic | Try ASCII Mosaic Live | Algorithm details |
| Posterize | Try Posterize Live | Algorithm details |
| Woodcut | Try Woodcut Live | Algorithm details |
| Stipple | Try Stipple Live | Algorithm details |
Video dithering (MP4/WebM, frame-by-frame, client-side): Open Video Mode
Browse the full interactive explorer: Education / Algorithms
- Game Boy (4) • NES (approx 54) • PICO‑8 (16) • DawnBringer 16/32 • CGA (16) • EGA (16) • Solarized (16) • Grayscale (4/8) • C64 subset • Web Safe (16)
- F: toggle Focus Mode (hide UI chrome)
- G: toggle pixel grid • Shift+G: cycle grid size
- ←/→: cycle images (when multiple are loaded)
Everything happens in your browser. Media never leaves your machine. No accounts.
- Scripts:
npm run dev,npm run build,npm run preview,npm run lint - Stack: React • TypeScript • Vite • Tailwind • Canvas API
Small, focused PRs are welcome. See CONTRIBUTING.md.
Apache-2.0. See NOTICE for attribution guidance.
Built by Oslo418. Inspired by tools like Dither It and Dither Boy — combined with multi‑algorithm exploration, fast iteration, and palette/threshold tweaking in one place. From a sideproject to a fully functional tool!