8 ms·

Dithering – Part 1

461 points by Bogdanp 11mo ago

hackncheese 11mo ago
Somehow my first time seeing Visual Rambling, absolutely beautiful site
seemaze 11mo ago
While I enjoyed the whole presentation, my favorite part after progressing through the entire deck was pressing my back button once and landing right back here on HN :)
- deleted 11mo ago
  [deleted]
- kridsdale1 11mo ago
  Same! I dreaded my history being filled.
ChrisArchitect 11mo ago
There's a weird subset of graphic design grifters on social media obsessed with dithering right now. Submission from the dev earlier https://news.ycombinator.com/item?id=45694750 https://news.ycombinator.com/item?id=45694750
- dbushell 11mo ago
  those dithering perverts how dare they try to educate us with their fancy graphics!
- Modified3019 11mo ago
  Why do you think the term “grifter” applies here?
  - ChrisArchitect 11mo ago
    not here as in HN, out on social posts.... some unhinged claims about inventing dithering trends and a lot of startup/techbro types putting the 'aesthetic' forward as the goto way to success. shrug.
    - Fraterkes 11mo ago
      (For those who are confused, a few days ago on twitter some random graphic designer / webdev claimed that they started the trend of using dithering in modern graphic design. People made of fun of that person. All of that is unrelated to this post)
    - hunter2_ 11mo ago
      I don't think GP meant "here" the way you are interpreting "here" (i.e., this site / that site). Rather, I think they meant "here" to mean "in the sentence you wrote." Put another way, I think GP was asking why you think the term "grifter" has anything to do with graphic designers who are obsessed with dithering right now. Basically, you aren't asserting that they're obtaining value illicitly (i.e., swindling, conning), as would need to be the situation for a grift to occur. If they're convincing customers that their dithering product is a must-buy because dithering is the best thing ever, and the customer hands over their money upon being convinced, that really isn't a grift unless the product somehow ends up not doing the thing. If I lie on a website, and the subsequent wave of additional readers leads me to collect tons of ad revenue, the readers have not been grifted (they still have their money) and the ad network was not grifted (I gave them legitimate traffic). If I lie to a reader in order to take the reader's money, then at that point yes, the reader was grifted.
- hatthew 11mo ago
  I don't think it's a negative thing, but I find it kinda funny that there's a new dithering article on HN at least once a month
lampiaio 11mo ago
Few things brighten my browsing day as much as a virtual ode to dithering.
jarjar2 11mo ago
Two videos from Daniel Shiffman's Coding Train: Turning Images into Dots: The Magic of Dithering https://www.youtube.com/watch?v=0L2n8Tg2FwI https://www.youtube.com/watch?v=0L2n8Tg2FwI Coding Challenge 181: Weighted Voronoi Stippling https://www.youtube.com/watch?v=Bxdt6T_1qgc https://www.youtube.com/watch?v=Bxdt6T_1qgc
anteloper 11mo ago
Good lord this is a beautiful web experience
estebank 11mo ago
Obligatory link to the in-progress forum post about the development of The Return of the Obra Dinn's dithering effect: https://forums.tigsource.com/index.php?topic=40832.msg1363742#msg1363742 https://forums.tigsource.com/index.php?topic=40832.msg136374... The difficulty for dithering on an interactive 3d scene is in making the dithering stable on camera rotation, otherwise you get a twinkling stars effect, not dissimilar to the "fireflies" in reflections in ray-traced games.
- m12k 11mo ago
  And here's a couple videos about a technique that was inspired by the Obra Dinn's dither, but making it surface stable: https://www.youtube.com/watch?v=HPqGaIMVuLs https://www.youtube.com/watch?v=HPqGaIMVuLs (explanation) https://www.youtube.com/watch?v=EzjWBmhO_1E https://www.youtube.com/watch?v=EzjWBmhO_1E (demo)
  - kragen 11mo ago
    These are absolutely amazing, thank you! I had wondered whether something like this was possible because I have this 1-bit-deep screen here, and now I'm delighted to see that it is. I'm just not sure if my machine has enough CPU to manage it.
