The Art of Dithering and Retro Shading for the Web (2024)

I like good pixel dithering. The C64 demo scene has become really good at it. Just look at the girl picture in the frozen start pic. That shows really good taste in picking colors from the weird palette too.<p><a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=P5E6z7AMxIU" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=P5E6z7AMxIU</a>

Related?<p>Ditherpunk: The article I wish I had about monochrome image dithering<p>2021 <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=25633483">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=25633483</a> 200 comments<p>2023 <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=36023706">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=36023706</a> 37 commments

Shameless plug: Return to Castle Floyd Wolfensteinberg<p><a href="https:&#x2F;&#x2F;www.dwitter.net&#x2F;d&#x2F;27957" rel="nofollow">https:&#x2F;&#x2F;www.dwitter.net&#x2F;d&#x2F;27957</a><p>for(c.width&amp;=i=8320;i;C=C-64+S|0)(S&#x2F;64<i>R-R+C&#x2F;3e6^R+3</i>t)%7?R<i>=1.02:x.fillRect(S=i&gt;&gt;6,Y=i&amp;63,q=0|(p=(x[--i]+=7</i>T)+(Y&#x2F;32<i>R-R|0?Y&#x2F;128:1-1&#x2F;R)),Y?1:R=1,T=(p-q||0)&#x2F;16,x[u]+=3</i>T,x[u=i-64]+=5*T,x[u-1]=T)

I really like this writeup.<p>A shameless link to my own dithering web component, which uses Atkinson dithering which I think looks cool but cannot be done on a GPU.<p><a href="https:&#x2F;&#x2F;sheep.horse&#x2F;2023&#x2F;1&#x2F;improved_web_component_for_pixel-accurate_atkinson.html" rel="nofollow">https:&#x2F;&#x2F;sheep.horse&#x2F;2023&#x2F;1&#x2F;improved_web_component_for_pixel-...</a>

I very much enjoy N64 era games, and do wonder if the emulation&#x2F;upscaling is subtracting from the experience. The problem is modern pixels are so tiny, without things like this, It would be a tiny image.<p>Other people want the game post-rendered into modern feel. I guess we&#x27;re all different: For me, the blocky-ness is the point.

The article&#x27;s author, this Maxime Heckel, has got an excellent online portfolio of shader work! <a href="https:&#x2F;&#x2F;maximeheckel.com" rel="nofollow">https:&#x2F;&#x2F;maximeheckel.com</a>

I wondered why the page was full of blank areas, it&#x27;s because of this:<p><a href="https:&#x2F;&#x2F;caniuse.com&#x2F;hevc" rel="nofollow">https:&#x2F;&#x2F;caniuse.com&#x2F;hevc</a><p>... the videos are hevc-encoded and don&#x27;t work for me in eg firefox. (I can see them if I switch to chrome)<p>per ffmpeg:<p><pre><code> Stream #0:0[0x1](und): Video: hevc (Main) (hvc1 &#x2F; 0x31637668), yuv420p(tv, bt709, progressive), 1080x656, 1219 kb&#x2F;s, 60 fps, 60 tbr, 15360 tbn (default)</code></pre>

Very pretty website. I really like the transparency for the nav bar. I would like to emulate this style in my own website. I wish I knew how to add texture to a website that makes it feel unique and not flat. Perhaps I should look into 3d postprocessing effects and how to apply that to a 2d website

Aside from the interesting read, I really like the design of this site. Specially the code blocks.

This is a fantastic blog post! Did not understand all the math, but the nostalgia trip was awesome. Thank you!