Various projections of hyperbolic kaleidoscopic images

Similarly to the earlier post “Different projections of spherical kaleidoscopic images” I am now showing the same kaleidoscopic image using different projections you can use in my kaleidoscope browser app It primarily generates images as Poincaré discs. A typical result looks like this:

This is a decoration of a {5,4} hyperbolic tiling made of pentagons, four of them meeting at each corner; or you might see an equivalent tiling of squares, five meeting at each corner. Mirror lines are geodesic lines. Here they are circles that intersect the border of the disc at right angles. Be careful if you follow these lines across the centers of five-fold rotational symmetry.

The Poincaré disc is a particular projection of the hyperboloid model of hyperbolic space. Other projections give different related images. However, I have difficulties to work with the hyperboloid model and I prefer the hemisphere model for looking at different projections. The hemisphere model results from an inverse stereographic projection of the Poincaré disc to the upper hemisphere of a sphere with the same radius as the disc. The center of projection is the south pole of the sphere. The projected boundary of the Poincaré disc lies at the equator of the sphere. Obviously, we can then use all spherical projections available for a sphere. This allows for a lot of experiments.

An orthographic projection of the hemisphere gives the Beltrami-Klein disc. A gnomonic projection of the hyperboloid model gives the same result. The hyperbolic tiling then looks like this:

The orthographic projection magnifies the center of the image and squashes outer regions towards the border. This makes that we see a decorated sphere. Here the mirror lines are straight lines. Again, be careful not get confused by the centers of five-fold symmetry. I prefer this projection to the Poincaré disc because it is more dramatic.

A gnomonic projection of the hemisphere model or an orthographic projection of the hyperbolid model gives the Gans model. The tiling fills the entire plane:

It has strong distortions outside the center as expected for a gnomonic projection. The mirror lines are now hyperboles. This image makes me dizzy. It somehow looks like the inside of a vault.

Rotating the hemisphere such that its border is perpendicular to the xy-plane and then doing a stereographic projection we get the Poincaré plane. This is equal to doing a Cayley transform on the Poincaré disc and gives such an image:

As for the Poincaré disc, geodesics and mirror lines are circles that intersect the border at right angles. The become half-circles and have their centers at the border. This image is more impressive than the Poincaré disc because it is less uniform.

Posted in Anamorphosis, Kaleidoscopes, Tilings | Tagged , , , , , | Leave a comment

Double spirals

In the post “Spirals” I have shown how to transform periodic Euclidean tilings into logarithmic spirals. A typical result looks like that:

The spiral has a center at the origin and goes out forever. Actually, it spirals not only around the origin, but around infinity too. We can see this better if we look at the Riemann sphere. It is a stereographic projection of the entire plane on a sphere placed above the origin. The image of the origin lies at the south pole of the sphere and points infinitely far away all go to the north pole. On this sphere, the spiral goes out from the south pole and grows until it comes to the equator. Then it crosses to the upper hemisphere and shrinks, going towards the north pole. Thus the spiral has two centers, one at the south pole and one at the north pole.

To see both centers of the sphere on the plane we can use the Cayley transform. With complex coordinates it is simply f(z)=(z-i)/(z+i). It maps the point (0,1) to (0,0) and (0,-1) to infinity. Applying first this mapping to the points of the plane and then doing the transform to get a spiral we have images of a spiral that has two centers, one at (0,1) and the other at (0,-1). The spiral shown above now looks like that:

Close to the two centers we get copies of the original spiral. The two spirals are linked together by a distorted copy of the basic square tiling.

You can find more details in the book “Indra’s Pearls”, written by David Mumford, Caroline Series and David Wright.

Posted in Anamorphosis, Kaleidoscopes, Tilings | Leave a comment

Different projections of spherical kaleidoscopic images

As you are here, I suppose that you might be interested in the TilingBot living on twitter. Each day it posts the image of a new tiling. Have a look at and become its follower. I have fun to recognize the symmetries of these tilings. It is surprising to see the effect of different projections. So I upgraded my app that generates kaleidoscopic images. It now offers different projections of a tiling and you can find it at

Today I present different projections of an image with elliptic geometry. It uses a kaleidoscope of three mirrors with corner angles that make four-, three- and two-fold rotational symmetries. As such it generates the symmetries of a octahedron or cube. An additional mirror cuts of the corners as discussed in my earlier post “Decorations of semi-regular tessellations” and results in a decoration of a cuboctahedron projected on a sphere.

