Liquid Guilloché

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));
        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:

If you like this, you can also follow me on twitter @binarymax