Several years ago, my wife ran across a small Java applet called Kaleidoscope Painter. Since then, we've had fun with it, but we've also seen places where it could be made more flexible and powerful. So when I decided that I needed a project to introduce myself to JavaScript, it seemed like the perfect opportunity to see how far the kaleidoscope drawing concept could be taken.
The idea is pretty simple. You draw in the canvas, and Kaleidosketch creates symetry by rotating and reflecting your drawing in real time. You have control over virtually every aspect of the process. You can change the number of rotations, whether your drawing is reflected, the center of rotation, the line width, color, and how that color changes as you draw.
Kaleidosketch relies entirely on the HTML canvas element introduced in the still very new HTML 5 spec. This, unfortunately, means that browser support is limited. For the most part, Kaleidosketch works in the latest releases of Firefox, Safari, and Opera.
Drag and drop re-ordering of layers does not seem to work in any version of Firefox for Macintosh. Make sure to plan your layers carefully from the beginning.
Safari 3.1 does not support picking up a color from the canvas or saving your picture. Mac users can press cmd-shift-4 and then drag across the canvas to take a snapshot. It will be saved on your desktop.
For the adventurous, the latest nightly builds of Webkit, Safari's rendering engine, support all of Kaleidosketch's features. Webkit nightly builds co-exist with Safari 3.1, and you can switch between them whenever you want.
Opera 8.2 doesn't support picking up a color from the canvas. If you're willing to live on the wild side, the latest beta of Opera 8.5 supports all features of Kaleidosketch.