## Geometry First, Then Equations!

Category : Uncategorized

I was playing around with Javascript and p5.js, making a Spirograph model by drawing an ellipse that rotated inside another ellipse. I wanted it to leave a trail, so I put all the red points in a list and then drew lines between them. It works:

See the Pen Spirograph by Peter Farrell (@peterfarrell66) on CodePen.

But there’s a way to create the points all at once and have a Spirograph design drawn instantly. It just takes a little math. The Spirograph is a prime example of oscillations, and trigonometry is a crucial tool for modeling oscillations. You can use sines and cosines to locate the x- and y-coordinate of a point at a time t. The location is given by the general formulas

*x(t) = a*cos(b*t) + c*sin(d*t)*

and

*y(t) = a*sin(b*t) + c*cos(d*t)*

where t is time and a, b, c, and d are variables that affect how big the design is, etc. **This is how to use equations!** I adapted the formulas above and added this code to calculate the location of a point at any time t:

[(r1-r2)*cos(t) + prop*(r2*cos(t*(-r1/r2))), (r1-r2)*sin(t) + prop*r2*sin(t*(-r1/r2))]

I’m using a variable for the radii of the small circle so I can create a slider to vary it. The other slider varies the distance of the “pen-hole” from the edge of the small circle. The program creates 10,000 points and then draws them, very quickly! Here’s the outcome of using a list with the formulas:

See the Pen Spirograph Formula by Peter Farrell (@peterfarrell66) on CodePen.

Now you can change the design just by moving the sliders. Instead of drawing the design in real time, you can draw one design in one frame and make it change a variable in the next frame. Try it out!