I discovered a toy called "Spirograph". Was curious to implement something similar in JavaScript, and this is my attempt after couple hours of work.
I haven't checked all the math yet, please feel free to correct me if something looks wrong.
Let's imagine we have a small circle with radius r inside a circle with radius R.
The inner circle center can be rotated according to
inner_cx = Math.cos(a) * (R - r)
inner_cy = Math.sin(a) * (R - r)
We want to figure out how much a point on the inner circle has to be rotated, to cover
arc of the outer circle with angle a radians?
By definition of a radian the arc length
with angle a radians is equal to s = R * a.
So, the inner circle must be rotated by some angle b and travel the same distance s.
Thus:
r * b = s
R * a = s => r * b = R * a
=> b = (R/r) * a
And now we know our inner rotation b. Circles are rotated in opposite
directions, so we need to add a minus sign to the final angle:
b = -(R/r) * a
That's the math that I'm using in this super short file.
The application state is saved in the query string with query-state library.
The scene is defined as a nested array of circles:
{
// Radius of this spiral, relative to the parent radius.
radiusRatio: 1, // top level is always 1
color: '#B8AD83',
children: [{
// color of the spiral
color: '#B8AD83',
// Radius relative to parent circle
radiusRatio: 0.52,
// where is the hole for a pen relative the radius of this circle
holeRadius: 0.15,
// Wher is the hole located inside this circle
initialAngle: 2.1,
} /* you can have more here if you wan to */]
}You can edit the source code to modify this, or just hit "Randomize" button to get a random animation.
MIT