The app obtains the colour of a pixel of the symmetric image from its coordinates (x,y), which are transformed to new coordinates (X,Y). The app then takes the colour of an input image at the position (X,Y). Instead of using an input image, the app can directly show the structure of the waves by using the X-coordinate value for the green colour component and the Y-coordinate for the blue and red components of the pixel. For the transformations I used the most basic results from the general discussion of the post “Improved symmetric sum“. Note that the transformations are different for rotational symmetry of odd or even order.

For 5-fold rotational symmetry and rotational symmetry of higher odd order the app calculates the (X,Y) coordinates using

and

where m is an odd number, the order of the rotational symmetry. Only for m=3 we get periodic images.

Obviously, at the origin where (x,y)=(0,0) we get the transformed coordinates (X,Y)=(m,0). At the origin we have trivially a m-fold rotational symmetry. Going away from the origin the different waves first get out of sync, but sufficiently far away they get in phase again. This is similar to a Moiré pattern, see my earlier post “Quasiperiodic designs and moiré patterns“. Thus there are many points where X≈m and Y≈0. Around these points we get approximate m-fold rotational symmetry. They are distributed quasiperiodically. You can see this if you choose the 5-fold rotational symmetry in the app. This becomes more clear if you also switch on the additional tiling, which is the Penrose rhombus tiling for m=5. Note that the corners of the rhombs lie at points with approximate local 5-fold symmetry. Unfortunately, 7 and higher odd order rotational symmetries have more interfering waves and they get in phase again only at very long distances. Thus, the resulting images seem to be rather chaotic and it is nearly impossible to see their quasiperiodic structure. Thus I choose not to include them in the app.

For 8-fold and higher rotational symmetries of even order 2m, where m is an integer, the app uses a similar equation for the transformed X-coordinate as for odd order:

Note that the cosine function is symmetric, cos(-x)=cos(x), which makes that we get a 2m-fold rotational symmetry from only m waves. But we cannot simply replace the cosine by a sine to get Y(x,y) because the sine function is antisymmetric, sin(-x)=-sin(x). This would destroy the symmetry. Instead, I choose the slightly more complicated equation

which too has 2m-fold rotational symmetry. Note that these waves are rotated with respect to the waves of X(x,y) by an angle of π/2m. The app uses these packages of symmetric waves to create quasiperiodic images of 8, 10 and 12-fold rotational symmetry. In all three cases you can see basic motives repeating with slight variations throughout the plane. There are many points with approximate local rotational symmetry. This becomes more clear if you choose to display the matching tilings. For 8-fold rotational symmetry the app displays a patch of the Ammann-Beenker tiling, for 10-fold rotational symmetry it shows only a rosette around the origin and for 12-fold rotational symmetry you see a tiling of rhombs, triangles and squares resulting from an iteration method presented earlier. Images with rotational symmetry of higher order again have a rather chaotic appearance and it is difficult to see that they are quasiperiodic. Thus they are not included in the app. However, you might want to do your own experiments with its code.

For rotational symmetries of even order 2m the app offers an additional two-color symmetry: Rotating (x,y) by an angle of π/m inverses the colours of the image. It uses the method presented in the post “Improved two-color symmetry upon rotation“. An additional function U(x,y) modifies the color. The output image pixel has the original colour of the input image if U is positive; and if U is negative then the colour is inverted. The equation for U is different for even or odd values of m as shown in “two-color rotational symmetry“. For odd m the app uses

and for even m

You can easily verify that rotating (x,y) by π/m inverts the sign of U. The transformation to (X,Y) uses the absolute value of U(x,y) for X(x,y) and the same form for Y(x,y) as for simple rotational symmetry without colour change.

You are welcome to do your own experiments with http://geometricolor.ch/waves.html. If you have any questions you can reach me at pestampf@gmail.com.

]]>Inversion in a circle is nearly the same as a mirror image at a straight line. Actually, in a stereographic projection of a sphere and in the Poincaré disc representation of hyperbolic space, most geodesic lines are represented by circles, see my earlier post “Straight lines in elliptic and hyperbolic space“. A mirror image in these geodesic lines thus becomes an inversion in the corresponding circle. You can use this to create Kaleidoscopes for elliptic and hyperbolic space.