The most common view is the orthographic projection. It simply shows one hemisphere as seen from far away. This is a typical result:

Orthographic projection

The mirrors of the kaleidoscope are planes that go through the center of the sphere. Thus, on the surface of the sphere they appear as great circles being mirror lines. In this projection the circles become ellipses, depending on the inclination of their planes. Great circles passing through the center become straight lines.

Going close to the sphere we get the stereographic projection. Imagine that the sphere is decorated with transparent color and that you have a source of light at its north pole. Then you look at the projected image on a tangent plane at the south pole. What you see is a stereographic projection of the sphere. The decoration shown above in orthographic projection now gives us this image:

Stereographic projection

Here, great circles appear as true circles that invert the image. Circles going through the center have an infinite radius and thus appear as straight lines. Looking at small regions, the mapping preserves shapes and changes only their size because it is conformal. For programming the kaleidoscope I am using this view, as you can see in my post “elliptic kaleidoscopes” and in my paper for the Bridges 2008 conference.

Putting the projecting light source at the center of the sphere, we get the gonomic projection. It only shows a hemisphere and looks like this:

Gonomic projection

The great circles now appear as straight lines because the projecting light is at their center. Look out for local mirror lines in this image to find the great circles. The strong distortions make a dramatic effect. Globe lamps might project similar images on the ceiling if the source of light is small enough.

Finally, projections on cylinders are interesting too, in particular the conformal Mercator map:

Mercator projection

This projection is conformal and preserves the shape of small regions similarly to the stereographic projection. But now we get a repeating image in the horizontal direction. The great circles appear as sinusoidal lines.

Obviously, there exist many other projections and I can’t do them all. Tell me if you are missing your favorite one.

Posted in Anamorphosis, Kaleidoscopes | Tagged , , , , | 1 Comment

Anti-aliasing for improving image quality

About a year ago I have briefly shown in my post “smoothing images” that averaging can be important to get good images without pixel noise. For my kaleidoscope app, see, I have improved on these ideas and that’s what I want to present now.

The kaleidoscope app uses three steps to get the colour of an output image pixel from pixels of an input image. First we have a linear transformation from column and row indexes (i,j) of an output pixel to a geometrical space with coordinates (x,y). It translates and a scales:

x = sout * i + a and y = sout * j + b,

where (a,b) is the translation vector and sout a scale factor. Changing the translation and the scaling allows us to zoom in on interesting parts of the image. Then comes a nonlinear mapping in geometrical space that creates the symmetries of the image. This does not need to be a kaleidoscope; instead we could have a fractal or a quasi-periodic tiling. Quite in general, we put:

x = u(x,y) and y = v(x,y)

for its result, where u and v are some arbitrary functions. Finally, we have a linear transformation from geometrical space to indexes (h,k) of input image pixels. It is made of a translation, a rotation and a scaling:

h = sin * cos(α) * x – sin * sin(α) * y + c

and k = sin * sin(α) * x + sin * cos(α) * y + d,

where we can change the scale sout, the rotation angle α and the translation vector (c,d) to choose a suitable sampling region of the input image. The resulting image can vary dramatically. I presented this method somewhat differently in my interactive slide for the Bridges conference 2018; you can see it at

Usually, the index vector (h,k) has not integer numbers but we can round them to the nearest integer and read out the colour of the pixel. Using that colour for the output pixel often gives bad results. Here is an example:

It is a hyperbolic image. At the border of the Poincaré disk we get random pixel garbage instead of a repetition of smaller and smaller copies of the central part. Around the center you see strong aliasing. The rods of a railing do not appear as continuous lines. This image cannot be used.

For better results we have to realize that pixels are not points. They are really small squares that cover the space and their colour is the average colour of these small regions. The three mappings from output image pixels to input image pixels can strongly magnify the size of a square belonging to an output pixel, which then covers many input image pixels. Reading the colour of only one of these pixels can give aliasing or even random results, as in the image shown above. The colour of the output pixel should rather be an average of input image pixels. This gives good results:

The small repeating structure at the border of the disc is now clearly visible and the railing has no aliasing anymore. You can see a related interactive slide at Here I will go more into details.

