SVG Spirograph Page

Spirographs

"Spirograph" is a registered trademark of Hasbro, Inc. It refers to a child's toy that uses toothed wheels to generate patterns, you can see some examples here.

This page draws spirograph patterns, both the traditional 2 wheel versions and patterns generated using 3 or more wheels. You can use the various controls to manipulate the patterns and to create animations.

Ultimately I intend to combine all the different aspects from my historical versions into this single page, but for now you can see the older versions here.

Instructions

The display consists of three areas, the pattern, the controls and the current status. How these are arranged will depend on the size and shape of your dispay. The pattern should be obvious, the controls are accessed by a tool bar that contains tabs like "Setup ▼" and "Wheel 1 ▼" and the current status is identified by a heading.

The tabs introduce additional controls:

Setup	This allows you control the number of wheels used to define the pattern, the number of points used to draw it and the drawing mode. For the wheels and points the arrow buttons will change these values (within limits), the open triangles by '1', the solid triangles by '10' and the double triangles by '100'. The active values are displayed alongside the buttons and in the "Current Status" display. A larger number of points will draw smoother images, a small number can produce other interesting effects.
Mode	The mode menu is always visible. Mode determines how the paterns are displayed. There are currently three: Single Draws a single pattern Overlay Superimposes a number of patterns. The sequence of patterns is generated using the values in the "Overlay" menu. Grid Draw a sequence of patterns in a grid. The sequence is generated using the values in the "Overlay" menu. Evolve Switches to Evolve mode. Most of the standard controls are hidden and a set of images is displayed. These are all children of the original image, with one attribute changed. If you click on one of these the choices will be replaced by a new set based on the image you clicked on. By clicking on the most interesting image you can navigate around the pattern space. The number of images is controlled by the 'images' parameter in the overlay section. To return to normal more click the "Exit" button. The last pattern you clicked on will become the main one.
Wheel Size	This section allows you to control the relative sizes of the wheels. The pattern is normalised so that the total of the sizes is the radius of the whole. Only the active wheels are considered, but you can change the values of the others for later. The open triangles change values by '1', and solid ones by '10'. The active values are displayed alongside the buttons and in the "Current Status" display.
Wheel Rate	"Rate" is the number of rotations the wheel makes while drawing the pattern. To avoid tracing over the pattern multiple times you should set up the wheel rates so that they don't have a common factor. A negative rate turns the wheel in the opposite direction. The symmetry of a two wheel pattern is the difference between the two rates (after removing common factors) so, for instance, [3,5] has a symmetry of 2 and [3,-5] a symmetry of 8 as shown in these images. Rates 3 & 5 Rates 3 & −5 For more wheels the symmetry is the highest common factor of the differences of all the pairs (after removing common factors). For random rates this usually turns out to be 1, ie no symmetry. The open triangles change values by '1', and solid ones by '10'. The active values are displayed alongside the buttons and in the "Current Status" display.
Wheel Phase	"Phase" determines the starting angle of the wheel. Useful when creating animations, especially with more than 2 wheels. For two wheels changing the phase has the effect of rotating the whole pattern. The values are in degrees.
Fill	Fill allows you to change the line colour fill colours and how the fill is applied. Click on one of the coloured circles to select the matching colour. The fill syle can be "none" (the open circle), "nonezero" (the solid circle) or "evenodd" (the half filled circle). These values are taken from the SVG specification on how polygons are shaded. "nonzero" fills the whole pattern, and "evenodd" fills alternate sectors. The active values are displayed to the right of the buttons and in the "Current Settings" area. Examples of each type can be seen below. None NonZero EvenOdd Dashed The dashed mode isn't very exciting when used on simple patterns but can produce more dramatic images when combined with wheel rates that are a significant fraction of the number of points, say around one quarter. This example has rates of 3, -4, 397, combines with 1600 points. Dashed
Animate	This section has three buttons, "Animate", "Auto" and "Stop". Clicking animate will start animating the pattern by repeatedly changing the phases of the wheels. The phase change rates are selected at random so repeatedly clicking this button will produce different animations. The "Auto" button will have the same effect, changing th phase deltas every 5 seconds. The phase values can be seen in the "Current Settings" area. For two wheels the animations just rotate the whole pattern, this feature is a lot more interesting with three or more wheels. The "Stop" button stops the animation and clears the "auto" state.
Overlay	This section allows you to configure a set of delta values for the wheel rates, phases and sizes. The "Apply" button updates the overlay parameters. Overlay Example Overlay Example Overlay Example
Extras	Two sections, "Actions" and "Symmetry". Actions has four buttons: Example Creates an example pattern. This one shows how combining high wheel rates with a small number of points can produce interesting effects. Try turning on animation after selecting this. You can also try varying the number of points to see how this affects the pattern. The changes are quite spectacular. Randomise Changes one of the pattern attributes at random. Repeated clicking will allow you to explore many patterns. Make Symmetrical Changes the wheel rates and the number of points to make the whole pattern symmetrical. The symmetry is taken from the first two wheels. Reset Changes the wheel rates and the number of points to make the whole pattern symmetrical. The symmetry is taken from the first two wheels. The Symmetry section has two buttons which will increase or decrease the symmetry of the pattern by adjusting the wheel rates and the number of points.
Print	Creates a printable copy of the current pattern on a separate page. The size parameter can be used to adjust the pattern size to your printer. The "Go" button will create the image.

Source code

The source code is in the GitHub repositories: EddAardvark/spirograph and EddAardvark/js_library.

spirograph_object.js	The Spirograph calculation and drawing.
animation.js	Manages animation.
tab_bar.js	Manages the tab bar buttons.
colours.js	Colour information.
svg_helpers.js	A collection of SVG helper functions.

Other pages