Help for the kaleidoscope with a circle in a triangle

This app does its work only on your computer and your images stay on your computer. No data will be transferred.

Output image

At the left you see the output image. It first shows only its structure. The black lines show the generating lines and circles. They are borders of triangles. Their repeated mirror images at the straight lines and inversions in the circles generate a tiling.

You see images of a several triangles in different colors:

light color - The original triangle
color- Rotated and translated copies of the triangle
dark color- Rotated mirror images of the triangle

Triangles of the same basic color make a Poincaré disc representation of a tiled hyperbolic space.

Use the control panel at the lower right side to open an input image or drag and drop an image!

Drag with the left mouse button pressed or touch to change the visible part of the output image. Turn the mouse wheel, use two finger touch or type "Z" or "z" to zoom in or out.

Drag with the right mouse button pressed to see the trajectories generated by the reflecting elements in the stereographic projection for elliptic geometry, the normal projection for Euclidic geometry and the Poincaré disc for hyperbolic geometry.

Control panel

In the lower part of the right hand side you find a control panel.

Use it to open an input image ! You can also use drag and drop.

Switch between showing the structure of the kaleidoscope or a kaleidoscopic image.
You can see:

structure - The tiling.
image- Maps an input image like a skin on the tiling.
convergence- Points needing a lot of inversions in the circles to go to the original triangles are shown in white color. You see the limit set of the inversions and reflections.
combinations- Some of the three basic views are shown simultaneously.

You can change the Projection for showing the kaleidoscopic image.

Show or hide the lines and circles that generate the image. Choose their color and width.

Choose the number of elements used for generating the image.
Three elements make only a basic triangle.
Four elements create a basic triangle with an intersecting circle at its center, giving three secondary triangles.

Choose the rotational symmetries of the basic triangle:

center - Rotational symmetry at the center of the image. Note that very large values give strange results!
upper- Symmetry at the intersection between the upper straight line and the outer circle
lower- Symmetry at the intersection between the lower straight line and the outer circle

Choose the rotational symmetries arising with the central circle:

outer circle - Rotational symmetry at the intersection with the outer circle.
upper line- Symmetry at the intersection with the upper straight line.
lower line- Symmetry at the intersection with the lower straight line

You can apply symmetry operations on the generating elements. You can rotate and mirror them. Inversion exchanges the central circle with the circle of the basic triangle.

Save the output image as a png. You will find it in the download folder as "kaleidoscope.png"

Choose the output image size. Only the resolution changes and you will always get the same overall image. Large sizes will take a lot of time and the computer can become unresponsive for several minutes. Be patient. Maximum side length is 10'000 pixels, giving an image of 100 megapixel. The browser then would need nearly 2 gigabytes of memory for the image and structure data.

To see hidden image parts lying outside the window use the scroll bars. Using scroll bars does not change the image and is reasonably fast. If you drag or zoom the image with the mouse then you change the image and this becomes very slow for large images.

Input image

Once you open an input image you will see it in the upper right. It may be partially covered by the control panel. To bring it to the foreground click or touch it. At the same time a dark disc with an arrow will appear. Click or touch remaining parts of the control panel to bring it back to the foreground.

Pixels of the input image appearing in the output image are shown in full color. Unused pixels are faded out.

Drag with the mouse or touch to shift the position of sampled pixels. With the mouse wheel or the "Z" and "z" keys you can change the size of the sampled region. With two finger touch you can zoom and rotate.

Dragging the mouse or touch on the disc with the arrow zooms and rotates the sampled region of the input image. Turning the mouse wheel or touching the "Z" and "z" keys only rotates.

Your comments and bug reports are wellcome at