Pre-notes: Feel free to contribute to the project.
https://stabla.github.io/guillocheJS/
Download the guilloche-animator.js and put it in your project's folder
<script src="guiloche-animator.js"></script>
Set the values you want in guilloche-animator.js in the figure: { ...
Generating some spirography (Hypotrochoid, Epitrochoid or Hypocycloid) and make possible animation.
The first step is to create a HTML5 canvas. The second step is to draw the figure, but how exactly to draw the figure ? We have to know, what's a spirograph. At this time, the script only allow to make an Hypotrochoid, Epitrochoid or an Hypocycloid. So let's go to understand how draw a Hypotrochoid.
So, this is, visually how it works. Now, lets do it by math.
Not reinvent the wheel. So open your favorite search-engine and check more about " hypotrochoid ", we immediatly falling on Wikipedia.
The radius of the biggest circle will be called major, R above in the equation.
The radius of the internal circle will be called minor, r above.
The point attached to the internal circle is to a distance d from the center of this same internal circle. Let's call it radius.
On wikipedia, we have our equation, so replace it with our notation :
In loop, we will draw it progressively, for each new incrementation, we change θ.
Set the value you want, and you can get something like that :
Same for epitrochoid, we have this equation:
Set the value value you want, and you can get something like that :
