logoalt Hacker News

Dithering – Part 2: The Ordered Dithering

237 pointsby ChrisArchitectyesterday at 7:23 PM33 commentsview on HN

Comments

PMunchyesterday at 10:47 PM

Just did a bit of a deep dive into dithering myself, for my project of creating an epaper laptop. https://peterme.net/building-an-epaper-laptop-dithering.html it compares both error diffusion algorithms as well as Bayer, blue noise, and some more novel approaches. Just in case anyone wants to read a lot more about dithering!

show 3 replies
austinthetacotoday at 2:55 PM

Outside of being informative in a really fun way (I learned far more in a couple minutes than I thought I would), that website is stunning. I've been a web dev for over 10 years and I'm still baffled at how people make sites like this, does anyone have any info or resources on how to go about making these sorts of transitional 3d sites beyond just "learn threejs"?

ggambettayesterday at 9:24 PM

I used ordered dithering in my ZX Spectrum raytracer (https://gabrielgambetta.com/zx-raytracer.html#fourth-iterati...). In this case it's applied to a color image, but since every 8x8-pixel block can only have one of two colors (one of these fun limitations of the Spectrum), it's effectively monochrome dithering.

show 1 reply
mblodeyesterday at 10:52 PM

I built a blue noise generator and dithering library in Rust and TypeScript. It generates blue noise textures and applies blue noise dithering to images. There’s a small web demo to try it out [1]. The code is open source [2] [3]

[1] https://blue-noise.blode.co [2] https://github.com/mblode/blue-noise-rust [3] https://github.com/mblode/blue-noise-typescript

ivanesmantovichtoday at 11:24 AM

I’ve created a VS Code theme inspired by dithering/halftone techniques, maybe you’ll like it! I’d really appreciate any feedback:

https://github.com/ivanesmantovich/halftone-theme-vsc

ivanjermakovyesterday at 10:59 PM

There is something very satisfying in viewing media at 100% resolution of your screen. Every pixel is crisp and plays a role. Joy not available by watching videos or viewing scaled images.

Fraterkesyesterday at 11:09 PM

Half the posts here are people promoting their own projects without even mentioning the (really impressive) OP. Bit weird

show 2 replies
AndrewStephenstoday at 8:43 AM

Normally I am not a fan of gimmicky page formats but this series really hits it out of the park with well-considered presentation.

I can't wait until the next installment on error diffusion. I still think Atkinson dithering looks great, so much so that I made a web component to dither images.

augusteotoday at 2:22 AM

Bookmarking this. Clear explanations of graphics algorithms are surprisingly rare.

jonahxyesterday at 8:29 PM

This is really nice work, as are the other posts.

If the author stops by, I'd be interested to hear about the tech used.

kleibatoday at 2:02 PM

Another interesting read: how Lucas Pope did dithering for moving game scenes in his indie game "Return of the Obra Dinn": https://forums.tigsource.com/index.php?topic=40832.msg136374...

ChrisArchitectyesterday at 7:25 PM

Related:

Dithering - Part 1

https://news.ycombinator.com/item?id=45750954

show 1 reply
a_shovelyesterday at 10:10 PM

Bayer dithering in particular is part of the signature look of Flipnote Studio animations, which you may recognize from animators like kekeflipnote (e.g. https://youtu.be/Ut-fJCc0zS4)

show 1 reply
subprotocolyesterday at 8:28 PM

In chrome it says "Loading assets, please wait..." and hangs. but it works for me in firefox

csresselyesterday at 7:38 PM

first post was great, this should be interesting!

ginkotoday at 9:36 AM

I find these sites that try to feed you stuff at a bite-sized pace extremely disrespectful.

show 2 replies