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.