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