Digital Kaleidoscopes

I made a kaleidoscope! You can try it out for yourself by visiting this website. For best results, try it out on a phone or tablet so you can move around with the camera.

The video below is a demonstration of what you can create with it.

A montage of the kaleidoscope. Leif Gehrmann © 2024

A kaleidoscopic image using Jan Davidsz. de Heem's 'A Still-life with Fruit and Lobster'. There are no recognisable elements in the image, other than a triangular pattern consisting of red and green colours. A kaleidoscopic image using Vincent van Gogh's 'Memory of the Garden at Etten (Ladies of Arles)'. There are no recognisable elements in the image other than an askew square pattern with green and orange colours, speckled with blue, red, and yellow dashes.

A kaleidoscopic image of Cyril Power's 'Folk Dance'. There are no recognisable elements in the image other than red and white shapes that form a pattern. A kaleidoscopic image of Giovanni Giacometti's 'Frühling im Bergell'. There are no recognisable elements in the image other than several yellow diamonds that form hexagonal patterns.

Some more examples of the kaleidoscope in action.

While creating the kaleidoscope, I learned a few interesting things which gave me a greater appreciation of kaleidoscopes. They are more than meets the eye.⁠[1] The rest of this post is a collection of notes and explanations about kaleidoscopes, including a mildly interesting observa­tion about “non-tessellating” kaleido­scopes.

Physical kaleidoscopes

A quick history on Kaleidoscopes. David Brewster is credited for discovering the optical instrument between 1814-1815 while experimenting on the polarisation of light using mirrors. In 1819 he published a book called A Treatise on the Kaleidoscope which can be viewed at the Internet Archive.

A photograph of a book's opening title page. The title says 'A Treatise of the Kaleidoscope, by David Brewster LL. D.'. Additional subtitles are shown beneath the title. A photograph of a book showing pages 94 and 95 of the chapter 'On the construction and use of polycentral kaleidoscopes.'. The pages includes a lot of text and numbers, with sentences describing how many combinations of polycentral kaleidoscopes exist.

A photograph of a book's page showing an illustration of a kaleidoscope device. It looks like a spyglass mounted on a tripod. A photograph of a book's page showing several figures of how mirrors are arranged in a cylinder. A photograph of a book's page showing several figures, including a geometric diagram of several polycentral kaleidoscopes.

Excerpts from David Brewster's A Treatise on the Kaleidoscope.
Photos taken from the National Library of Scotland.

There are many kinds of kaleidoscopes. The Brewster Kaleidoscope Society has a nice overview of some the types of scopes.

The type of kaleidoscope I created is a teleidoscope, because the viewer’s environment is used as the kaleidoscope image. This is in contrast to the more common cell kaleidoscope, where small loose objects are held up close to the kaleidoscope (which can be rotated or shaken). Teleidoscopes are bit more complex, because they require a ball lens to refract the light from the environment in such a way that the image is focused into the scope. Without the lens, the mirrors will reflect different parts of the environment at different angles, not resulting in a kaleidoscopic pattern.⁠[2]

Two teleidoscopes, both featuring a ball lens on one end. One is smaller than the other. The larger one has a rainbow pattern on the exterior, and the smaller one has a flaky gold and iridescent exterior.

Two teleidoscopes,⁠[3] featuring a ball lens.

A video demonstration of a teleidoscope.

From the video above, the reflections in the teleidoscope are decent, but not perfect. The ball lens does not refract light perfectly into the scope at all angles. The edges of the mirrors are also quite noticeable as blurry white lines, but I think that’s because the toy is cheaply manufactured. A more expensive kaleidoscope might have better results. Regardless, the effects are nice to look at, and the imperfections have a degree of charm.

Kaleidoscope shapes

Most kaleidoscopes I’ve seen use 3 mirrors.

Kaleidoscopes can consist of just 1 or 2 mirrors, but they aren’t as popular as toys. The applications of 1 mirror is limited. With 2 mirrors, some nice symmetrical patterns can be created, but only with rotational symmetry around a single point. With 3 or 4 mirrors, which David Brewster called polycentral kaleidoscopes, patterns can extend infinitely in all directions when the eye looks into the prism.

