Touch the graph to stop and start drawing.

Your browser doesn't support HTML5, which is required for this web page to work properly. Please consider trying again with the latest version of a HTML5 capable browser, such as Firefox, Chrome, Safari or IE9.


Recently I watched a television programme by James May, in which he described some of the toys he played with as a child. One of them was Spirograph, which was very popular for drawing complex geometric patterns, using coloured pens. If you've never heard of it then take my word for it: it was fun as well as frustrating. For the uninitiated, Spirograph consisted of plastic wheels with holes in for a pen tip, which you rotated inside (sometimes even around) a larger template. Small teeth on the discs and templates usually kept them from slipping apart, which would ruin a lovingly worked on pattern.

When I watched the program I realised how exciting it could be to create a virtual version that can be run on a webpage. Being based on Processing, Processing.js was an obvious choice to program it, and the result is above. The program allows you to change the pen colour, change the disc size, and clear the sketch to start over. You can also click on the sketch to stop or start the drawing, which helps when you're changing the colour or disc. The pen thickness, and the position of the pen within the disc, are both set using random numbers when the disc size is set, adding some extra complexity to the patterns.

I used the same methods used for the 'canvas with form' interactive demo for communicating between the canvas and HTML form. Hopefully when you read the code you'll see just how simple it really is. You might be surprised at just how complex a pattern you can draw with this web app, so I hope you enjoy playing virtual spirographics :)