In the space of output image pixels (i,j) we have trivially a square of side length 1 for each pixel. After the transformation to geometrical space these squares have side lengths equal to the scale factor sout.  We now determine how the second mapping changes the size of the square. To simplify the calculation I assume that its lower left corner lies at the position of the pixel. This supposes that the second mapping in geometrical space is rather smooth. Anyway, if it weren’t we wouldn’t get nice images.

Before the mapping the lower left corner thus lies at

(x,y)=(sout * i + a, sout * j + b)

and after the mapping at

(x,y)=(u(sout * i + a, sout * j + b), v(sout * i + a, sout * j + b)).

Going out from this corner we have two sides connecting it with points corresponding to indexes (i+1,j) and (i,j+1). The first one is a vector A with components

Ax=u(sout * (i+1) + a, sout * j + b)-u(sout * i + a, sout * j + b) and
Ay=v(sout * (i+1) + a, sout * j + b)-v(sout * i + a, sout * j + b).

Similarly for the second side we have a vector B with

Bx=u(sout * i + a, sout * (j+1) + b)-u(sout * i + a, sout * j + b) and
By=v(sout * i + a, sout * (j+1) + b)-v(sout * i + a, sout * j + b).

These vectors are easy to calculate because we already use these values of u and v for mapping the pixel positions. So there is not much extra work needed to get this mapping of the sides of the pixel squares.

The nonlinear mapping translates, rotates and scales the square. In addition it can do a shearing and an anisotropic scaling. But we are not interested in these details. We merely want to know how many input image pixels cover an output image pixel. Thus we calculate the surface S of the parallelogram given by the cross product of the vectors A and B:

S = Ax By – Ay Bx.

The last transform to the space of input pixels makes an additional scaling and the surface of the input image pixel is equal to one. Thus the number N of input image pixels covered by an output image pixel is

N=sin² S.

If N is about equal to one we can simply read out an input image pixel and do not need anti-aliasing. For small N we have to do pixel interpolation. But for large N we have to average the colours of input pixels.

For an efficient calculation we simply average inside an axis aligned square of surface N centred at the mapped position of the pixel and using summed area tables for the red, green and blue components of the input image. This is fast and easy to program. An alternative would be mipmaps on the GPU.


Posted in Kaleidoscopes, programming | Tagged , , | Leave a comment

Bridges 2018 Stockholm

I have been at the Bridges 2018 conference in Stockholm to present my work on kaleidoscopes. My paper “Kaleidoscopes for Non-Euclidean Space” has more details than this blog and is more coherent. The Bridges Organization, which promotes connections between mathematics and the arts, held this conference. You will find a lot of interesting ideas and images on its site.

I have created a new site “” to host interactive pages. There, you can create your own kaleidoscopic images with the browser app “Kaleidoscope“. You can play with the interactive presentation “Bridges 2018” to learn more about its methods and to get some intuitive ideas about elliptic, Euclidian and hyperbolic geometry.




Posted in Kaleidoscopes | Tagged , , | Leave a comment

Straight lines in elliptic and hyperbolic space

A straight line is the shortest path between two points. Discussing curved space we would better call them geodesic lines to avoid confusion. I want to discuss these geodesic lines for surfaces of a sphere, elliptic space and hyperbolic space. Further we shall see how they are defined and that there is some resemblence between these spaces.

Geodesic lines on the surface of a sphere are great circles. An example is the equator of the earth. In general a great circle is the intersection between a plane going through the center of a sphere and the surface of the sphere. Thus we get a unique great circle for any two points on the surface of the sphere because these two points together with the center of the sphere define the plane that contains the great circle. This shows that two points determine a unique geodesic line in spherical geometry and that the geodesic line is not the same as in Euclidean space. Quite in general we expect that two points give a unique geodesic line. Its shape depends on the geometry of space.

We get an elliptic space from the stereoscopic projection of the surface of a sphere to an Euclidean drawing plane. Great circles on the surface of the sphere appear as circles too in the drawing plane. Thus the geodesic line between two points is now a circle going through these points. But what is its radius? We could find it by projecting the points back to the surface of the sphere, getting the great circle going through these points and projecting the great circle back to the drawing plane. But this is unnecessarily complicated and we better find a simple equation that directly defines us the radius of the circle in the drawing plane.

