The Kaleidoscope

In our previous tutorial Kaleidoscopic Gallery in Flash CS4, we provided a custom AS3 class that makes it possible to create beautiful kaleidoscopic images from a bitmap of your choice. The kaleidoscope presented in the earlier post is a simple, centrally symmetric case that corresponds to a two mirror kaleidoscope. Here we show how to construct a three mirror kaleidoscope. Click on the image below to open the applet in a new window.


  • Download all source fla and as files corresponding to this effect:

Three Mirror Kaleidoscope

The effect presented here corresponds the case of a kaleidoscope that consists of three mirrors that form an equilateral triangle. This is the most common type used in toys. It might remind you of your childhood experience.

The optics behind a three mirror kaleidoscope, the refelections of reflections, multiple virtual images, is a bit complicated. You will find a thorough explanation of the physics behind such a kaleidoscope in the article at Kaleidoscope Optics

Mathematically the image corresponds to tiling of the plane by triangles in such a way that any two adjacent triangles are mirror reflections of each other. The idea can be illustrated by the following picture:

Take a look at our custom AS3 class, KaleidoscopeThreeMirrors, contained in the zip package that you can download from the link above, to see how such a tiling can be constructed.

KaleidoscopeThreeMirrors Class

The KaleidoscopeThreeMirrors class has the following public methods.

The constructor evoked with the key word 'new':

  • new KaleidoscopeThreeMirrors(bd: BitmapData, hr: Number, dr: Number)

The constructor takes three parameters. The first parameter is a BitampData object from which kaleidoscopic images will be derived. The second parameter is the radius, in pixels, of each hexagon in the tiling, in other words, the length of the sides of the triangles in the tiling. The last parameter is the radius of the circular display.

  • doSpin( ): void

The public 'doSpin' method redraws the kaleidoscope. Since the matrix for the beginBitmapFill called in the function that does the drawing contains random parameters, the image will change each time the 'doSpin' method is called.

In addition, the class has a public 'destroy( )' method that you should call if you want to delete an instance of the class at runtime.

In the applet above we use two instances of the KaleidoscopeThreeMirrors class. The first instance, reminiscent of kaleidoscope toys, takes the BitampData corresponding to a MovieClip drawn at authoring time, by hand, stored in the Library and linked to AS3. The second instance uses BitmapData extracted from a JPEG image imported to the Library and linked to AS3.

You can easily substitute your own image. You can draw a much better MovieClip that will give rise to more compelling images. Download the zip file and enjoy experimenting with it!

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.