glimshe 11mo ago
We had another dithering post a few days ago and nobody answered my question... I'm reposting in case someone who comes here knows the answer: "Does anyone know of any application/tool that can perform palette dithering? The idea is "here is a n-color palette specified in their RGB values, here is the full-color RGB image, give me the best possible dithered image using the provided palette". The tools that I've used were underwhelming and produced results full of banding and artifacts. Basically, great dithering in color instead of B/W." EDIT: Thank you for the answers! I'll check all links.
- gyomu 11mo ago
  That’s going to be a tricky problem full of compromises, and entirely up to how you formalize your definition for “the best possible dithered image”. Do you care about preserving relative brightness, contrast, edges,… etc. Human color perception is tricky, and in the outline you give it’s entirely possible that the provided n-color palette (also, what order of magnitude n are we talking about here?) would be inadequate for a satisfactory rendering of the provided full color image.
  - glimshe 11mo ago
    I'd just like a subjectively "good" result that beats the manual approaches using image manipulation programs. n would be less than 4096, but usually much smaller values (256, 16)
- tfinch 11mo ago
  I’m using this for making some quake inspired textures - it’s a bit clunky but works for me https://captain4lk.itch.io/slk-img2pixel https://captain4lk.itch.io/slk-img2pixel
- kevinsync 11mo ago
  I left a comment [0] on the other thread, and this is irrelevant if you aren't using Photoshop, but there's a plugin called DITHERTONE Pro that gives you a lot of control over the dither algorithm used + color grade. For actual design, I tend to use this since I'm already in PS cobbling together an image, and you can tweak the results in realtime to dial it in how you want. I also have used didder [1] a couple times for dithering via CLI / script. Its results can be pretty good too, just more for repeatable batch operations and you need to make sure your palettes and chosen algorithms will produce what you're actually looking for. [0] https://news.ycombinator.com/item?id=45726845 https://news.ycombinator.com/item?id=45726845 [1] https://github.com/makew0rld/didder https://github.com/makew0rld/didder
K0IN 11mo ago
Hei, if someone wants to implement this, feel free to contribute this to my Phomemo M02 (a cheap < 15$) black and white thermal printer, web app. https://github.com/K0IN/Phomemo-M02-Web https://github.com/K0IN/Phomemo-M02-Web
- agarv 11mo ago
  Since I see you're using Vue, I created an MIT licensed dithering web app with Vue. I've never tried to embed it in anything, but you're welcome to give it a shot. https://github.com/allen-garvey/dithermark https://github.com/allen-garvey/dithermark
joefourier 11mo ago
Beautiful demo, but I’m not sure it’s accurate to call dithering an “illusion” of more shades than is available? If you apply a low pass filter to a dithered image, and compare it to a low passed filtered thresholded, you’ll see that the “illusory” shades are really there in the dithered version, they’re just represented differently in the full resolution image. Similarly, a class D amplifier emits purely off/on pulses before a low pass filter is applied, but no one would call the output an auditory “illusion”. In the case of image dithering, isn’t the low pass filter your own vision + the distance to the screen?
- hatthew 11mo ago
  I would call it an illusion because if you pay attention you can clearly see that the color you perceive isn't actually present. You can see white on an RBG computer screen since your eyes simply don't have the resolution to discern the subpixel colors. However, in a dithered image with only black and white, you perceive gray, but you can also tell what the reality is without much effort. Personally, I think that fits the definition of an illusion.
  - dsamarin 11mo ago
    Do you consider the color yellow on your RGB monitor an illusion? (I do)
    - zamadatix 11mo ago
      Same. A fun fact about this is as you increase the bit depth, the percentage of faked outputs actually increases as well. With just 8 bits, you have more 9's than AWS this year!
      - TuxSH 11mo ago
        You can also add a temporal dimension (-> temporal dithering, also known as FRC). For example if you alternate blue and red every frame at 60~120 FPS, the only thing you'll see is purple.
