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

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).

So in the polar space all the smaller and smaller instances of the droste image are unwrapped into equally sized rows below to each other. To break their separation we just have to break the horzontal row structure seperating them. This can easily be done by just rotating everything in polar space so that a single image instance runs diagonally across multiple (actually all infinite) rows.

After the rotation both a single horzontal line and a single vertical line in polar space run through all image instances. When now transforming back into cartesian coordinates this leads to all the instaces of the images having both all radii and and angles in common, resulting in a spiralling effect. The only tricky part is to do the polar space rotation in such a way that the period of the spiral turning lines up with the image being scaled.

Overall this trick of first transforming into polar coordinates, then doing a simple rotation and finally transforming back can be compared to the application of the fourier transform in signal processing. The fourier transform can be used to apply linear filters to a signal. Instead of computing the convolution of the filter kernel with the input signal in the time domain it can be done as a simple element-wise multiplication in the frequency. Instead of doing a complicated calculation directly we first transform into another coordinate system, do a simple calculation there and them transform back. For the Escher effect for calculating a crazy spiral in cartesian space, we just move to polar coordinates, to a simple rotation and them move back.

Below you can read the WebGL vertex and and fragment shaders for doing the the transformation.

Some other people have already built some really cool demos of the same effect. For example this recreation Eschers Print Gallery and the same effect to applied to playing video.

Vertex Shader

Fragment Shader