A picture kaleidoscope with processing

15.5.2011

A while ago, I stumbled over an article about kaleidoscope creation, probably because of one of my adobe Flash collaborators. It was lying around for a while, then during a train ride i hacked something like that together in Processing. It is impressing how different a picture looks when mirrored this way.

I spent quite some more time to fine tune the sketch. There is a page for the kaleidoscope on OpenProcessing. I recommend to download the application. It runs smoother and in full screen, plus you can load your own images and save snapshots.

To interact with the kaleidoscope:
Move mouse to change image part that is shown

  • hold left button to move the image
  • hold right button and move left and right to rotate

Keys:

  • 0 to 9: set number of mirror axis
  • r / R: accelerate/decelerate rotation of the resulting image

When you download the desktop version, you have additionally:

  • s: Save snapshot to current directory
  • o: Open an image file to play with
You can download the Java application: Linux | Windows | Apple OS/X
The default image is a part of a painting done by my mother.

The Code

The principle is simple, the effect stunning: Part of an image is placed into a buffer and masked to become a slice of pie and then rotated around the center. The article mentioned above explained the simpler concept of mirroring a part of the image, but this limits the image to 4 axis. I did not want to have the limit and use rotation which allows an arbitrary number of mirror axis.

You can look at the source code at github. There is also a page for this at OpenProcessing.

processing.org interactive art images