Spirograph Art

Old Spirograph Art

For more information about spirographs see Wikipedia.

Instructions
Presets:
Advanced Controls
Advanced Presets:
Clear & Draw on preset change
Hypotrochoid
A hypotrochoid is formed by tracing a point attached to a circle of radius r rolling around the inside of a fixed circle of radius R, where the point is a distance d from the center of the interior circle.

Epitrochoid
A epitrochoid is formed by tracing a point attached to a circle of radius r rolling around the outside of a fixed circle of radius R, where the point is a distance d from the center of the exterior circle.


r:
R:
d:
A:
B:
a:
b:
p:
r Amplitude:
r Frequency:
r:

r Inc: r Phase:
R Amplitude:
R Frequency:
R:

R Inc: R Phase:
d Amplitude:
d Frequency:
d:

d Inc: d Phase:
line width: line width inc:
line height: line height inc:
cycles:

loops/cusps:
speed/line continuity:
x factor: x factor Inc:
y factor: y factor Inc:

center X: center Y:
image rotation: degrees
rotation inc: degrees
Coloring Type: color scale:
min red:
max red:
init red:
red inc:
min green:
max green:
init green:
green inc:
min blue:
max blue:
init blue:
blue inc:
Inc:
* These only apply to the HSV
Custom coloring types:

Hue Min Percent:
Hue Max Percent:
Value Min Percent:
Value Max Percent:
Background Color:
red:
green:
blue:
t:
max t:

This interactive spirograph art playground requires a browser that supports the HTML5 canvas element. Your browser does not support this.
X

Spirograph Instructions

Create your own spirograph art! This page can be used as a playground or learning tool to see how changing basic parameters affects the generated images. Or it can be used to create and save your own spirograph artwork.

Spirograph Art Creator/Playground only works in browsers that support the HTML5 canvas tag. Unfortunately versions of Internet Explorer older than version 9 do not support this. Other browsers tend to have a longer support history.

Spirograph curves are part of a family of curves known as epitrochoids and hypotrochoids. This site draws both epitrochoid and hypotrochoid curves as well as other variations based on these curves.

A hypotrochoid is formed by tracing a point attached to a circle of radius r rolling around the inside of a fixed circle of radius R, where the point is a distance d from the center of the interior circle.

Hypotrochoid curves are created from plotting the following parametric equations:
x = (R - r) * cos(t) + d * cos((R-r)*t/r)
y = (R - r) * sin(t) - d * sin((R-r)*t/r)
where R, r, and d are as described above, and t is the parametric variable.


A epitrochoid is formed by tracing a point attached to a circle of radius r rolling around the outside of a fixed circle of radius R, where the point is a distance d from the center of the exterior circle.

Epitrochoid curves are created from plotting the following parametric equations:
x = (R + r) * cos(t) - d * cos((R+r)*t/r)
y = (R + r) * sin(t) - d * sin((R+r)*t/r)
where R, r, and d are as described above, and t is the parametric variable.


A complement of 10 basic preset images and 43 advanced preset images are available to generate by picking them from the drop downs at the top left of the page. Each preset chosen populates the controls below the image so that you can see how they are generated or tweak them to your liking.

You can combine multiple spirograph designs, but only in advanced mode. Advanced mode is initiated by checking the "Advanced Controls" checkbox at the top left of the page. Advanced mode enables the additional presets and it allows you to change more parameters for a greater variety of image generation.

By default, basic mode clears the image first when a new preset is chosen. In advanced mode, the default is not to clear the image first when a new preset is chosen. In advanced mode there is a "Clear & Draw on preset change" checkbox that can be used to alter the default behavior while in advanced mode.