[CS4/JS] Spirographs -- a.k.a. "Guillochés

[Jongware]

A discussion of the spiral graphics as seen on money (and postal cheques, and some of the more expensive lottery bills) on Typophile prompted me to try this in InDesign. It turned out not to be beyond my capabilities! Here is a nice concise script that draws these intricate patterns -- now you can design your own $3 bill!

Using the formulaes from Wolfram on hypotroichoids. Vary the variables at the top for nice patterns; a is the "outer", main radius, b is the "inner" rotating radius, and h is the thickness of the outer rim. (Wrapping it up with a nice dialog is "left as an exercise", meaning I didn't feel like doing it.)

Not explained on that web page, but the number of rotations to get a complete curve seems to be the greatest common factor of a and b -- I discovered that empirically so I might be wrong about that.

Written using CS4, but I can see no reason it should not work all the way down to 1.0, or up to CS5. Best appreciated with your measurements set to millimeters. Warning: the Greatest Common Factor function does not work well with fractions!

The number of points per path is clipped to a measly 10,000, because I suspect InDesign will suffer from overly long paths.

app.activeDocument.zeroPoint = [ app.activeDocument.documentPreferences.pageWidth/2, app.activeDocument.documentPreferences.pageHeight/2 ];

a = 80;

b = 13;

h = 20;

path = [];

nLoop = b/greatestCommonFactor(a,b);

p = null;

for (t=0; t<=nLoop*360; t+= 0.5)

{

     x = (a - b) * Math.cos(t*Math.PI/180) + h * Math.cos (t*((a - b)/b)*Math.PI/180);

     y = (a - b) * Math.sin(t*Math.PI/180) - h * Math.sin (t*((a - b)/b)*Math.PI/180);

     path.push ([x,y]);

     if (path.length > 10000)

     {

          if (p == null)

          {

               p = app.activeDocument.graphicLines.add().paths[0];

               p.parent.strokeWeight = 0.1;

          } else

               p = p.parent.paths.add();

          p.entirePath = path;

          path = [ [x,y] ];

     }

}

if (path.length > 1)

{

     if (p == null)

     {

          p = app.activeDocument.graphicLines.add().paths[0];

          p.parent.strokeWeight = 0.1;

     } else

          p = p.parent.paths.add();

     p.entirePath = path;

}

function greatestCommonFactor (x,y)

{

     while (y != 0)

     {

          w = x % y;

          x = y;

          y = w;

     }

     return x;

}

[Jongware]

By the way, if you are younger than me you might not have played with Spirographs. It consisted of a set of larger and smaller cogs, which fitted into each other, and some coloured pens. Stick Pen into Hole; Rotate Round and Round. Oh the endless possibilities! (if you don't get bored quickly)

I do remember thinking about how to calculate the number of rotations needed for the more complicated roses, but that was way before I could appreciate terms like ".. is an incomplete elliptic integral of the second kind." ...

This is what a Spirograph looks like:

(But my computerized version requires you to acquire ink stained hands in some other way.)

(Ed. Image on my own little space on the web; why does "Insert Image" insert the questy mark icon!?)

[Kasyan Servetsky]

Wow! Very cool!

I'll try to forge some hryvnas with it.

Kasyan

[Loic.Aigon]

Amazing ! Great job !

Listed on scriptopedia asap !

Loic

[Colin Flashman]

this reminds me of the NINA script which was in the Real World InDesign CS3 book...(page 778)

[Jongware]

Really? I read the original Real World CS, after that I figured I knew everything I had to know

Well, I guess I have to make it better then: a version with a simple dialog and with the option of supplying different numbers for the horizontal and vertical width can be downloaded from http://www.jongware.com/binaries/spirograph.zip.

By the way: that proves I have no clue as to how it works, because I expected the rosettes to be 'just' ellipsoid instead of round. However, entering "-80" as the 'radius 2' gives this fascinating result.

[Dirk Becker]

The reference cogs (those without the pen) were fixated on the paper with needles / pins, of course that required a layer of cardboard below the paper.

There were multiple holes in the cogs with different distance from the center, so you could get thru with very few iterations (e.g. even 3 spins) per path, then slightly vary the distance and color and restart. Another possibility to vary here - you'd offset the pen cog by one step after completion of a path, and eventually combine that with different distances.

Aside from your ellipsis distortion, advanced patterns could also be done with multiple reference cogs positioned next to each other so your pen cog could run around the whole group of them. There were also a few different shapes - at least one straight line (of course with round caps) and a ring where the drawing cog was moving inside. If you were careful you could even use the ring for drawing, but it would just too easily jump away from the pinned cog.

Dirk

[Jongware]

Ah yes! That brings back some more memories -- I'll have to try if I can duplicate some of these methods in Javascript.

I still mainly remember the incredibly cheap pens that came with the set, causing stains all over the paper, my hands, my clothes ...

[Jongware]

Useful addition: you can enter a repeat count -- the pattern gets rotated on each iteration. Each new pattern automatically picks up the next color in your swatch panel. If you want to use some color set you created, don't tick the "New document" box because that'll make it use the app default set.

http://www.jongware.com/binaries/spirograph.zip is updated, and this is what it creates with a cyan-to-green color spread:

[Colin Flashman]

the new one also works in CS3 too, which is a bonus. once i understood what the dialogs meant, was really easy to use.

wish i could write scripts like that... best i can do is adjust the find/change by list one...

[Muppet_Mark-QAl63s]

Thanks Jong, put a smile on my face over the weekend… Unfortunately the mac OS color picker has no 'cheap felt tips' option only crayons…

Applescript's 'choose color' dialog…

[Jongware]

I wondered if it was possible to integrate an image. Yup Here is a mugshot of Jongware himself, saved as a grayscale BMP (to ease reading it with Javascript). For each line segment I sampled the image at the correct position, then set the line width and gray tint to match. It takes a long, long way to draw, since there are literally thousands of tiny line segments. But I'm quite pleased with the result! (Well, as the picture shows, I guess.)

Zoomed in on my left eye:

[Harbs.]

Way cool!

Theun, you have way too much time on your hands...

Harbs

[gailcnyc]

I feel like I'm a little late to the party, but just had to add my thanks! Spirograph was one of my all-time favorite activities as a kid (yes, many many years ago...). Finding this after a long sleepless night of work really made my day/night/day.

[Mirotek]

Cool stuff.

I would store the paramters in the document somewhere.

[Guest]

Hi jongware,

How did I miss this earlier? As you'd expect from me, given my obsession with geometric art, I think this is exceptionally cool.

re: storing parameters

In one version the NINA script, I just stuff the parameters into custom script labels. That way, I can populate the UI with the original values when I run the script with one of the objects selected. Very handy.

The NINA script examples are still in the CS5 version of the book, by the way!

Thanks,

Ole

[Harbs.]

Olav Martin Kvern wrote:

How did I miss this earlier?

Probably too busy playing with the CS SDK...

Harbs