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 right side to open an input image!
It decorates the tiling using various transformations of its colors.

Drag with the mouse 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. You always see exactly the pixels of the generated output image. Dragging and zooming really modifies the image and does not merely change its view. This might take some time.

Control panel

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

Use it to open an input image or to switch between showing the structure of the kaleidoscope or a kaleidoscopic image.

Choose what you will 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.

Choose the number of elements used for generating the image.
Three elements make a Poincaré disc representation of a tiled hyperbolic space. It is surrounded by an inverted image.
Four elements create a Poincaré disc representation of hyperbolic space with a periodic covering by discs. The small discs are Poincaré disc representations of tiled hyperbolic spaces. This is surrounded by an inverted image of a simple Poincaré disc representating a tiled hyperbolic space.
Five elements give similar results as four elements, but now some of the small discs of are images of the entire disc. The large disc is surrounded by an inverted image of itself.

Choose if the lines and circles that generate the image are visible.

Choose the rotational symmetries of the basic triangle:
It has to be hyperbolic. Its sum of angles should be smaller than 180o.

center - Rotational symmetry at the center of the image.
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 for 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

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