Dithering

https://twitter.com/Kekeflipnote/status/799586621364371456?s=20

In order to achieve the desired effect, I’m going to first generate all of the possible dithering combinations of the six colors.

Dithering is a technique used to create the illusion of more colors or shades in an image than are actually available. It's like blending or mixing dots of different colors to give the appearance of a smoother gradient. This is often used in computer graphics, especially when dealing with limited color palettes or low-resolution displays, to help create a more natural and visually appealing image. Flipnote artists usually take full advantage of dithering techniques to develop a cohesive looking image

Image by Aeris on Medium

I plan on only using color pairs for this effect, however after looking at some of Kéké’s work, I think allowing 3+ color dithering would be a really neat extension if I ever put my hands on it!

Scripting

To get a good look at all the color patterns that should be made, I want to write a python script that generates all of these patterns into a big image.

After a bit of research, I figured out that what I’m looking to use is an ordered dithering matrix.

To simplify things a little bit, let’s look at a 2x2 matrix and a grayscale image. Here, the brightness of each pixel is represented by a value from 0 to 1.

$$ M=\frac{1}{4}\times\begin{bmatrix} 0 & 2 \\ 3 & 1 \end{bmatrix} $$

To apply this matrix to an image, you would start at the top-left corner and compare the pixel's color value to the top-left value of the matrix (1). If the pixel's color value is greater than 1, you would assign it a higher color value from the palette. Otherwise, you would assign it a lower color value. You would then proceed to the next pixel and compare it to the next threshold value (3) and so on. Once you've reached the end of the first row, you move on to the next row and repeat the process.

It ultimately acts as a “pass”, figuring out which pixels to “turn on and off” mathematically to best represent the brightness.

These are also called Bayer matrices.

Below is a sample of different sized Bayer matrices on a gradient. (Images from martinsh)

Original Gradient

8x8 Bayer Matrix

4x4 Bayer Matrix

2x2 Bayer Matrix

Since I want to represent a wide range of values, I want to use an 8x8 Bayer matrix. Below is the mathematical representation.

$$ \mathbf{B}_{8} = \frac{1}{64}\times \begin{bmatrix} 0 & 32 & 8 & 40 & 2 & 34 & 10 & 42 \\ 48 & 16 & 56 & 24 & 50 & 18 & 58 & 26 \\ 12 & 44 & 4 & 36 & 14 & 46 & 6 & 38 \\ 60 & 28 & 52 & 20 & 62 & 30 & 54 & 22 \\ 3 & 35 & 11 & 43 & 1 & 33 & 9 & 41 \\ 51 & 19 & 59 & 27 & 49 & 17 & 57 & 25 \\ 15 & 47 & 7 & 39 & 13 & 45 & 5 & 37 \\ 63 & 31 & 55 & 23 & 61 & 29 & 53 & 21 \end{bmatrix}

Tomorrow, I plan on writing the script using the above information!