Make Hyperbolic Tilings of Images

• Choose an image-file from your computer.
• Choose a hyperbolic polygon with p vertices, click on a p.
• Choose the number of hyperbolic polygons adjacent to each vertex, click on a q.
• Move the image by dragging if you wish.
• Click on "generate tiling".
• If you want to download a larger image than the one shown on the screen, click on "generate large image" (use Firefox to avoid crashes when downloading).
• If you want the first polygon to be "non-Euclidean", toggle through three different options by clicking on "change the first tile".

The loaded image will be cropped to the centered hyperbolic polygon. Repeated hyperbolic reflections of the centered polygon make up the tiling.

The option generate large generates a tiling that is larger than the image shown on the screen. The default scale factor for an enlarged tiling is four, this is a length factor. Another scale factor can be chosen below. Chrome may crash when trying to download a large image - "Aw, Snap!" Firefox doesn't crash.

Larger tilings take longer time to generate, mostly since the edge of the tiling gets finer. You can stop the generation by clicking on stop. The tiling is only generated as long as this tab is seen in the browser. Enlarged tilings have transparent background.

If change first tile is clicked, the rendering of the first tile will cycle through "no distortion", "Klein distortion", and "polynomial distortion". The effect of the three different options is shown below from left to right. Distorted images take longer to calculate, for this reason moving a distorted image may seem laggy.

The hyperbolic tiling

The tiling is made of regular hyperbolic polygons with \(p\) sides. \(q\) is the number of polygons meeting at each corner. In Euclidean geometry you can only make a tiling of regular polygons if \((p-2)\cdot(q-2)=4\). In other words you can only make a tiling for three pairs of \(\{p,q\}\): \(\{3,6\}, \{4,4\}, \{6,3\}\), see Geometry - Tessellations and Symmetries for an interactive Euclidean tiling. In hyperbolic geometry, the angle sum of a triangle is less than 180°, and you can make a tiling of regular hyperbolic polygons whenever \((p-2)\cdot(q-2)>4\).

When a so-called Poincaré disc is used to model hyperbolic geometry, the entire universe is inside a circle \(C_\infty\). The inside of \(C_\infty\) is gray in the tiling above. The circle itself does not belong to the universe but can be seen as the circle at infinity. When \(q\) tends to infinity, the vertices of the polygons approach \(C_\infty\). The shapes formed by vertices on \(C_\infty\) are so-called ideal polygons. Such ideal polygons are used if the \(q\)-value \(\infty\) is picked in the tiling above.

For information about the math and the construction of a tiling, and an interactive example with draggable points (but no image), see Non-Euclidean Geometry - Interactive Hyperbolic Tiling in the Poincaré disc.

As for distorting the first polygon, the option "Klein distortion" transforms the pixels from an assumed Beltrami-Klein model and then scales the hyperbolic Poincaré polygon. The option "polygonial distortion" is described below.

Polynomial distortion

Every point inside a Eudclidean polygon lies on a segment parallel to the one of the border segments of the polygon.

For every such segments it is possible to find a corresponding hyperbolic geodesic. By mapping all points on a segment to the corresponding geodesic, we get a reasonable mapping from a Euclidean to a hyperbolic polygon.

Pick a point \(A\) inside the Euclidean polygon. Identify a triangle \(\bigtriangleup O, V_1, V_2 \) containing \(A\), as in Figure 3.

There is a line \(l\) through \(A\) parallel to the line \(V_1, V_2 \). Let \(N_1, N_2 \) be the intersection points of \(l\) and \(\bigtriangleup O, V_1, V_2 \). Let \(N\) be the midpoint of the geodesic through \(N_1, N_2 \), and let \(B\) be the intersection between the line \(AN\) and the geodesic, as in Figure 4. It's reasonable to choose \(B\) as the point in the hyperbolic polygon corresponding to \(A\) in the Euclidean polygon.

In order to get a smooth image when points are rounded to integer values corresponding to the grid of pixels, the transformation must be done in reverse order. Given a point \(B\), find the point \(A\). Let the pixel containing \(B\) have the color of the pixel containing \(A\).

Let \(B\) be reflected in \(C_\infty\) to a point \(B'\). Any geodesic through \(B\) must also go through \(B'\). The midpoint \(N\) of the unknown geodesic through the unknown points \(N_1 \) and \(N_2 \) must have the same distance to \(B\) as to \(B'\). Furthermore it must be on the line \(OV\), where \(V\) is the midpoint of the geodesic through \(V_1V_2\).

For simplicity assume \(O = (0,0)\). Denote the coordinates of a point using dot notation. Then: \[ (N.x-B.x)^2+(N.y-B.y)^2 = (N.x-B'.x)^2+(N.y-B'.y)^2 \]

When \(V.y= 0\) then

\[ \begin{align*} N.x & = \frac{B'.x^2 + B'.y^2-B.x^2-B.y^2}{2(B'.x-B.x)} \\ N.y & = 0 \end{align*} \]

otherwise

\[ \frac{N.x}{N.y} = \frac{V.x}{V.y} \]

and \(N.y\) can be found from \[ N.y = \frac{V.y(B'.x^2 + B'.y^2-B.x^2-B.y^2)}{2\left(V.x(B'.x-B.x)+V.y(B'.y-B.y)\right)} \]

Let \(g\) be the geodesic through \(B\) having \(N\) as midpoint. Now \(N_1\) and \(N_2\) can be found as the intersection points between \(g\) and \(\bigtriangleup O, V_1, V_2 \), and \(A\) can be found as the intersection between the line \(BN\) and the line \(N_1N_2\), as in Figure 4.