This post focuses on polycentral kaleidoscopes as, in my opinion, they are the more interesting type of kaleidoscope.

Reflections using one, two, and three mirrors.
(Open in new window)

Before reading up on kaleidoscopes, I didn’t know how many mirror arrangements existed for polycentral kaleidoscopes. I assumed any triangular configuration would work, but that’s not the case.

It turns out there are only four mirror arrangements, or shapes:

Computer generated image showing the four kaleidoscope shapes, visualised as prisms in three dimensions. An image of 'A Still-life with Fruit and Lobster' by Jan Davidsz. de Heem is in the background, and is used as the reflective image in the kaleidoscopes.

Only a limited number of shapes tessellate to produce kaleidoscopic patterns.

These shapes have the property of edge tessellation. They are able to reflect, tessellate, and have no obtuse angles.

Four kaleidoscopic images created from 'A Still-life with Fruit and Lobster' by Jan Davidsz. de Heem. Each of the kaleidoscopic images are made using the four unique mirror arrangements.

How the four kaleidoscope shapes appear in practice.

Recreating the kaleidoscopic effect digitally

Warning: In this next section I cover a bunch of maths and problem solving. Feel free to skip it, or enjoy the colourful 🌈 – and dizzying 😵‍💫 – images.

To imitate a kaleidoscope using computer graphics, I needed an algorithm that would convert any input image into a sequence of tiles, with a particular arrangement of reflections and rotations.

Let’s first observe how a static image (consisting of red shades on the x-axis and green shades on the y-axis) appears through the kaleidoscope for the four images.

An illustration showing a square with a gradient of black, green, yellow, and red across all the four corners. The image's x-axis goes from black to red, and the y-axis goes from black to green. Beneath the image are the four unique mirror arrangements, with the same gradient as before super imposed on all of them.

Our input image, that we'll use to explore the problem. The image is masked by the four kaleidoscope shapes that we'll use as tiles in the kaleidoscope.

Four kaleidoscopic images using the black, green, yellow, and red gradient image. Each of the kaleidoscopic images are made using the four unique mirror arrangements.

The effects of different kaleidoscope shapes using the same input image.

Looks pretty! …but it is hard to understand what’s going on. I promise that the problem has a degree of similarity for each of the four shapes, but let’s focus on one shape for now.

Take for example the equilateral triangle pattern:

Kaleidoscopic image using the equilateral triangle mirror arrangement and the original colour-gradient image reflected and rotated across the image dozens of times.

A physicist like David Brewster would derive the pattern by performing repeated reflections of the image along the edges of the shape. Each reflection is a bounce on one of the three mirrors.

The image sequence below demonstrates how the image would appear for each bounce.

Light bounces in an equilateral kaleidoscope, with the 1st, 2nd, 3rd, 4th bounces of light.
(Open in new window)

But computing how light bounces is inefficient, especially when the light would need to bounce dozens of times in a very long tube.

Instead, knowing the pattern in advance, we can simplify the problem as a direct geometric calculation.

For example, I noticed with the equilateral triangle, the problem can be reduced to calculating the distance and angle around points in a hexagonal grid. Observe in the image below how the pattern repeats itself in the form of a hexagon.

A similar image to the one shown previously, but now annotated with a hexagon and several white circles dotted around in a hexagonal grid.

Stepping back, a hexagonal pattern emerges from individual equilateral triangles.

The centroid of each hexagon can be calculated using matrix multiplication. RedBlobGames.com, a website notorious for game development tutorials, has extensive documentation on the subject of hex grids.

Now notice how in the image above that the colours on the 6 corners of the hexagon go from red, to green, and then back to red; three times, in a 120° pattern. We can hopefully write a function that describes this repeating pattern.

This is the second piece of the puzzle, which requires us to find a function that translates any point inside the hexagon in such a way that the original equilateral triangle is rotated and reflected 6 times inside the hexagon.

A diagram showing how points within a hexagon can be rotated so that they map to an equilateral triangle in one corner of the hexagon. It is demonstrating how P can map to Pʹ.

In other words, we want to map the point P to the point Pʹ, where Pʹ is a point on our original input image. This transformation consisting of rotations and reflections can be described using the following mathematical terms:

A series of math equations. On the first line: d = sqrt((P_x - O_x)^2 + (P_y-O_y)^2). On the second line: θ = atan2(P_y - O_y, P_x - O_x). On the third line: θʹ = |(θ + 60°) mod 120° - 60°|. On the fourth line: Pʹ = [d * cos(θʹ), d * sin(θʹ)].

The angle θ is the angle between the x-axis from the centre of the hexagon, to the point P. To get the transformed angle θʹ for Pʹ, the absolute function and the modulo function can be used.

I’m leaving out a whole lot of detail, but the gist is we’re able to translate screen coordinates into input-image coordinates without a lot of “if-this; else-that” complexity.

And now that we’re able to translate any point to a point on the original input image, we can write software that computes each pixel of a large image with quick speed (In computer graphics, these are called pixel shaders). This would otherwise be very time consuming to compute if we simulated how light bounced in a real kaleidoscope!

A zoomed out kaleidoscopic image showing the original black, green, yellow, red gradient image reflected and rotated hundreds of times.

The original image is now reflected and rotated hundreds of times.

The other 3 kaleidoscope shapes can be reduced to a similar problem of 1) finding the centre-point of a grid of hexagons/squares, and 2) translating a coordinate within that grid cell to a point on the input image.

An illustration of the three other polycentral kaleidoscope shapes, demonstrating how all the kaleidoscopic images can be represented as a series of repeating squares or hexagons, and within them is an image that is rotated around a central origin.

What about unconventional kaleidoscope shapes?

While David Brewster correctly identified those four shapes as having the tessellating effect, he didn’t go into much detail about other shapes. I tried to look for any literature trying more than 3 or 4 mirrors in a kaleidoscope, but I had no success.⁠[4]

So what about other shapes?

Hexagons tessellate, so why don’t hexagons work?

Pentagons don’t tessellate, so what would happen if 5 mirrors were used?

To answer this, I created another digital version of the kaleidoscope that uses “path tracing” to simulate how light bounces around in real life. This is a slower way of calculating how a kaleidoscope behaves, but it’s more realistic. I’ve published this second kaleidoscope online, but be warned that it does not work on iOS and Android.⁠[5]

Let’s take a look at the pentagon first.

Because this is simulating light rays, we can step through the number of bounces of light, allowing us to see how the light reflects inside the tube of 5 mirrors.

Light bounces in a pentagonal kaleidoscope, with the 1st, 2nd, 3rd, 4th bounces of light.
(Open in new window)

For the pentagon the kaleidoscope effect is quite different from the tessellating images we saw earlier.

In the first bounce, the mirrors will reflect the image at varying angles of 72°. In the second and third bounce, the overall shape starts to get stranger and jagged.

We can extend the image further, with an increasing number of light bounces. As we move further away from the centre, the more “chopped” the reflections becomes.

A kaleidoscopic image using 5 mirrors. There are no obvious patterns in the image, where colours are going from green to red. It is quite disorienting.

So pentagons don’t “work”. But we shouldn’t be surprised, because pentagons don’t tessellate easily anyway.

Let’s instead try 6 mirrors in the shape of a hexagon which does tessellate!

Light bounces in a hexagonal kaleidoscope, with the 1st, 2nd, 3rd, 4th bounces of light.
(Open in new window)

While the hexagon does start okay on the first bounce, the images don’t “join” together seamlessly; There are borders where red is next to green. By the second bounce everything begins to unravel. I wish I had an intuitive explanation for why, but alas I don’t. Extending the image further out reveals the same choppy behaviour that the pentagon had. Nevertheless, there are some interesting patterns within the chaos, but I’m not sure why they happen. Someone should write a paper on this subject!

A kaleidoscopic image using 6 mirrors. There are some patterns in the image, where colours are going from green to red. It is quite disorienting.

One might think that the chopped imagery would detract from the kaleidoscope feeling, but I personally don’t see a huge issue when using a real reference image. Below are some examples of unconventional kaleidoscopes, with visually interesting results!

A kaleidoscopic image using 6 mirrors of Leonardo da Vinci's 'Lady with an Ermine' painting. A kaleidoscopic image using 5 mirrors of Johannes Vermeer's 'Girl with a Pearl Earring' painting.

