This page describes how to use the Spiro applet, version 1.0, a web
application for making handsome drawing. The drawings that
you can make with Spiro are similar to those made with
Kenner's Spirographtm toy (c. 1967).
Contents
To create any drawings, you need a canvas. Click on one of the five buttons in the web browser window to get a canvas window.
Canvases come in five different sizes; a bigger canvas will let you see more detail, but each drawing will take more time to complete. Bigger drawings also take much more time to save. If you are not very familiar with the Spiro applet, use the Medium size canvas.
To use the Spiro controls effectively, you need to know a little terminology. A spirograph drawing is made by rolling a circle (the Mobile) on its rim around a fixed shape (the Stabile). A pen is attached to the mobile, and the line drawn by the pen as the mobile rolls along is the drawing. The spiro applet allows you to control how many times the mobile rotates, and whether it rolls along the inside of the stabile or along the outside. You can also control the color and thickness of the pen, and the color of the paper.
When you are typing values into any of the fields in the Spiro control panel, the value will turn red if it is invalid. You cannot render a drawing if any of the values are invalid.
Before you can make any drawings, you have to get familiar with the Spiro design window. A Spiro design window consists of two parts: the control panel on the left, and the canvas on the right. The control panel includes all the settings you'll need to use for each Spiro drawing you make. The canvas can hold any number of drawings; it always keeps the drawings in the order you made them.
For simple drawings, there are only a few parts of the control
panel that you need to worry about. The control panel is shown in the
picture at right. It is designed to be used from top to bottom.
The topmost section of the control panel is the Design center point. For simple drawings, leave the values of "X" and "Y" at 0.0. If you want to change the center, simply click the left mouse button in the canvas, and the center will change to that point.
The next section holds two Parameters for the Stabile. Set the size of the stabile to a number between, roughly, 40 and 500. The size of the stabile determines the size of the final design. For example, try the value 270.
The next section holds five Parameters for the Mobile. The "Size" parameter determines the size of the mobile, and the "Pen" parameter determines how from the center of the mobile the pen point is placed. Unlike a real Spirograph(tm), the Spiro applet allows the pen to be outside the mobile. The second line of this section determines how many times the mobile will rotate, and where it will roll. Try using the following values for the five Mobile parameters: 96, 80, 60, 0, and Inside.
The next section, Pen size and color, determines the
appearance of the dots of ink that make up the drawing.
For simple drawings, the only parameter you need to set
here is the pen color, set it by clicking on the button
marked "Set pen.." and picking a color from the pop-up
dialog.
(The other two parameters determine the thickness or
width of the pen in the following way: the "Solid" value
determines the basic thickness of the pen point, and the
"Fade" value determines the width at which the ink fades
away to nothing.)
The Advanced Parameters section determines how the Spiro applet advances the mobile to lay down ink from the pen. You can set the "Dots/cycle" parameter to lower values to give a pointillistic effect. If you drawing looks sparse and dotted when you don't want it to, try making the value for Dots/cycle higher, and check the box marked "Adaptive".
The last section is marked Presets, and it contains two controls. To draw one of the preset designs, simply select one of the items from the list, then click on the "Draw Preset" button. The other parameters will be left on the values from the preset.
Once you have all the parameters set up the way you want, click on the button marked "Draw this Design!" and Spiro will compute the design for you. Depending on the size canvas that you chose, and the speed of your computer, rendering a drawing can take anywhere from 1 second to about 20 seconds. You can see the progress of the computation in the status bar under the drawing canvas.
When you are done with a canvas, click on the
button marked "Close".
Along the top of your Spiro canvas are a few buttons that let you manipulate your drawing.
First, remember that Spiro allows you to create one drawing after another, adding each of them to the same canvas. The leftmost button, "Clear", simply deletes all the drawings you've made, leaving the canvas blank. Be careful - once the drawings are gone, they're gone! The second button, "Clear Last", merely deletes the most recent drawing you've added, without affecting prior ones. This feature is very useful when you're making a complicated picture and decide you don't like the latest addition; you can use "Clear Last" several times to delete backward through a sequence of drawings.
You can change the color of the canvas background at any time. Simply click on the third button, "Set background..", and pick a color from the pop-up dialog.
To save a drawing that you like, simply click on the
design operation button labeled Save Image, as shown
in the picture below. Spiro
will re-compute your drawing using a slower but higher-quality
algorithm, then send it through the web server back to your
web browser. Yes, it's a round-about method, but it is the
only approach allowed under Java's security restrictions.
Anyway, when the browser window pops up with your drawing,
you can save it to a file, print it, or use it as desktop
wallpaper.
![[go]](../right.gif){kind=small}
Instructional Spirograph (Applet)
A very nice Java AWT applet that illustrates how a circular (inner)
spirograph works. Allows you to supply size parameters, works with
Java 1.1.
Spirograph Applet
An older spirograph applet written for Java 1.0. This one
is much faster than Spiro, but is less flexible and accurate.
No way to save, though.
Java Spirograph
This modest applet creates a subset of the kinds of spirographs that
Spiro does, but does so more quickly. Unfortunately, this one
offers no save facility, either. Another page on the same
site includes a doubly nested
extension that the author calls a
Trirograph
- very cool.
Animated Spirographs (Applet)
A small Java AWT component that draws randomly-changing animated spirographs
(straight lines only). Compact, fast, cute, and the author gives out the
source code!
Analysis of Spirograph
A short mathematical analysis of the relative sizes of the wheels
in Kenner's original Spirograph set.
Search Ebay for "Spirograph"
Click on this link to search EBay's vintage toy auctions for Spirographs.
Happy Thoughts Toys
Specialty/collectible toy dealer, usually seems to have a Spirograph or two
for sale.
The Geometer's Sketchpad
GSP is a sophisticated tool for creating 2D and 3D geometric drawings and animations
of all sorts, including a much large class of spirograph-like figures than the
Spiro Applet can make. There is also a Java version.
Roulettes (Spirograph Curves) at UMN
A mathematics treatise on spirograph-like curves inside and outside circles; part
of the on-line CRC shapes and formulas excerpts at U of Minnesota's Geometry Center.
Spirograph at Weisstein's World of Mathematics
A very nice mathematical treatment of hypotrochoid curves, with equations
and diagrams.
Download Safari: Spirograph Programs
A couple of spirograph-creation programs for Windows platforms, free downloads.
[Ziring MicroWeb Home] [Spiro Applet Page] [Sign Guestbook]
This applet and accompanying back-end web system were written by Neal Ziring, last modified 2/14/03.