Touch the graph to stop and start drawing.
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
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 :)