An exploration of dithering and flashing

SDK Development Discussion
1

Hello all,

I was a bit unhappy with the examples in Designing for Playdate section 1.7 Dither flashing so I spent some time experimenting and figured Id share.

playdate-20230129-131808

Listed from top to bottom is what your seeing.

  1. This ball is a 5 color posterized image, that the playdate is then dithering each frame so we don't get any flickering as the dithering pattern stays in the same spot in the screen, only the stencil moves. The downside of this is it takes much longer to draw.

  2. This is the same as the previous but with 5 color dithering instead of just the posterization. I don't think this should ever be done in a finished product, I flashes way too much.

  3. This ball only uses preprocessed dithering and flashes a bit.

  4. This ball only uses preprocessed dithering but its pixels are twice as big. it definitaly fairs the best in terms of flashing, but it kills your resolution.

Ive posted my source code here if anyone wants to toy around with it. https://github.com/whoisjim/playdate-dithering-demo

Let me know what you think.

6 Likes
2

How about moving in multiples of 2 and using beyer dither?

1 Like
3

You can speed up version 1 by saving the different dithered images (should only be two with this pattern) and then switching between them with something like ditheredImageTable:drawImage((x + y) % 2 + 1, x, y).

2 Likes
4

Cool test! Here are some bits of code for preventing/reducing dither flashing FWIW:

1 Like
5

Thanks for the input all. That's a pretty clever way to speed up rendering.

I ended up doing another render with teapots instead.

demo

  1. Is the the five color posterized image technique again.

  2. Is a Beyer dither moving 1 pixel at a time.

  3. Is a Beyer dither moving 2 pixel at a time.

  4. Is a noise dither moving 1 pixel at a time. edit: this is not a noise dither see wiki on dithering algorithms

1 Like
6

It's interesting how the movement of your eye can CREATE flicker: I see flicker on #3 (not bad though)--but it's from my eyes following the movement. Then, when I hold the mouse pointer over it and fix on that, the image passing under reveals itself to have no flicker.

I tend to like the look of noise dithers. Especially blue noise (which I'm thinking is NOT what #4 is?) and ended up making custom blue noise stencils for Outside Parties.

7

Oh yes you are correct on number 4. My mistake. the Filter tool i was using doesn't mention. looking at it again I think it might be a Floyd–Steinberg dither or something similar.

2 Likes
8

Just checking: Have you tested these on the device? In my experience the Playdate screen is a lot more susceptible to an annoying flicker than the simulator.

9

Yes I have and I have noticed differences in how bad the flicker looks depending on the screen.

The flicker on the Playdate is similar to what I see on an ASUS VX238 monitor. I also looked at in on a HP E231 which the flicker was less noticeable and on my Samsung Galaxy S22 Ultra the flicker was almost unnoticeable.

1 Like
10

I’ve been experimenting with using an 8bpp image dithered using a 8x8 Bayer pattern. It looks more noisy than flickery on hardware. Depending on the game, one might consider it a style choice instead of an artifact.

It seems reasonably fast, too. With only slightly optimized code I can dither and bit-pack an 8bpp screen-sized image at 49fps

1 Like