A kaleidoscopic image using 6 mirrors of Alexej von Jawlensky's 'Flowers in a Vase' painting. A kaleidoscopic image using 7 mirrors, featuring a black, magenta, cyan, and white tartan textile.

Examples of unconventional kaleidoscopes using 5, 6, or 7 mirrors.

Conclusion

Before writing this post, I regarded the kaleidoscope as a simple toy, but was surprised to find the nuance and complexity. I’m wowed by the stuff in the kaleidoscope gallery compiled by the Brewster Kaleidoscope Society, which features multidisciplinary crafts including jewellery, woodwork, metallurgy, mathematics, and design.

There’s so much more to explore with kaleidoscopes, especially digital ones. My kaleidoscope, that I shared at the beginning of this post, provides a simple user-interface for creating kaleidoscopic images. I had to stop myself from adding more controls making it more complex, but I know there’s many things to play around with. I’d like to see unconventional shapes like the ones I discussed earlier being used in real physical kaleidoscopes. But the imagination could go even wilder with digital ones, including colour transformations, video-feed delays, hyperbolic geometry,⁠[6] virtual-reality headsets, or even some form of audio synthesis!

There are also interesting connections to be made between kaleidoscopes and infinity mirrors like the ones by Yayoi Kusama, or in Adam Savage’s One Day Builds: Rhombic Dodecahedron with Matt Parker!. There’s much to explore on the Wikipedia page for honeycomb geometry related to this.

But this post has gone on long enough. So I leave you with this final image, an image of a cat, trapped in a kaleidoscope.

A photograph with three mirrors setup in a semi-equilateral triangle arrangement around an orange cat. The cat it sitting, looking up, somewhat distressed. The cat's image is reflected dozens of times in the mirrors.

A cat meowing in a semi-equilateral kaleidoscope.
Photo by an unknown author.⁠[7]

Footnotes

  1. ^ Pun intended.
  2. ^ There is misinformation online saying that the ball lens is not required in teleidoscopes. The Wikipedia page on teleidoscopes (Snapshot from December 2024) claims: "The lens at the end of the tube is not an optical requirement, but protects the internals of the teleidoscope." This is incorrect. The ball lens is there to focus the image. Without the lens, the more distant the object from the scope is, the more displaced the reflections are. See the appendix 'Ball lenses in teleidoscopes' for a visual demonstration. The error was added to the Wikipedia article in October 2006 from an anonymous editor, so it'll be difficult to correct.
  3. ^ If you wish to purchase one of these teleidoscopes, checkout the appendix 'Review of the two teleidoscopes'. They are quite cheap, so I wouldn't recommend them for anything other than a simple toy.
  4. ^ I did find one artist, by the name of Suraiya Begum, who in 2020 tried to create a teleidoscope using a pentagon mirror arrangement. Her experiments were somewhat unsuccessful though as the mirrors were blurry and didn't have decent reflection. I think she was also unaware that a ball lens is required.
  5. ^ I'm not sure why my code doesn't work on iOS and Android. Probably some GPU or memory issue. Feel free to submit a bug fix on GitHub if you figure it out!
  6. ^ Update 2025-01-12: Peter Stampfli appears to have created a hyperbolic kaleidoscope and has even written a paper on it in 2018: ‘Kaleidoscopes for Non-Euclidean Space’. He's even created a website to create hyperbolic kaleidoscopes. It would be cool if a webcam was added as an input source, and was made to work on mobile, but it's great to see someone has thought through the problem. Peter has a Mastodon profile where you can follow his newer work.
  7. ^ I originally found this image on Mastodon. Using reverse-image search tools like TinEye suggests the image was uploaded around 2010, but it was posted on random forums with zero attribution. So apologies unknown author for using your photo, but it's a perfect example of a kaleidoscope!

Appendix

Pictures referenced in this post

A Still-life with Fruit and Lobster (1650) by Jan Davidsz. de Heem.
From the National Galleries of Scotland, Photography by Antonia Reeve, licensed under Creative Commons CC BY-NC.‡