Any circle can be transformed to a straight line by an inversion in a suitably chosen second circle. The inversion in the first circle then becomes a mirror image at the straight line. This is useful to get a systematic overview of the images resulting from multiple inversions in several circles.

I will show you some illustrations of the above. But first I am briefly repeating some well-known details. For a circle with radius R and centre at position c, it is easy to calculate the inverted image q of a point p using

This is as easy to calculate as a mirror image at a straight line and it has similar properties. Points on the circle are fixed points. Points inside the circle are mapped to the outside and inversely. However, inversion maps the centre of the circle to infinity. We get an intuitive image of inversion in a circle if the circle is the stereographic projection of a great circle of the Riemann sphere. Then the inversion is simply a mirror image at the plane containing the great circle and exchanges the corresponding halves of the sphere.

I do not want to discuss more details – I’d rather prefer to show how inversion acts on an image. This is an example:

The inverting circle is shown as a blue line. The photo of a butterfly is directly mapped into its inside. The outside shows an inversion of the inside. It results from inverting the position of each pixel in the circle and looking up the colour at the inverted position. This image results from the browser app at http://geometricolor.ch/singleCircleApp.html. Use it to learn more about inversions in circles making your own experiments with other images. You can see we have indeed an approximate mirror symmetry close to the circle. Note the strong distortions far away from the circle.

In spite of the strong distortions the inversion in a circle is very much the same as a mirror image at a straight line. You can see this in the next image:

Here, the centre of the red circle lies on the blue circle. Thus an inversion in the red circle maps the blue circle into a straight line, which is the orange line. The inversion in the blue circle, as seen in the first image, now becomes a mirror image at the orange line. Here, you can see that details of the flower and the head of the butterfly are mirrored in the same way as in the previous image. You cannot see how one of the wings intersects the orange line and gets mirrored because the image is too small. Again, this is a result of http://geometricolor.ch/singleCircleApp.html and you can do your own experiments.

For the following posts, the inversion in a circle is both a building block for creating images and an isometry of non-Euclidean planes. It simplifies systematic searches similarly as scaling, rotation, translation and mirror symmetries.

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

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

]]>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:

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:

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:

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:

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.

]]>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 = s_{out} * i + a and y = s_{out} * j + b,

where (a,b) is the translation vector and s_{out} 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 = s_{in} * cos(α) * x – s_{in} * sin(α) * y + c

and k = s_{in} * sin(α) * x + s_{in} * cos(α) * y + d,

where we can change the scale s_{out}, 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 http://geometricolor.ch/setup.html.

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 http://geometricolor.ch/kaleidoscopeLens.html. 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 s_{out}. 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)=(s_{out} * i + a, s_{out} * j + b)

and after the mapping at

(x,y)=(u(s_{out} * i + a, s_{out} * j + b), v(s_{out} * i + a, s_{out} * 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

A_{x}=u(s_{out} * (i+1) + a, s_{out} * j + b)-u(s_{out} * i + a, s_{out} * j + b) and

A_{y}=v(s_{out} * (i+1) + a, s_{out} * j + b)-v(s_{out} * i + a, s_{out} * j + b).

Similarly for the second side we have a vector **B** with

B_{x}=u(s_{out} * i + a, s_{out} * (j+1) + b)-u(s_{out} * i + a, s_{out} * j + b) and

B_{y}=v(s_{out} * i + a, s_{out} * (j+1) + b)-v(s_{out} * i + a, s_{out} * 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 = A_{x }B_{y }– A_{y }B_{x}.

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=s_{in}² 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.

]]>

I have created a new site “geometricolor.ch” 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.

]]>

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.

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

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.

]]>

