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.
Related Posts
No Comments »