Updated on October 5, 2005

Kaleidoscope Applet

To access the Kaleidoscope applet, click the button below.

Kaleidoscope Introduction

The Kaleidoscope program (which may be run as an application or as an applet) was designed to illustrate the power of the JPT interface Paintable which provides a uniform way to encapsulate shapes, image, and text into graphics objects that may be painted onto a graphics context and manipulated by arbitrary affine transforms.

The Kaleidoscope program also shows the JPT ability to easily generate polygons and smooth cubic curves from a list of vertices using the classes PolygonShape and AutomaticCurve

The Kaleidoscope user can request a random picture that is built from random shapes and/or randomly selected images. Optionally, a text string with the word “Kaleidoscope” may be displayed. When the Kaleidoscope animation is run, a wedge appears whose angle is 180/N where the parameter N is chosen by the user. This wedge will rotate slowly clockwise and a mirror reflection of the wedge region will be displayed in the graphics window. This simulates a kaleidoscope. To provide more realism, the user may choose to have small random transforms be applied to each object before each cycle is displayed.

Watching the Kaleidoscope animation with random transforms enabled can be a beautiful and mesmerizing experience.

Kaleidoscope Snapshots

Below are three half-size snapshots of the Kaleidoscope applet. The first snapshot shows a typical picture in the kaleidoscope graphics window. The objects in the window may be dragged using the mouse to better position them for the animation. The second snapshot shows a single kaleidoscope mirror corresponding to a wedge angle of 180 degrees. The third snapshot shows a pair of kaleidoscope mirrors at angle 60 = 180/3 degrees. In general, the wedge angle has the form 180/N for some integer N.

Kaleidoscope With Wedge Not Visible

Kaleidoscope With The Wedge Not Visible

Kaleidoscope With Wedge Not Visible

Kaleidoscope With The Wedge Set At N = 1

Kaleidoscope With Wedge Not Visible

Kaleidoscope With The Wedge Set At N = 3

Directions For Using Kaleidoscope

The controls on the lefthand side of the kaleidoscope frame manage the creation of the picture to be animated, the angle of the kaleidoscope wedge during animation, and what random affine transformations will happen, if any, as the wedge rotates clockwise.

A new picture may be created by pressing the main button Make Kaleidoscope Picture. There are three radio buttons that permit the user to choose between shapes only, images only, or a mix of shapes and images. For convenience, clicking a radio button will cause a new picture to be generated without the need for an extra click of the main button.

The text field for How Many Items? controls the total number of shapes plus images. Randomization is everywhere: in whether to choose a shape or an image; in the type of shape (rectangle, oval, polygon, or smooth cubic curve); in the color and transparency of the shape; in the particular images selected; in whether to clip an image rectangle to an oval.

The check box Show "Kaleidoscope" String determines whether or not a string with the word “Kaleidoscope” will be mixed in with the shapes and/or images. This option is present primarily to show that the work done with the graphics applies equally to shapes, images, and text.

The wedge angle is determined by an integer N in the text field using the formula 180/N for the angle. The portion of the picture in the wedge will be reflected to make a total of 2N copies within the graphics window. One may also set the start angle for the wedge as the animation begins but that is not especially useful. There is also a check box that will cause the kaleidoscope wedge to remain visible even when the animation is not running.

The controls in the bottom pane determine whether the items in the picture will be subject to random transforms of various kinds as the animation proceeds. One option is no transforms whatsoever.

The running of the animation is controlled by the buttons directly below the graphics window.

When the animation is not running, the user may drag and arrange the objects in the picture to better control their position and visibility. If the animation wedge is visible, then such mouse editing will only be active within the wedge itself on the same principle that in real life one can move an object but not the image of that object in a mirror. The visual impact of moving an object in the picture while the wedge is visible is quite spectacular.

JPT Library

The application and applet code links with the 2.4.0 version of jpt.jar found at:

http://www.ccs.neu.edu/jpt/archive/2.4.0/lib/jpt.jar

Kaleidoscope Source Common to the App and the Applet

The Java file KaleidoscopeApplication.java

This class manages the creation of the kaleidoscope graphical user interface and controls the animation. The applet code calls the application to launch the kaleidoscope.

The Java file Kaleidoscope.java