To get an h-fold rotational symmetry at a corner we need an angle of 180°/h between the sides meeting at the corner. This is not possible for polygons with more than four corners in Euclidean space because they would have angles of more than 90°. However, in hyperbolic space the corner angles can have any value smaller than (1-2/k)180°, where k is the number of corners of the polygon and the limit results from Euclidean geometry.

We use the Poincaré disc model for hyperbolic geometry. You can find a very interesting detailed discussion at http://www.malinc.se/math/noneuclidean/mainen.php. The most important facts are: An open disc represents the infinite hyperbolic space in our Euclidean space, straight lines in hyperbolic space become circles that intersect the boundary of the disc at a right angle and the inversion at these circles is equivalent to the mirror image at the straight lines in the hyperbolic space.

A regular polygon that has its center at the center of the Poincaré disc shows its dihedral symmetry in our Euclidean drawing plane. Its sides are arcs of equal width and they belong to circles of equal radius. These circles are straight lines in hyperbolic space. The angle between the two arcs at a corner is simply the angle between their tangents. Using basic trigonometry we get their radius from the desired value 180°/h for the angles, the number k of corners of the polygon and the radius of the Poincaré disc. This defines the reflection at the sides of the polygon as inversions at the circles bearing the arcs. Thus we get an easy generalization of the usual regular polygon with straight edges.

As in the earlier posts, we have to map points of the Poincaré disc into the polygon using reflections at its sides. The symmetries of the regular polygons make this easier than for triangles. As long as the point lies outside the polygon we use inversion at the circle with the arc that lies closest to the point. The required number of inversions increases going to the border of the Poincaré disc and finally diverges at its border. Thus we have to impose an upper limit and disregard points that take too many inversions.

We rapidly find the circle to use for inversion using a coordinate system with its origin at the center of the Poincaré disc and polar coordinates. A polygon with k corners has its corners at polar angles of i*(360°/k) where i goes from 1 to k. The sides of the polygon are arcs connecting the two corners at angles i*(360°/k) and (i+1)*(360°/k). Now, if the point that we are mapping has a polar angle φ we have to find the arc that covers this angle. Thus we have to find an integer number i with i*(360°/k) < φ < (i+1)*(360°/k), all obviously modulo 360°. This defines the arc that is closest to the point. It is part of a circle which has its center at the polar angle (i+1/2)*(360°/k). If the point lies outside this circle then it has to be inside the polygon and we can get the colour for the pixel at the starting point from an input image at this mapped position. If the point lies inside the circle we invert it at the circle and repeat this procedure.

For a pentagon with angles of 90° we get a result with this structure:The original pentagon is shown in yellow. All points that need an odd number of inversions are coloured light blue and those with an even number are shown dark brown. Away from the center we see strongly distorted pentagons, shrinking towards the border of the disc. But in hyperbolic space, they are all regular pentagons of the same size, tiling the hyperbolic plane. Actually, we get tilings for all k>2 and h>1. They are made of regular polygons with k corners and each corner belongs to 2*h polygons.

Using an asymmetric input image for the pentagon at the center we get kaleidoscopic images that look like this one:It has five different motifs of two-fold rotational symmetry, one for each corner of the pentagons. Often, such images seem to lack any order. Here we see strips of repeating green swirls with mirror symmetry. In hyperbolic space they are straight infinite friezes with horizontal and vertical reflection lines resulting from the mirror symmetries at two corners of the pentagon. These friezes are separated by narrow branching lines of lighter colour.

With an input image of rotational symmetry we get wallpapers with the same rotational symmetry if the symmetry is compatible with the polygon. The same pentagon as before and a rosette with five-fold symmetry gave this:Note that an input image with dihedral symmetry would give the same image as a kaleidoscope using the (5,2,4) triangle instead of this pentagon. In general, a regular polygon with k corners and angles of 180°/h using an input image of k-fold dihedral symmetry is equivalent to using a Möbius triangle (k 2 2*h) with corner angles of 180°/k, 90° and 90°/h.

For more images of higher resolution have a look at my Flickr album “hyperbolic wallpapers”.

]]>