Having recently read a blog post on guilloches[1], I became intrigued and the post inspired me to recreate them. They are beautiful patterns, and the starting formula to draw a rosette looked very simple to replicate in an HTML5 canvas. The 30 minute project quickly took off into a several hour excursion into the beauty of animated guilloches.
A Simple Rosette
The formula for the basic rosette guilloche is not something you would stumble upon when playing around with graphics. It is elegant and simple, and if you have a basic understanding of graphing trigonometry equations you can grasp it without difficulty. In the physical world, a layperson would recognise it as a spirograph[2].
Math.tau = Math.tau||(Math.PI*2);
var rosette = function(image,R,r,p,step) {
var rr = R+r;
var rp = r+p;
var rrr = (R+r)/r;
for(var theta=0,x=0,y=0;theta<Math.tau;theta+=step) {
x = Math.round(rr*Math.cos(theta) + rp*Math.cos(rrr*theta));
y = Math.round(rr*Math.sin(theta) - rp*Math.sin(rrr*theta));
image.putPixel(x,y,color(theta));
}
return image;
}
…Where image is a canvas abstraction that exposes a putPixel method and color() is a function that returns an RGBA object. Here is the result:
A nice benefit of expressing a mathematical construct in code, is that you can iterate the variables over a range to animate. Clicking on the above starts the animation.
A Knee
By changing the formula of the original, we can create new and interesting forms. This example changes the formula slightly by calculating a tangent in place of a sine.
A River
By changing the formula of the original, we can create new and interesting forms.
Combining forms
We can easily combine two or more forms to the same canvas. Here is ‘Ribbon’, ‘Cross’, and ‘Rosette’ together.
Try it out!
The code is all available here: https://github.com/binarymax/guilloche
If you like this, you can also follow me on twitter @binarymax