On Friday I decided to revisit the topic of dithering to add color. Back in 2017 I made a lot of interactive examples on Observable showing different kinds of dithering. It was fun: I distinctly remember when dithering was still a concern for computers, and it was one of those things, like the different color grading of the different broadcast TV channels, that gave a little texture to media.
Dithering is such a fun topic that a lot of people write about it: a few articles are linked below:
I don't have anything that novel to bring to it at this point, but I do want to preserve the little bit of work that I did and posted on Observable this time around. Observable's done a fantastic job keeping notebooks running for nearly a decade now and I don't doubt that they'll do well by their community, but it's no longer the focus and I like the idea of things living on my domain. Plus, it's fun to tinker with new tech and having recently ported my blog to 11ty, here's a chance at trying out WebC as a way to preserve and embed interactive content.
You can drag other images onto the default cat to replace it. Vibrant colors and gradients work best!
I'll spare the full description of dithering because it's been written so many times before. The extension here to color dithering was satisfying because the basic strategy of black & white dithering applied directly. The super-simple form of the algorithm here just consists of scanning each row of pixels left-to-right until you've added up enough lightness to make the pixel white.
To translate this to color, I just created three counters, for red, green, and blue, and added them up in each scan. And then for animation, I prefill those counters with a value that isn't 0. You can uncheck "Loop animation" to let that animation just keep running and eventually make the picture white or black.
Implementing this with 11ty in this case meant using webc, which is a system that builds on web components, but with server rendering. I've been trying to help out with 11ty recently, editing documentation for the project. I like it: 11ty is a well-established project with incredible flexibility and power. It's hard to explain - writing documentation for it is pretty difficult, because there are so many ways to using the software.
webc let me render a <dither-example> element in this post and bundle JavaScript just for that purpose. Web Components - I've had qualms about them in the past and I'm still not fully won over, but maybe this is an appropriate use for them. The port from an Observable notebook to a web component wasn't too hard, though I didn't try and mimic Observable's reactivity with signals or anything, instead it's very vanilla JavaScript.
This website has been around for so long that I think a bunch about the very long-term sustainability of it. I don't want to buy into systems that are going to degrade or leave me with a lot of complexity. I think that webc fits the bill as something quite nice, but not too clever or hard to back out of. 11ty is now a bit overshadowed by astro in the static site generator 'market', but I like that it has a strong focus on keeping down internal complexity, which hopefully means that it's more maintainable in the far future.
I'll write more about 11ty soon. Until then, dithering is fun (still).