Note that the center of the stereoscopic projection is the north pole of the sphere and that the projection plane goes through the south pole. The projection plane is parallel to the equatorial great circle. The image of the equator is trivially a circle of twice the radius of the sphere. Any other great circle intersects the equator at two opposite points. Thus geodesic lines in the elliptic plane too intersect projected equator at opposite points. They look like this:

The red circle is the projection if the equator and the brown dot is the projection of the center of the sphere. The blue circles are geodesic lines that have their center on the black line. Note the yellow dots. As discussed, all these geodesic lines go through this point. If R is the radius of the red circle, r is the radius of the circle representing the geodesic line and d is the distance of its center from the projection of the center of the sphere, then we get

d² + R² = r².

This equation uniquely defines the geodesic line connecting two points in elliptic space. It is essential for creating images in elliptic space and relating them to images on the surface of a sphere.

For the Poincaré disc representation of hyperbolic space we get similar results. Geodesic lines are now circles that intersect the boundary of the disc at right angles:

The red line is boundary of the Poincaré disc and the brown dot is its center. The blue circles are geodesic lines that go through the yellow dot. If r is the radius of a geodesic and d the distance between its center and the center of the disc, then

d² – R² = r²,

where R is the radius of the disc. Again, this equation determines the radius of a circle going through two points and makes that geodesic lines are unique. We need it to create kaleidoscopic images in hyperbolic space. Obviously, there is some resemblance between the stereographic projection of a sphere and the Poincaré disc. But do not go to far on that.

Posted in Kaleidoscopes, programming | Tagged , , , , | 1 Comment

Decorations of semi-regular tessellations

In the last posts I have shown kaleidoscopes that make repeating images in Euclidean, spherical and hyperbolic spaces. They are decorations of regular tilings. But what about semi-regular tilings? Could we decorate them too using mirrors? This would give us new designs. With real physical mirrors we probably can’t do it. On the other hand, with computer generated mirror symmetries this becomes possible.

Let us take as an example the regular tessellation of hexagons shown in the image below. Drawing lines between the mid points of adjacent sides we get a semi-regular tessellation of triangles and hexagons. Each triangle is made up of three corners cut off from the hexagons. A decoration of the regular tessellation arises from a triangular kaleidoscope with angles of 30°, 60° and 90°. It is shown in red lines in the image and uses the part of an input image that fits into this triangle. Mirror reflections cover the entire plane with copies of this image part. This emphasizes the regular tessellation of hexagons  because there are mirror symmetries at the borders of the hexagons. To get a decoration of the semi-regular tiling we need additional mirror symmetries at the borders between the triangles and the hexagons. We note that one of these border lines cuts the red triangle in two parts and we only use the pixels of the input image that lie inside the larger part, which is coloured yellow. We cover the other rose-coloured part of the triangle doing a mirror image at the border of the triangle. Thus we get an image with additional mirror symmetries that emphasize the semi-regular tessellation. In this sense we have made a decoration of the semi-regular tiling.

Regular tessellation with hexagons (blue lines) and semi-regular tessellation with hexagons and triangles (brown lines). The triangle of red lines shows the position of the mirrors of a kaleidoscope. Images of the yellow region and parts of it make a decoration of the semi-regular tessellation.

We can use the method discussed above to get semi-regular tessellations of the hyperbolic plane. Using a kaleidoscope with a right-angled triangle characterized by the numbers (k 2 n) we get a decoration of a regular tessellation with regular polygons that have k corners. Each corner point is shared by n polygons. To create a decoration of a semi-regular tessellation we again use reflection at additional lines. They go through the corner of the triangle which has the right angle, cross the opposite side at a right angle and are straight lines in hyperbolic space. In the Poincaré disc representation they are circles that are perpendicular to the boundary of the disc. These lines define the semi-regular tessellation. It is made of regular polygons. Half of them have n corners and the other half k corners. A corner point is shared by 4 polygons. Using reflections at these additional lines we get a decoration of the semi-regular tessellation. The image below shows an example.

Kaleidoscopic decoration of a semi-regular tessellation of pentagons and squares. The red lines show the basic (5 2 4) triangle that makes a regular tessellation of pentagons. The brown line cuts off the corners of the pentagon and creates smaller pentagons and squares by reflection at the red lines.


Posted in Kaleidoscopes, Tilings | Tagged , , , | Leave a comment