Hyperbolic Tiling {3,7}

Here are some documentations on my attempt to generate a hyperbolic tiling. The goal was to set up a system where I can use any texture/video to be displayed inside the tiling. With a bit of creativity, we could then make images in the style of M.C. Escher’s circle limit.

Mission Statement:

Solution:

• Create the basic reference mesh for the tiling
  • Create a single base triangle in the center with only 3 points.
  • For each edge:
    • Check if the edge-normal is pointing away.
    • If so, reflect the opposite point along the edge using circle inversion.
    • Mark edges to avoid reflecting twice.
  • This should Create a tiling with some overlaps.
    • Delete the overlappers at each iteration.
• Create the refined textured mesh of a single tile
  • Take the single base triangle mentioned above
  • Transform Poincaré-disc model -> Klein-disc model.
  • Remesh the triangle.
  • Orthogonally map uv coordinates onto it.
  • Transform Klein-disc model -> Poincaré-disc model.
• Expand the refined tile using the reference mesh.
  • Iteratively for each edge of the reference mesh
    • Reflect the points on one side of the edge to the other side using circle inversion of a circle that runs through both points and hits the unit circle orthogonally.
    • After each reflection, mark the edge to avoid reflecting twice.
• For the fine details at the edge
  • Place a circle of constant color equal to the average color of a tile behind the tiling.
• Be aware of the following:
  • When using floating points the numerics of the tiny triangles near the edge become unstable. Testing for linear independence of two vectors that are extremely close to each other can be difficult.

Results:

Notice that the arrow’s colors don’t match up everywhere. There is not much freedom when trying to build a seamless pattern.

This image can serve as a template to fill with different images. This triangle will then be mapped to the entire tiling.

The triangle arrow covering shows that in order to get a seamless pattern we need every triangle edge do fit each other triangle edge, even when flipped. This is a property of the {3,7} tiling. Other tilings might not have to deal with this limitation. When we try using an image we are likely doomed to have bad edge alignments somewhere. There will be triangles with non-unique arrangements depending on the reflection-path taken to get there. Here we use a self-portrait from M.C. Escher where you can see where two triangles meet at some non-continuous boarders. The overlap is hard to see in this mess.

Using the TU logo we get this:

If we stick to radially symmetric textures we can get quite fancy and get smooth images. Here is some fitting music. Put this on fullscreen and stare at it for a minute. There is also a 4k 60fps version on youtube.

This was created using my trippy triangle hsv texture video.

Notes:
There is already a web version of a good tiling generator, but it does not allow us to place the initial image in the straight Klein model setting. These sources were very inspiring for this work.
http://www.malinc.se/m/ImageTiling.php
http://www.malinc.se/noneuclidean/en/poincaretiling.php

Future: Cover some other tiling that is not {3,7} that aligns better at the edges. That would be necessary for the circle limit recreation. I started with {3,7} because it just seemed pretty.