Very cool way to visualize it but I will be honest the threshold map doesn’t make sense. This didn’t seem to explain how to form the map, how to choose the threshold values, and so on. It showed grey pixels passing through white, black, and grey pixels and moved onto generalizing this pattern.

Is this just me being dumb or the curse of knowledge where something is so obvious to the author that they don’t even bother explaining it?

How to build the ordered threshold map isn’t obvious, there are some very clever ideas & techniques.

That said, it might help to keep the ‘threshold’ part in mind. The grey pixels turn into black & white via thresholding, i.e., dithered_color = (raw_color > threshold_color) ? white : black; It might have helped if at the start the point was made that using a threshold map made of solid middle grey results in the un-dithered image.

You can use a random number for the threshold, i.e., dithered_color = (raw_color > random()) ? white: black; For either random threshold or a threshold map to approximate the original gray tone, the average threshold value needs to be 0.5. That’s a big clue in how you might start making your own ordered threshold map!

The next step is thinking a little about which pixels turn white as the gray value moves slowly from black to white. It’s best if each time a dithered pixel turns white, it’s not right next to the last one that turned white; you want there to be separate between white pixels when only some of them are white. 50% gray should be a checker board, for example, maybe as opposed to an 8x8 region where the left half is black and right half is white. 25% grey should perhaps be 1 white pixel in the top left corner of every 2x2 region.

There are a few different ways to achieve those goals, with slightly different tradeoffs, but those are the main things to consider. You might have a lot of fun designing your own threshold map before reading about how others do it. This is insanely easy to experiment with on ShaderToy…

They say that part 2 will discuss how that’s formed, and 3 will discuss error diffusion dithering.

An incredibly beautiful visualisation but I felt the same. As well as being confused by the threshold map, at first the text seems to suggest that the 'binary' image is the input to the dithering algorithm in order to 'flip' some of the whites to black and vice versa but then it uses a gray area as input to the threshold map.

On the next episode of dragon ball Z...