Skip to content
Tech News
← Back to articles

Show HN: M. C. Escher spiral in WebGL inspired by 3Blue1Brown

read original get WebGL Escher Spiral Kit → more articles
Why This Matters

This project demonstrates how classic recursive and infinite-loop visual effects, inspired by M. C. Escher and Douglas Hofstadter, can be rendered interactively using WebGL. It highlights the potential for creating mesmerizing, mathematically inspired visuals that enhance both artistic expression and understanding of complex recursive concepts in the digital space, offering new tools for artists and developers alike.

Key Takeaways

Show Shader / About

See this fantastic 3Blue1Brown video for an in depth explanation.

To summarize: The original idea is popularized by M. C. Escher in their artworks.

The droste effect is the idea of embedding a smaller version of an image into itself leading to an (theoretically) infinitely repeating recursive depth.

Escher took this idea even further by breaking the boundary between two recursive images and morphing them together. This leads to the visual impression that there are no separate instances of a repeated image but just a single image spiraling inwards.

This effect can also be recognized as strange loop as done by Douglas Hofstadter in his book Gödel, Escher, Bach.

Computationally, to turn any classic image into a droste image a smaller version of the classic image has just to be renderered somewhere ontop of the original image. Depending on the scaling factor between nested images this has to be repeated until the threshold of the required display resolution is met, so that nobody can recognize that there are in fact not infinite smaller and smaller images.

Generating an Escher spiral to connect all the recursive images smoothly is slightly more sophisticated. We need to transform the (x,y)-coordinates of the image into polar coordinates of radius and angle measured from the center point in the image at which the recursion takes place. This makes both coordinates periodic: The angle is obviously periodic and the radius is periodic in droste images because when moving inwards or outwards the image will repeat after some period

So just changing the images coordinate system from cartesian to polar coordinates enables us to see and to express the periodicity of the image much more clearly.

The next trick is to transform (rotate and scale) the image in its polar coordinate space. The key insight required for this is that all concetric circles from the original image are straight horzontall lines inside the polar space (because they have all the same radius but different angles in the original image).

... continue reading