This class encapsulates the kaleidoscope mirror algorithm that creates a kaleidoscopic image by repeated mirror reflection of a pie wedge section extracted from a picture.

The Java file PieWedge.java

The geometry of a pie wedge is encapsulated in this class.

The Java file KaleidoscopePicture.java

This class manages the display of the shapes, images, and text shown in the graphics window.

The Java file RandomPaintable.java

This class is a helper class for the class KaleidoscopePicture. It manages the random generation of a picture using random shapes and randomly selected images.

The Java file KaleidoscopeWidgets.java

This class creates the individual controls in the kaleidoscope GUI.

The Java file KaleidoscopePanels.java

This class creates the nested panels that build the kaleidoscope GUI from the individual controls and the graphics window.

The Java file KaleidoscopeAnimation.java

This class manages the kaleidoscope animation of the picture in the graphics window.

The Java file KaleidoscopeMouseInfo.java

This class enables editing of the picture by dragging the objects with the mouse. Mouse editing is enabled only when the animation is not running. Note that if the option Show Wedge Always is selected then the mouse is active only within the kaleidoscope wedge.

Kaleidoscope Source Special to the App

The Java file Images.java

This class reads the kaleidoscope images from a local subdirectory "images". The zip file for the kaleidoscope application contains a copy of our images. If you run the kaleidoscope application yourself then you may substitute your own images.

Kaleidoscope Source Special to the Applet

The Java file Images.java

This class reads the kaleidoscope images from the web. The URL of this site is:

http://www.ccs.neu.edu/jpt/images/kaleidoscope/

In order to read a group of images from the web, it is necessary to have a list of the images. This is provided by:

http://www.ccs.neu.edu/jpt/images/kaleidoscope/imagelist.txt

The Java file KaleidoscopeApplet.java

This class generates the applet button that you see at the top of this web page. When clicked, the button calls the constructor of KaleidoscopeApplication to launch the main kaleidoscope window.

Zip Archives

All files for the Kaleidoscope Application in zip format.

All files for the Kaleidoscope Application in self extracting exe format.

All files for the Kaleidoscope Applet in zip format.

All files for the Kaleidoscope Applet in self extracting exe format.

Technical Note

To avoid a dependency on Java 1.5, both the JPT library and the Kaleidoscope applet are compiled using Java 1.4.1_07 as the default.

We encountered a problem using Eclipse 3.1 to perform the compile. Although the applet will run perfectly within Eclipse, when the class files are placed on the web, the applet will not properly initialize using either Internet Explorer or Firefox. The reason for this is not clear.

In any case, the class files for the applet were compiled using Eclipse 3.0 and precisely the same Java source. These class files seem to work perfectly and are the ones on this site.

We hope to explore this anomaly further and then provide feedback to the Eclipse team.

Historical Note

The Kaleidoscope program was originally developed as a case study of object-oriented design and as a test bed for graphics tools for dealing with shapes and images including Bézier curves. The program creates a picture involving random shapes and images and then runs a kaleidoscope animation in which a pair of mirrors reflects this picture continuously around the graphics window. If desired, a string with the word “Kaleidoscope” may be superimposed on the shapes and images and animated as well. Many parameters of the animation may be changed while the animation is running and the objects being animated can themselves be continuously mutated in real time. When the animation is not running, the user may drag the shapes, images, and the “Kaleidoscope” string around the graphics window using the mouse.

The origin of this case study came from my participation in the Killer Examples workshop organized by Carl Alphonce, Zung Nguyen, Stephen Wong, and Phil Ventura at OOPSLA 2002. See:

Killer Examples, OOPSLA 2002.

In particular, another workshop participant, Michael Wick, presented a Kaleidoscope animation suitable for use as a demonstration program early in freshman computer science. This example is available from the above site.

I became interested in the question of whether a more elaborate Kaleidoscope animation would be valuable for a more advanced audience, namely, for upper level students in courses on Object-Oriented Design, Software Development, or GUI Design. I therefore explored the question of how to build a class and interface structure that would support a very general mechanism for creating and displaying mutatable shapes, images, and text and then transforming these under affine transformations. In my opinion, the resulting structures are quite elegant and will indeed serve as an appropriate case study for advanced students.

This incarnation of Kaleidoscope uses the latest tools of JPT 2.4.0 and adds the applet capability.

Contact Information