Aliasing as Art – Moiré Patterns

Hacker News

Share card

Aliasing as Art – Moiré Patterns

I've found myself focusing on all the chaos going on in the world to an extent that's not healthy. So I decided to make some art that tries to find a little beauty in what otherwise seems chaotic. This is based on the concept of aliasing[1]. That's exactly what anti-aliasing is normally trying to address in computer graphics, but here aliasing is leveraged to generate interesting visuals. It took some doing to overpower the anti-aliasing that browsers insist on doing. If you look at the JS embedded in the HTML, you'll see that it's nothing more than ~4,000 straight lines being drawn from the center of the window to the edge of the circle that circumscribes the corners of the window. Those lines alternate between cyan and purple, all on a yellow background. The elaborate patterns are merely interactions between the jaggies[2] of adjacent lines. If you want to get more intuition for this, try downloading the source and increasing the increment size in the loop (i.e., the `milliradians += 3`) until you can clearly see the straight lines. Try dragging your browser window around the screen while the Moiré Pattern is up and you'll see another level of aliasing that is evocative of magnetic field lines. Aliasing is all around us when you know to look for it. Rendering these patterns digitally is not new. Many of us were doing it 40+ years ago on 8-bit computers (e.g., Apple ][ and Atari 400/800). In those days it was typically integer based. It's freeing to be able to use a little floating point here. I hope the pleasing aesthetics born of complexity helps others process the chaos around them. And if you're aware of other artistic endeavors leveraging aliasing, please leave a comment! ---- [1] https://en.wikipedia.org/wiki/Aliasing [2] https://en.wikipedia.org/wiki/Jaggies