A photo of meKyle Cutler

Experiment: Spirograph

Controls
Speedrad / sec
Pen Distance
Show / HideCirclesRadiiPenColor

space to play / pause

enter to reset

left / right arrows change the speed

NOTE: things get more interesting at high speeds ;)

About Spirograph:

This is a highly customizable emulator of the classic "Spirograph" toy. It is possible to have many nested "gears" of different sizes, each rotating at different speeds, and a pen at some point along the innermost circle tracing a path on the canvas. What follows is a description of each feature or option, and what it does:

  • Speed

    This value represents a global multiplier by which the speed of every circle is multiplied.

    The higher this value, the faster the spirograph will move.

    At high speeds, interesting things start to happen.

    The precision of the spirograph begins to degrade, and the lines drawn between sample points start to become more visible.

    Increasing the speed even further can create interesting visual effects, so I encourage you to give it a try.

  • Pen Distance

    How far along the innermost circle's radius the pen lies.

    Each frame, lines are drawn between calculated points along the Spirograph.

    These lines follow the pen, which is connected to the center-most circle.

    Note that the pen distance may lie outside of the circle. This can lead to some interesting effects.

  • Color

    When drawing with color, the angle of the innermost circle is used to determine the hue.

  • Circles

    Spirograph keeps track of a list of nested circles, which rotate as if they were gears spinning along the inside of the gear above it.

    Each circle has a radius and a speed.

    A circle's speed is a measure of how far along the inside of the parent circle it rotates each second.

    So a circle with speed 3.14 would complete one half revolution around its parent each second.

    Speeds may be negative, in which case the circle will simply rotate in the opposite direction.

    A circle's radius should have absolute value between 0 and 1.

    Higher values are acceptable, but will not fit inside of the canvas.

    A circle's radius may be negative, in which case the circle will rotate along the opposite side of its parent circle.