# Interactive Spirograph

Posted In: Fun | Math

Play with an interactive spirograph and share your creations with your friends. Just play around with the controls at the top and see what interesting designs you can come up with.

Instructions
Wheel Size controls the size of the wheel inside the ring
Hole Distance controls the distance from the center of the wheel and the edge
Drawing Speed controls the speed at which the spirograph is spins
Line Thickness controls the thickness of the line on the drawing
Line Color is a color picker letting you change the color of the lines
Show Ring and Wheel lets you toggle whether the Ring and Wheel are showing
Clear erases the design
generates a custom URL and copies it to the clipboard so you can share this exact design with your friends.
/ allows you to start and stop the spirograph animation

Equations
The spirographs shown here are hypotrochoids, which is described as a curve generated by tracing a point attached to a circle that rolls around the interior of a larger circle. The equations for the curve are:
\begin{aligned}&x(\theta )=(R-r)\cos \theta +d\cos \left({R-r \over r}\theta \right)\\&y(\theta )=(R-r)\sin \theta -d\sin \left({R-r \over r}\theta \right)\end{aligned}

Sources and Tools
The equations for the spirograph hypotrochoids are from Wikipedia. The drawings and UI are made using canvas and HTML/Javascript and CSS.