waves – a browser app for creating quasiperiodic wallpapers

I have made a browser app that lets you create quasiperiodic wallpapers. You find it at http://geometricolor.ch/waves.html . It uses a symmetric superposition of waves as proposed by Frank Farris and presented by Erica Klarreich in the Quantamagazin in “How to Make Impossible Wallpaper“. Christoph Pöppe is writing about this idea in a forthcoming article for the Spektrum der Wissenschaft. To make the app easy to use, I have only included a few of the possibilities presented in this blog. To make your own experiments and to modify the app you can use my Github repository https://github.com/PeterStampfli/images, in particular the current commit f260803. The code of other commits might be broken.

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 single circle

You might think that discussing the inversion in a circle is somewhat underwhelming. But, as I am using multiple inversion in many circles to create fractal images, I found that there are some important ideas you will not find so easily. I will present them briefly here and use them in the next posts.

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.

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 http://geometricolor.ch/sphericalKaleidoscopeApp.html. 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.

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.

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 https://twitter.com/TilingBot 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 http://geometricolor.ch/sphericalKaleidoscopeApp.html.

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 | | 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 http://geometricolor.ch/sphericalKaleidoscopeApp.html, 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 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 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.

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