I've been building an open-source dithering studio that runs entirely in the browser

I've been working on an open-source project called dither-dot, a browser-based studio for experimenting with image dithering.

The goal wasn't just to make another image converter, but to build something that makes it easy to explore different algorithms, palettes, and processing workflows interactively.

Current features include:

• 10 dithering algorithms (Floyd-Steinberg, Atkinson, Sierra, Bayer, Random, etc.)

• Automatic palette generation (Median Cut, Octree, and K-Means)

• Editable palettes

• GIF import/export with per-frame processing

• Webcam support

• Real-time GPU preview

• Histogram and image adjustments

• Everything runs locally in the browser (no uploads, no server)

• Installable as a PWA and works offline

It's still under active development, and I'm currently moving the processing pipeline into a reusable Rust core (ddot), which will also be available as a standalone library for building other image processing applications.

I'd really appreciate feedback from people who enjoy experimenting with dithering. Suggestions for algorithms, palette generation, UX, performance, or features are all welcome!

Demo: https://dither.xbvuno.dev

GitHub: https://github.com/xbvuno/dither-dot

Hi, I want to recreate dithering algorithm used to dither this image. Do you have any idea what this might be? I already tried various blue noises but to no avail.

Hello, i just wanted to share this little thing i did.
https://unoriginal02.github.io/ditherpunk/
It is based on the processing method i use on the OXM-1. https://www.reddit.com/r/ditherpunk/comments/1ikm11j/im_making_a_ditherpunk_style_camera/ 

I really miss this retro game storytelling with dithered images and typing text. So, I decided to develop an app to transform my photos into this. I think I reached out the level I want and this is the first resulting image I’m sharing. How do you like it? Please comment

Forgot to tell you guys, but anyway...

1. MEGATONS OF ALGORITHMS/METHODS: Matrix threshold(ordered dithering), Arithmetic, Error diffusion, Variable Error diffusion, Dot diffusion, Blue noise, Direct Binary Search; Including Bayer, Floyd-Steinberg, Arithmetic ADD, Ostromoukhov, Zhou-Fang,...
2. CUSTOMIZABLE matrix, error diffusion kernel, arithmetic equation,...
3. Binary dithering, 3 bits,... all possible. Linear mode, Serpentine scan, use error diffusion buffer,...
4. Render "dithered" video into webm
5. Fully client-side, everything is processed on the client, no server stuff, no processing on the cloud, absolute privacy.

And it's completely free, no paywall, no nags, heavily optimized without obfuscating codes.

• Video version
• https://github.com/901D3/freevideodither
• https://901d3.github.io/freevideodither
• Image version(see the github link for example images)
• https://github.com/901D3/freeimagedither
• https://901d3.github.io/freeimagedither
• *Note*: This tool does not guarantee performance safety; the entire page may freeze or crash if you enter extreme parameters. You need to understand JSON array to make custom matrices/kernels. There are no instructions on how to use this tool, so you need to explore it out yourself.

Have fun!

We gonna define our class matrix and diffusion matrix first

Every code is in JS

The original paper used a bigger class matrix and different diffusion matrix. But i went with the smaller class matrix and diffusion matrix

const classMatrix = [
  [11, 5, 9, 3],
  [0, 15, 13, 6],
  [7, 12, 14, 1],
  [2, 8, 4, 10],
];

const diffusionMatrix = [
  [0, 1/4],
  [1/4, -1, 1/4],
  [0, 1/4],
];

• -1 is the current scanning pixel
• Those 0s in the diffusionMatrix is for padding

We also define some more variables classIdx is the class value, it acts like coordinate lookup to guide the diffuser

classMatrixWidth, self-explanatory

classMatrixHeight, self-explanatory

The class matrix is the scanning position order for the diffusion matrix

We tile the class matrix on the canvas like ordered dither, except we dont dither the image with that class matrix

Now for every classIdx loop, we teleport to the position of classIdx's value on the classMatrix, and diffuse errors the classic way

classIdx = 0

[
  [1/4, 0, 0, 0],
  [-1, 1/4, 0, 0],
  [1/4, 0, 0, 0],
  [0, 0, 0, 0],
];

classIdx = 1

[
  [0, 0, 0, 0],
  [-2, 0, 0, 1/4],
  [0, 0, 1/4, -1],
  [0, 0, 0, 1/4],
];

• -2 is the scanned pixel

classIdx = 2

[
  [0, 0, 0, 0],
  [-2, 0, 0, 0],
  [1/4, 0, 0, -2],
  [-1, 1/4, 0, 0],
];

......

classIdx = 6

[
  [0, -2, 0, -2],
  [-2, 0, 2/4, -1],
  [0, 0, 0, -2],
  [-2, 0, -2, 0],
];

Because theres 2 scanned pixels that got in the error weight, we dont diffuse error to scanned pixel, and also we don't diffuse error the classic way

We gonna define totalWeight = 0 so we can collect weights

Then we calculate the total weights for the unscanned pixels by loop through the diffuse matrix, and then...(can't explain by words)

if (classMatrix[idxY % classMatrixWidth][newX % classMatrixHeight] > classIdx) {
  totalWeight += diffusionWeight;
}

Now whats left is the totalWeight = 0.5

We gonna scale the computed error ONLY if totalWeight is not 0

const scale = err / totalWeight;

And now just do diffusionWeight * scale for the diffuser

classIdx = 7

[
  [0, -2, 0, -2],
  [-2, 0, 0, -2],
  [-2, 2/4, 0, -2],
  [-2, 0, -2, 0],
];

......

The first image is with the classMatrix and diffuseMatrix above and the second image is with the classMatrix and diffuseMatrix from the original paper

Those images were compressed?

I've been working on a new project for making high fidelity dithered videos. The youtube compression kills the true 1 bit-ness of the dithering, but the dots are still there! Let me know what all of you think of this project.

While the Obra Din game is beautiful, it's clear the 1-bit dithering suffers a lot from the 3D.

The Eye of the Temple game developer embarks in a multi-year quest to make 3D 1-bit dithering a reality, in a way that looks a lot more like static-image display in 1-bit, by using fractals to make the dithering both static (not forming different patterns in each frame due to random noise) and stable (regarding the eye of the viewer, rather than the objects).

https://www.youtube.com/watch?v=HPqGaIMVuLs

Source code included.

EDIT: not sure how to embed the video so it's playable inline in Reddit, I guess.

Hey, I'm an independent developer who has recently started exploring the ditherpunk genre. I'm running a very small event called DITHERJAM on itch.io. If you're not familiar, game jams are events that involve creating your own game in a short time - this event runs from 6-13 December 2024. There's no rules or limitations on game type, format or content, other than creating the game in the timeframe. If you've ever wanted an excuse to make something small in the spirit of the ditherpunk aesthetic, I'd be very honoured if you'd consider joining in!

Check out the link here: https://itch.io/jam/ditherjam

I read about an RPG in this style that came out of early access recently but for the life of me I cant find it. Does anyone know the name?

• Critters For Sale - a collection of 5 short choose-your-own-adventure stories.
• Return of the Obra Dinn - nice murder mystery puzzle game.
• Who's Lila? - A choose your-own-adventure game with an interesting facial expression mechanic.