Not long ago, I became briefly obsessed with dithering in pixel art. I had been playing around with a pixel art shader and realized just how much fun it was writing custom dithering algorithms.

Later I was thinking again about the many ways that dithering could be done by algorithmic means. And what is the point of having algorithms if they’re not interactive, right? So here is my best crack at a fully interactive explanation of dithering, voxelith style!

The Basics of Thresholds

0.50

0.25

1

This is a comparison operation. Go ahead, slide the sliders. You will notice that when a is greater than b, the result is 1. Otherwise it is 0. In this case, b would could be referred to as a "threshold". This is because it is the number a must overcome to result in 1.

White Noise Dithering

This is essentially the same as the slider example. However in this case, both a and b are arrays of pixels (images). They get compared pixel-by-pixel, and the result (a > b) is an array of pixels that are either 0 or 1.

In this case a is a gradient, b is random noise, and a > b looks like an interesting mixture of the two. It’s a lot like a gradient being rendered with stippling.

We will begin to refer to a as the "original" and b as the "dither." Maybe this is starting to make sense.

"Circuit" Dithering

The above example shows a dithering pattern I’m particularly fond of. It’s a mixture of a regular pattern and noise. The slider allows you to "wipe" the original gradient left and right.

The Original Purpose of Dithering

Originally, pixel art was displayed on CRT screens. Given the low resolution and analog nature of the CRTs, pixels were fuzzy and blended together. This blending meant that dense alternating patterns mixed together and created an average of the colors used.

This natural blending of colors was especially useful since graphics in old hardware had severe limits on the number of unique colors that could be displayed.

<insert image>

Fast forward to the modern era in which pixel art has been widely embraced. Old pixel art styles have been imitated and adapted. Despite modern screens that do not have the limitations or analog character of yesteryear’s models, dithering remains a common technique in pixel art.

Back to the Patterns

Given that historical background for dithering, here are some classic dithering patterns.

Checkerboard

The checkerboard is possibly the simplest of dithering patterns. It is used heavily in pixel art because of its compact nature. Since it is a 2×2 repeating pattern, it can fit into many spaces that larger dithering patterns cannot.

The main drawback of the checkerboard is that it can only manage three levels of perceived gray.

Bayer Matrix

This dithering pattern is created from a Bayer matrix. It could be thought of as an "upgraded" checkerboard. In fact, you will notice the checkerboard pattern showing through in the midtones of the 2×2 and 4×4 variants.

Notice how the larger variants of the Bayer matrix create a much smoother gradient effect. Even the 2×2 pulls off 5 shades of gray despite still being the same size as a checkerboard pattern. This dithering pattern was pretty ubiquitous in the early days of computing given its simplicity.

While it is beyond the scope of this article, the math behind the Bayer matrix is pretty simple. Wonderful Wikipedia can tell you about it.

Go Wild

This final interactive part is just for you to play around with. There are several parameters you can tune here, such as the level of the level of noise being added.

Closing Notes

These have all been examples of ordered dithering. Plenty of people refer to Bayer matrices as ordered dithering, but they’re just one type that can be used. Here I’ve looked at a few others, some practical and others just kinda fun.

I hope you got a taste for the many possibilities for ordered dithering! Don’t forget to grab my custom Aseprite dithering pack with a few of my favorite dither patterns. Most of all, happy pixeling!