Pink Roses, Chinese Vase (1916-1920) by Samuel John Peploe.
From the National Galleries of Scotland, Photography by Antonia Reeve, licensed under Creative Commons CC BY-NC.‡

Mont Alba (1924-1927) by Charles Rennie Mackintosh.
From the National Galleries of Scotland, licensed under Creative Commons CC BY-NC.‡

The Hunt (c. 1926) by Robert Burns.
From the National Galleries of Scotland, licensed under Creative Commons CC BY-NC.‡

Folk Dance (1932) by Cyril Power.
From the National Galleries of Scotland, licensed under Creative Commons CC BY-NC.‡

Flowers in a Vase (1936) by Alexej von Jawlensky.
From the National Galleries of Scotland, licensed under Creative Commons CC BY-NC.‡

The Creation of Adam (c. 1511) by Michelangelo.
From the Wikimedia Commons, and is in the public domain.

The School of Athens (c. 1511) by Raphael.
From the Wikimedia Commons, and is in the public domain.

Lady with an Ermine (c. 1490) by Leonardo da Vinci.
From the Wikimedia Commons, and is in the public domain.

Girl with a Pearl Earring (c. 1665) by Johannes Vermeer.
From the Wikimedia Commons, and is in the public domain.

Memory of the Garden at Etten (Ladies of Arles) (1888) by Vincent van Gogh.
From the Wikimedia Commons, and is in the public domain.

Frühling im Bergell (1912) by Giovanni Giacometti.
From the Wikimedia Commons, and is in the public domain.

Bruce of Kinnaird Ancient Tartan Lambswool Blanket from Lochcarron of Scotland.

‡ While writing this post, sometime between the 10th and 15th of December, 2024, the National Galleries of Scotland "changed" the licensing terms for using the images on their website to be a "personal-use license agreement". Prior to this date, all the images attributed to the National Galleries of Scotland on this page were licensed on their website as "Creative Commons CC by NC". The Creative Commons licenses are irrevocable, so the old license applies.

Ball lenses in teleidoscopes

As stated in the footnote section above, the Wikipedia article on teleidoscopes (In December 2024) incorrectly states that "The lens at the end of the tube is not an optical requirement". The following images demonstrate that this is not the case, and that a ball lens is required to create a kaleidoscope image.

A glass ball is positioned in front of a three-sided kaleidoscope. In the distance, a 10cm by 10cm painting is shown. The glass ball is 3cm in diameter. The painting is 10cm away from the kaleidoscope itself. The kaleidoscope prism is 20cm long. A kaleidoscopic image can be seen in the kaleidoscope.

When looking in the kaleidoscope, we see the typical kaleidoscopic image. There are slight distortions at the edges of the image because the lens doesn't perfectly refract light into the kaleidoscope at similar angles. Also note, that the ball lens will cause the image to flip vertically and horizontally, meaning the image appears upside down. This is normal in all teleidoscopes.

The exact same setup as before, but without the ball lens. This time, the image inside the tube does not have a kaleidoscopic image.

When looking into the kaleidoscope without the ball lens, the kaleidoscopic image is not reproduced. Instead the image is reflected at weird angles. It's a cool effect, but it's not a kaleidoscope.

Review of the two teleidoscopes Two teleidoscopes, both feating a ball lens. One is smaller than the other. The larger one has a rainbow pattern on the exterior, and the smaller one has a shiny shimmering exterior.

I bought two teleidoscopes:

My recommendation: If you are looking for a toy, the Schylling model is more fun to use. For something more accurate, I don't recommend any of these models.

Both teleidoscopes have weird reflection issues which are difficult to describe but hopefully are noticable in the photos below. I'm unsure if it's just a poorly constructed scope (They are quite cheap!), or if it's an issue with how light is focused into the teleidoscope.

The following photos are from the same camera, using the same zoom.

The Schylling teleidoscope. The larger lens appears to result in distorted images the further away from the center the image is.

The Cottage Mills teleidoscope. The images are repeated a lot more, but the eye-piece is a lot smaller. The mirrors also appear misaligned and the regular patterns appear to diverge resulting in poorly reflected images. But, unlike the larger Schylling teleidoscope, the images are less distorted.