hunter2_ 11mo ago
This is halftone (i.e., an apparent palette with more colors than the actual palette, by ensuring that you aren't just rounding the same way everywhere) but it isn't dithering in my opinion. To me, dithering means fading away the banding that occurs when the palette (or the apparent palette achieved via halftone) isn't large enough to avoid banding on its own. The halftone technique demonstrated here takes a palette of 2 colors and increases it to something on the order of 20 apparent colors, but even with 20 there are extremely obvious bands. That banding can be virtually eliminated by having way more colors (say, 256 if grayscale, 256^3 if RGB) or it can be virtually eliminated via dithering. I suspect the "error diffusion" technique (which is teased at the end of this demo) does what I'm talking about. Noise is the key to dithering, and I don't see any noise in this demo. Everything is deterministic. But the presentation is spectacular!
- monitron 11mo ago
  You made me curious. It looks like dithering is still an accepted name for this kind of technique: https://en.wikipedia.org/wiki/Ordered_dithering https://en.wikipedia.org/wiki/Ordered_dithering
  - hunter2_ 11mo ago
    Glad I snuck in that it's just my opinion! But the article you linked to sort of admits what I'm saying: > The above thresholding matrix approach describes the Bayer family of ordered dithering algorithms. A number of other algorithms are also known; they generally involve changes in the threshold matrix, equivalent to the "noise" in general descriptions of dithering. Basically, I'm leaning into "general descriptions of dithering" with my noise requirement, and the lack of noise in "ordered dithering" leads me to consider it not-quite-dithering. The very first sentence of the general Dithering article [0] connects with my perspective as well: > preventing large-scale patterns such as color banding Aside: I probably misspoke with the word "halftone" earlier; apparently that's a specific thing as opposed to an umbrella term. I'm not sure there's a great word (other than "dither"...) for techniques to trade resolution for color. [0] https://en.wikipedia.org/wiki/Dither https://en.wikipedia.org/wiki/Dither
jzacharia 11mo ago
I've been working on an implementation of this in Rust actually, weird timing. Cool article.
- shrinks99 11mo ago
  A friend of mine wrote one for Go with the goal of creating the best and most complete dithering library out there and I think he did a decent job. Worth a look if you're looking for reference implementations! Here's his: https://github.com/makew0rld/dither https://github.com/makew0rld/dither
janderson215 11mo ago
This was an amazing presentation! In one of the earliest screens, it is demonstrated that there are more or less 8 different shades of gray from just different patterns of black/white pixel arrangement. Is it possible to use the “blow up” view to classify the different shades of gray in an image to determine what the pattern should be for a given pixel grouping should be? Maybe this would be accomplishing the same thing the threshold filter accomplishes and have the same end result or possibly a different dithering method. Just trying to integrate this into my brain.
marstall 11mo ago
unbelievable. gifted explainer!
snvzz 11mo ago
To the webpage author, I'd suggest adding WASD navigation as an alternative to cursor keys.
IgorPartola 11mo ago
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?
- egypturnash 11mo ago
  They say that part 2 will discuss how that’s formed, and 3 will discuss error diffusion dithering.
- martijn_himself 11mo ago
  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.
- kaycey2022 11mo ago
  On the next episode of dragon ball Z...
- dahart 11mo ago
  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…
agys 11mo ago
I used different types of dithering (ordered, error diffusion) in many of my design projects as a visual language, static or animated, mostly for projects related to tech/computers/blockchain, sometimes combined with ASCII art. There is a certain warmth (or maybe it’s just nostalgia) of these older techniques that can be harvested and combined with new ideas or new takes. (Apologies for the Instagram links). D.Y.O.R.: https://www.instagram.com/p/DH1AjFzi3c6 https://www.instagram.com/p/DH1AjFzi3c6 D.Y.O.R. (printed): https://www.instagram.com/p/Cjfzy23sCOg https://www.instagram.com/p/Cjfzy23sCOg Titles: https://www.instagram.com/p/DHITpNYiWtF https://www.instagram.com/p/DHITpNYiWtF Experiment on controlling the amount of dithering: https://www.instagram.com/p/CYO_h9Yh18e/ https://www.instagram.com/p/CYO_h9Yh18e/
- MarcelOlsz 11mo ago
  Great links. I just did my portfolio in a retro-ish style and started getting into making retro shaders. Check it out: https://olsz.me https://olsz.me.
rezmason 11mo ago
I can appreciate the passion and consideration that went into this presentation of the subject!
chaidhat 11mo ago
This is really cool! I always thought dithering was just blending two colors by alternating adjacent pixels, I didn't know there was more ways to do it than one.
veltas 11mo ago
Surely dithering is good enough to display 10-bit colour on a non-10-bit monitor with good colour. The banding disappears and the noise introduced by dithering should hide the lack of depth completely to human eyes. So a modern use for graphical dithering. And I'm sure there's more. It's not all for retro art.
- virtualritz 11mo ago
  > Surely dithering is good enough to display 10-bit colour on a non-10-bit monitor with good colour. Indeed, but most software does not do this. It's not on people's minds. When people hear dithering they think of palette dithering. People think 8bit/channel is enough; but it is not. Because it is only 256 levels of any gradient. And because of gamma correction it's practically quite a bit fewer; about 14% (i.e. 220) on a full 256 step gradient that went through an sRGB OETF. I maintain a Rust crate that solely concerns itself with dithering for such cases as the one you mention. The readme has a gradient on top that should make it obvious why this matters. https://crates.io/crates/dithereens https://crates.io/crates/dithereens
  - zozbot234 11mo ago
    > Indeed, but most software does not do this. It's not on people's minds. It can be done in hardware, or even in the graphics driver. If you can combine spatial (for high resolutions such as 1440p or 4K) and temporal dithering you should expect very good results.
- dahart 11mo ago
  Modern printing uses dithering. When you’re going from a high bit rate down to 10 bits or 8 bits, it’s completely fine to use random dithering. Random might not be as fun to write about as Bayer dither patterns, or error diffusion, but for higher dynamic ranges, random is as effective. Black and white digital dithering of course has it’s roots in halftoning, which printing has used for more than a century, and it continues to be used for newspapers, for example. Photoshop dithers by default when converting from 16 bits per channel to 8 bits. Lots of other image software doesn’t do this, but you start paying attention quickly, I learned from experience, when you order a poster-sized print for $100 and it comes out with visible banding you couldn’t see on your monitor.
ggambetta 11mo ago
Great presentation, loved the format! Looking forward to the other two parts. I did a bit of ordered dithering on the ZX Spectrum Raytracer (https://gabrielgambetta.com/zx-raytracer.html#fourth-iteration-light-just-the-one https://gabrielgambetta.com/zx-raytracer.html#fourth-iterati...), it was surprisingly easy to implement and the results were great. I wonder why it wasn't done more in the 80s (other than manual pixel art), probably just performance. I do remember seeing ordered dithering patterns in the 90s, in Windows 3.1 and in The Secret of Monkey Island VGA (I guess the backgrounds were hand-painted and scanned?).
laurentlb 11mo ago
Interesting topic. I appreciate the effort that went into this, there are some good animations. But I find this kind of presentation much harder to read than a classic blog post. It's difficult to skim through the text to see how far it goes (and the article structure is not apparent); instead, I was kind of forced to read the text sentence by sentence (since I was familiar with the topic, I wanted to skip over the basics).
- anonymous908213 11mo ago
  It may be more appropriate to compare this to a video than a blog post. This is an interactive video where you control the pacing, such that you don't have to pause if you need more time to read, and can advance as soon as you're done reading the current slide. I generally prefer text content over video content myself, but this seems fine as a variation of the latter.
cvanelteren 11mo ago
Amazing animations!
fortyseven 11mo ago
Ah, yes, the usual "Umm, ackshully this issunt dithering IMHO" segment of the audience is here.
Faizan711 11mo ago
Amazing!!!
brson 11mo ago
I wanted to love this so much but my eyeballs were screaming trying to read the text over the crawling dither pattern.
- jdc0589 11mo ago
  I made it about 7 seconds
bntr 11mo ago
Once I made a transition between two ditherings: https://github.com/bntre/dithering-gradient-py https://github.com/bntre/dithering-gradient-py
- lioeters 11mo ago
  That's a pretty neat effect, a smooth transition between ordered dithering and error diffusion.
6767bbgbn 11mo ago
67

461 points by Bogdanp 11mo ago

Somehow my first time seeing Visual Rambling, absolutely beautiful site

While I enjoyed the whole presentation, my favorite part after progressing through the entire deck was pressing my back button once and landing right back here on HN :)

deleted 11mo ago
[deleted]
kridsdale1 11mo ago
Same! I dreaded my history being filled.

ChrisArchitect 11mo ago

There's a weird subset of graphic design grifters on social media obsessed with dithering right now. Submission from the dev earlier https://news.ycombinator.com/item?id=45694750 https://news.ycombinator.com/item?id=45694750

dbushell 11mo ago
those dithering perverts how dare they try to educate us with their fancy graphics!
Modified3019 11mo ago
Why do you think the term “grifter” applies here?
- ChrisArchitect 11mo ago
  not here as in HN, out on social posts.... some unhinged claims about inventing dithering trends and a lot of startup/techbro types putting the 'aesthetic' forward as the goto way to success. shrug.
  - Fraterkes 11mo ago
    (For those who are confused, a few days ago on twitter some random graphic designer / webdev claimed that they started the trend of using dithering in modern graphic design. People made of fun of that person. All of that is unrelated to this post)
  - hunter2_ 11mo ago
    I don't think GP meant "here" the way you are interpreting "here" (i.e., this site / that site). Rather, I think they meant "here" to mean "in the sentence you wrote." Put another way, I think GP was asking why you think the term "grifter" has anything to do with graphic designers who are obsessed with dithering right now. Basically, you aren't asserting that they're obtaining value illicitly (i.e., swindling, conning), as would need to be the situation for a grift to occur. If they're convincing customers that their dithering product is a must-buy because dithering is the best thing ever, and the customer hands over their money upon being convinced, that really isn't a grift unless the product somehow ends up not doing the thing. If I lie on a website, and the subsequent wave of additional readers leads me to collect tons of ad revenue, the readers have not been grifted (they still have their money) and the ad network was not grifted (I gave them legitimate traffic). If I lie to a reader in order to take the reader's money, then at that point yes, the reader was grifted.
hatthew 11mo ago
I don't think it's a negative thing, but I find it kinda funny that there's a new dithering article on HN at least once a month

lampiaio 11mo ago

Few things brighten my browsing day as much as a virtual ode to dithering.

jarjar2 11mo ago

Two videos from Daniel Shiffman's Coding Train: Turning Images into Dots: The Magic of Dithering https://www.youtube.com/watch?v=0L2n8Tg2FwI https://www.youtube.com/watch?v=0L2n8Tg2FwI Coding Challenge 181: Weighted Voronoi Stippling https://www.youtube.com/watch?v=Bxdt6T_1qgc https://www.youtube.com/watch?v=Bxdt6T_1qgc

anteloper 11mo ago

Good lord this is a beautiful web experience

estebank 11mo ago

Obligatory link to the in-progress forum post about the development of The Return of the Obra Dinn's dithering effect: https://forums.tigsource.com/index.php?topic=40832.msg1363742#msg1363742 https://forums.tigsource.com/index.php?topic=40832.msg136374... The difficulty for dithering on an interactive 3d scene is in making the dithering stable on camera rotation, otherwise you get a twinkling stars effect, not dissimilar to the "fireflies" in reflections in ray-traced games.

m12k 11mo ago
And here's a couple videos about a technique that was inspired by the Obra Dinn's dither, but making it surface stable: https://www.youtube.com/watch?v=HPqGaIMVuLs https://www.youtube.com/watch?v=HPqGaIMVuLs (explanation) https://www.youtube.com/watch?v=EzjWBmhO_1E https://www.youtube.com/watch?v=EzjWBmhO_1E (demo)
- kragen 11mo ago
  These are absolutely amazing, thank you! I had wondered whether something like this was possible because I have this 1-bit-deep screen here, and now I'm delighted to see that it is. I'm just not sure if my machine has enough CPU to manage it.

glimshe 11mo ago

We had another dithering post a few days ago and nobody answered my question... I'm reposting in case someone who comes here knows the answer: "Does anyone know of any application/tool that can perform palette dithering? The idea is "here is a n-color palette specified in their RGB values, here is the full-color RGB image, give me the best possible dithered image using the provided palette". The tools that I've used were underwhelming and produced results full of banding and artifacts. Basically, great dithering in color instead of B/W." EDIT: Thank you for the answers! I'll check all links.

gyomu 11mo ago
That’s going to be a tricky problem full of compromises, and entirely up to how you formalize your definition for “the best possible dithered image”. Do you care about preserving relative brightness, contrast, edges,… etc. Human color perception is tricky, and in the outline you give it’s entirely possible that the provided n-color palette (also, what order of magnitude n are we talking about here?) would be inadequate for a satisfactory rendering of the provided full color image.
- glimshe 11mo ago
  I'd just like a subjectively "good" result that beats the manual approaches using image manipulation programs. n would be less than 4096, but usually much smaller values (256, 16)
tfinch 11mo ago
I’m using this for making some quake inspired textures - it’s a bit clunky but works for me https://captain4lk.itch.io/slk-img2pixel https://captain4lk.itch.io/slk-img2pixel
kevinsync 11mo ago
I left a comment [0] on the other thread, and this is irrelevant if you aren't using Photoshop, but there's a plugin called DITHERTONE Pro that gives you a lot of control over the dither algorithm used + color grade. For actual design, I tend to use this since I'm already in PS cobbling together an image, and you can tweak the results in realtime to dial it in how you want. I also have used didder [1] a couple times for dithering via CLI / script. Its results can be pretty good too, just more for repeatable batch operations and you need to make sure your palettes and chosen algorithms will produce what you're actually looking for. [0] https://news.ycombinator.com/item?id=45726845 https://news.ycombinator.com/item?id=45726845 [1] https://github.com/makew0rld/didder https://github.com/makew0rld/didder

K0IN 11mo ago

Hei, if someone wants to implement this, feel free to contribute this to my Phomemo M02 (a cheap < 15$) black and white thermal printer, web app. https://github.com/K0IN/Phomemo-M02-Web https://github.com/K0IN/Phomemo-M02-Web

agarv 11mo ago
Since I see you're using Vue, I created an MIT licensed dithering web app with Vue. I've never tried to embed it in anything, but you're welcome to give it a shot. https://github.com/allen-garvey/dithermark https://github.com/allen-garvey/dithermark

joefourier 11mo ago

Beautiful demo, but I’m not sure it’s accurate to call dithering an “illusion” of more shades than is available? If you apply a low pass filter to a dithered image, and compare it to a low passed filtered thresholded, you’ll see that the “illusory” shades are really there in the dithered version, they’re just represented differently in the full resolution image. Similarly, a class D amplifier emits purely off/on pulses before a low pass filter is applied, but no one would call the output an auditory “illusion”. In the case of image dithering, isn’t the low pass filter your own vision + the distance to the screen?

hatthew 11mo ago
I would call it an illusion because if you pay attention you can clearly see that the color you perceive isn't actually present. You can see white on an RBG computer screen since your eyes simply don't have the resolution to discern the subpixel colors. However, in a dithered image with only black and white, you perceive gray, but you can also tell what the reality is without much effort. Personally, I think that fits the definition of an illusion.
- dsamarin 11mo ago
  Do you consider the color yellow on your RGB monitor an illusion? (I do)
  - zamadatix 11mo ago
    Same. A fun fact about this is as you increase the bit depth, the percentage of faked outputs actually increases as well. With just 8 bits, you have more 9's than AWS this year!
    - TuxSH 11mo ago
      You can also add a temporal dimension (-> temporal dithering, also known as FRC). For example if you alternate blue and red every frame at 60~120 FPS, the only thing you'll see is purple.

hunter2_ 11mo ago

This is halftone (i.e., an apparent palette with more colors than the actual palette, by ensuring that you aren't just rounding the same way everywhere) but it isn't dithering in my opinion. To me, dithering means fading away the banding that occurs when the palette (or the apparent palette achieved via halftone) isn't large enough to avoid banding on its own. The halftone technique demonstrated here takes a palette of 2 colors and increases it to something on the order of 20 apparent colors, but even with 20 there are extremely obvious bands. That banding can be virtually eliminated by having way more colors (say, 256 if grayscale, 256^3 if RGB) or it can be virtually eliminated via dithering. I suspect the "error diffusion" technique (which is teased at the end of this demo) does what I'm talking about. Noise is the key to dithering, and I don't see any noise in this demo. Everything is deterministic. But the presentation is spectacular!

monitron 11mo ago
You made me curious. It looks like dithering is still an accepted name for this kind of technique: https://en.wikipedia.org/wiki/Ordered_dithering https://en.wikipedia.org/wiki/Ordered_dithering
- hunter2_ 11mo ago
  Glad I snuck in that it's just my opinion! But the article you linked to sort of admits what I'm saying: > The above thresholding matrix approach describes the Bayer family of ordered dithering algorithms. A number of other algorithms are also known; they generally involve changes in the threshold matrix, equivalent to the "noise" in general descriptions of dithering. Basically, I'm leaning into "general descriptions of dithering" with my noise requirement, and the lack of noise in "ordered dithering" leads me to consider it not-quite-dithering. The very first sentence of the general Dithering article [0] connects with my perspective as well: > preventing large-scale patterns such as color banding Aside: I probably misspoke with the word "halftone" earlier; apparently that's a specific thing as opposed to an umbrella term. I'm not sure there's a great word (other than "dither"...) for techniques to trade resolution for color. [0] https://en.wikipedia.org/wiki/Dither https://en.wikipedia.org/wiki/Dither

jzacharia 11mo ago

I've been working on an implementation of this in Rust actually, weird timing. Cool article.

shrinks99 11mo ago
A friend of mine wrote one for Go with the goal of creating the best and most complete dithering library out there and I think he did a decent job. Worth a look if you're looking for reference implementations! Here's his: https://github.com/makew0rld/dither https://github.com/makew0rld/dither

janderson215 11mo ago

This was an amazing presentation! In one of the earliest screens, it is demonstrated that there are more or less 8 different shades of gray from just different patterns of black/white pixel arrangement. Is it possible to use the “blow up” view to classify the different shades of gray in an image to determine what the pattern should be for a given pixel grouping should be? Maybe this would be accomplishing the same thing the threshold filter accomplishes and have the same end result or possibly a different dithering method. Just trying to integrate this into my brain.

marstall 11mo ago

unbelievable. gifted explainer!

snvzz 11mo ago

To the webpage author, I'd suggest adding WASD navigation as an alternative to cursor keys.

IgorPartola 11mo ago

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?

egypturnash 11mo ago
They say that part 2 will discuss how that’s formed, and 3 will discuss error diffusion dithering.
martijn_himself 11mo ago
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.
kaycey2022 11mo ago
On the next episode of dragon ball Z...
dahart 11mo ago
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…

agys 11mo ago

I used different types of dithering (ordered, error diffusion) in many of my design projects as a visual language, static or animated, mostly for projects related to tech/computers/blockchain, sometimes combined with ASCII art. There is a certain warmth (or maybe it’s just nostalgia) of these older techniques that can be harvested and combined with new ideas or new takes. (Apologies for the Instagram links). D.Y.O.R.: https://www.instagram.com/p/DH1AjFzi3c6 https://www.instagram.com/p/DH1AjFzi3c6 D.Y.O.R. (printed): https://www.instagram.com/p/Cjfzy23sCOg https://www.instagram.com/p/Cjfzy23sCOg Titles: https://www.instagram.com/p/DHITpNYiWtF https://www.instagram.com/p/DHITpNYiWtF Experiment on controlling the amount of dithering: https://www.instagram.com/p/CYO_h9Yh18e/ https://www.instagram.com/p/CYO_h9Yh18e/

MarcelOlsz 11mo ago
Great links. I just did my portfolio in a retro-ish style and started getting into making retro shaders. Check it out: https://olsz.me https://olsz.me.

rezmason 11mo ago

I can appreciate the passion and consideration that went into this presentation of the subject!

chaidhat 11mo ago

This is really cool! I always thought dithering was just blending two colors by alternating adjacent pixels, I didn't know there was more ways to do it than one.

veltas 11mo ago

Surely dithering is good enough to display 10-bit colour on a non-10-bit monitor with good colour. The banding disappears and the noise introduced by dithering should hide the lack of depth completely to human eyes. So a modern use for graphical dithering. And I'm sure there's more. It's not all for retro art.

virtualritz 11mo ago
> Surely dithering is good enough to display 10-bit colour on a non-10-bit monitor with good colour. Indeed, but most software does not do this. It's not on people's minds. When people hear dithering they think of palette dithering. People think 8bit/channel is enough; but it is not. Because it is only 256 levels of any gradient. And because of gamma correction it's practically quite a bit fewer; about 14% (i.e. 220) on a full 256 step gradient that went through an sRGB OETF. I maintain a Rust crate that solely concerns itself with dithering for such cases as the one you mention. The readme has a gradient on top that should make it obvious why this matters. https://crates.io/crates/dithereens https://crates.io/crates/dithereens
- zozbot234 11mo ago
  > Indeed, but most software does not do this. It's not on people's minds. It can be done in hardware, or even in the graphics driver. If you can combine spatial (for high resolutions such as 1440p or 4K) and temporal dithering you should expect very good results.
dahart 11mo ago
Modern printing uses dithering. When you’re going from a high bit rate down to 10 bits or 8 bits, it’s completely fine to use random dithering. Random might not be as fun to write about as Bayer dither patterns, or error diffusion, but for higher dynamic ranges, random is as effective. Black and white digital dithering of course has it’s roots in halftoning, which printing has used for more than a century, and it continues to be used for newspapers, for example. Photoshop dithers by default when converting from 16 bits per channel to 8 bits. Lots of other image software doesn’t do this, but you start paying attention quickly, I learned from experience, when you order a poster-sized print for $100 and it comes out with visible banding you couldn’t see on your monitor.

ggambetta 11mo ago

Great presentation, loved the format! Looking forward to the other two parts. I did a bit of ordered dithering on the ZX Spectrum Raytracer (https://gabrielgambetta.com/zx-raytracer.html#fourth-iteration-light-just-the-one https://gabrielgambetta.com/zx-raytracer.html#fourth-iterati...), it was surprisingly easy to implement and the results were great. I wonder why it wasn't done more in the 80s (other than manual pixel art), probably just performance. I do remember seeing ordered dithering patterns in the 90s, in Windows 3.1 and in The Secret of Monkey Island VGA (I guess the backgrounds were hand-painted and scanned?).

laurentlb 11mo ago

Interesting topic. I appreciate the effort that went into this, there are some good animations. But I find this kind of presentation much harder to read than a classic blog post. It's difficult to skim through the text to see how far it goes (and the article structure is not apparent); instead, I was kind of forced to read the text sentence by sentence (since I was familiar with the topic, I wanted to skip over the basics).

anonymous908213 11mo ago
It may be more appropriate to compare this to a video than a blog post. This is an interactive video where you control the pacing, such that you don't have to pause if you need more time to read, and can advance as soon as you're done reading the current slide. I generally prefer text content over video content myself, but this seems fine as a variation of the latter.

cvanelteren 11mo ago

Amazing animations!

fortyseven 11mo ago

Ah, yes, the usual "Umm, ackshully this issunt dithering IMHO" segment of the audience is here.

Faizan711 11mo ago

Amazing!!!

brson 11mo ago

I wanted to love this so much but my eyeballs were screaming trying to read the text over the crawling dither pattern.

jdc0589 11mo ago
I made it about 7 seconds

bntr 11mo ago

Once I made a transition between two ditherings: https://github.com/bntre/dithering-gradient-py https://github.com/bntre/dithering-gradient-py

lioeters 11mo ago
That's a pretty neat effect, a smooth transition between ordered dithering and error diffusion.

6767bbgbn 11mo ago