Pirouette is a Spirograph clone (sample gallery) with a larger number of gears, 30 standard pens and a color-picker, ability to undo/edit, and save the current drawing as a png file. The image below is a screenshot; please visit the link for the live program.
Instructions: The program has an active ring, the large circle, and gear, the small circle with polar grid. Hover your pointer over the gear to preview the path that will be drawn, and click to draw. Use the drop-down menus to select the sizes of the ring and gear, and click a color swatch to select the pen color.
Drawing: By default, drawing is animated; use the a key to toggle animation. Similarly, by default the pen location snaps to the polar grid; use the s key to toggle. Turning off snap-to-grid virtually refines each polar grid unit into a 4×4 block. (That is, the fine grid is not drawn, but the pen snaps to the fine grid.) The g key toggles visibility of the ring and gear. When the ring and gear are invisible, drawing is disabled. At any time you may use the up and down arrows to zoom in or out, or use the size menu to change the overall resolution. Clicking the canvas outside the ring moves the gear outside. (By default, you will need to zoom out to see the gear.)
Layering: Each mouse click inside the gear creates a path. A drawing is a list of paths in the order they were drawn. The left and right arrow keys step backward and forward through this list, showing only paths before the current point. This non-destructively lets you review each path in your current drawing. Editing is detailed below.
Saving: Click the Save button to have your web browser export the current visible drawing as a png. (The ring and gear are not exported.) The resolution is set by the size menu, up to 800×800 pixels.
Cautions on Ephemerality: There is no local storage, and overwrites/deletions cannot be undone. Please edit with caution! Particularly, closing the browser or reloading the page irreversibly clears the canvas. There is no way to save a drawing in progress for later work.
Editing: The x or delete keys delete the current path irreversibly. Normally the current path is the last-drawn path, so deleting removes the most recent addition. (Use the left and right arrow keys to preview the change if you like.) If you first navigate backward, deleting removes the last-drawn visible path and keeps all subsequent paths. For example, if you draw three paths, all three are visible. Pressing the left arrow backs up one step, so you see only the first two paths. Pressing x permanently deletes the second path, after which only one path is visible. Pressing right arrow restores the next path: formerly the third, now the second.
Drawing a path (clicking in the gear) either appends the path to the current drawing, or—if we have navigated backward—replaces the next path, preserving any paths after the next. (For example, if you draw three paths, back up two steps (left arrow twice) so only one path is visible, and draw a path, the second path is overwritten by the new path while the third path is unchanged.) To avoid mishaps, you may want to experiment with navigating and editing before attempting detailed drawings.
About the Math: There are at least two general aspects to the math of Pirouette, one discrete and one continuous. First, the successive locations of the “peaks” when a pattern gets drawn follow the integer division algorithm for finding the greatest common divisor of the ring and gear sizes. Second, there is the parametric description of paths. For that, please see my blog post on compound circular motion and an article in Chalkdust by Ashleigh Ratcliffe and Jenny Power.
About the Software: Pirouette is written in JavaScript and HTML5. Major goals included longevity and the ability to run in any web browser. The current version of Pirouette was written in early June, 2015.