Help for the kaleidoscope using quadrilaterals

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 two quadrilaterals. Their repeated mirror images at the straight lines and inversions in the circles generate the tiling.

You see images of a quadrilateral that has a corner at the center:

light yellow - The quadrilateral
yellow- Rotated and translated copies of the quadrilateral
dark yellow- Rotated mirror images of the quadrilateral

Far away from the center you see images of a quadrilateral that has a corner at infinity:

light blue - The quadrilateral.
blue- Rotated and translated copies of the quadrilateral
dark blue- Rotated mirror images of the quadrilateral

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.

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 quadrilaterals of the tiling, as discussed above.
convergence- Points needing a lot of inversions in the circles to go to the original quadrilaterals 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.
image- Maps an opened input image like a skin on the tiling.

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

Choose the rotational symmetries:

center - Rotational symmetry at the center of the image.
upper- Symmetry at the intersection between the upper circle and straight line
middle- Symmetry at the intersection between the two circles
lower- Symmetry at the intersection between the lower circle and straight line

Change the size of the upper circle.

Change the fractal character of the image. A value of zero gives a Poincaré disc representing a periodic tiling of hyperbolic space. A increasing value moves the lower circle towards the center and increases the fractal dimension of the border between yellow and blue quadrilaterals.

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