DaveKoelle.com ->  Software and Projects ->  Advanced Spirals in ProcessingJS with HTML5
DaveKoelle.com ->  Geometry ->  Advanced Spirals in ProcessingJS with HTML5

Advanced Spirals in ProcessingJS with HTML5
What kind of interesting spirals can be created with rotating arms of various lengths and rotation speeds? Find out and have fun!

Beyond simple spirals

Traditional tools and toys for creating spirals, such as Spirograph®, use toothed gears, where a smaller gear (the rotor) revolves inside a larger gear (the stator). The smaller gear contains a number of holes for inserting the drawing implement.

Creating spirals with a stator and rotor results in designs like these:

It might be interesting to explore the designs that can be created if we could use three or more gears, by turning the rotor into a combination rotor-stator that revolves inside the larger stator, and contains another rotor. To do this in software, we can represent the gears with jointed arms. The length of the arms correspond to the distance between the centers of the rotor and the stator, or the distance from the center of the rotor to the hole used for the drawing implement. Each arm rotates relative to its origin.

If we take away the gears and leave the arms, we can extend concept of the arms to create designs that would be impossible given the physical limits of nested gears. In particular:

  • More than two arms can be used to make a design
  • The lengths of the arms can be defined independently of other arms
  • The rotation of the arms can be defined independently of the number of tooths in a gear
  • Arms can rotate in any combination of clockwise and counterclockwise directions, whereas in physical gears, these must alternate
  • Arm lengths and rotations can be defined as functions instead of constants (Very advanced, and not part of the demo below)

Analysis of advanced spirals

Spirals created using this techique are quite interesting. It's hard to visualize what the spiral will look like by just looking at the settings, before the spiral is drawn. While the spirals are intricate, they seem to maintain symmetry about at least one axis. At some point, the drawing arms always come back to their original position (sometimes within a slight margin of error).

[spiral] [spiral] [spiral]
[spiral] [spiral] [spiral]

Creating advanced spirals

You can use the application below to play with this method of creating spirals. Go ahead and change the values below, or click on images in the Gallery to draw some existing spirals.

If you create an interesting spiral, let me know and I'll add it to the Gallery! Send me the settings and an image of the spiral.

You are welcome to take your own screenshots of spirals you create with this application, and upload them to Flickr or Twitpic, or whatever you'd like. If you do, tag it with "advspiral" on Flickr, or #advspiral on Twitpic.

 Arm 1Arm 2Arm 3Arm 4
Click on canvas to start drawing image
You'll need a browser that supports HTML5 to see this content.

Gallery: (Click an image below, then click in the drawing canvas to draw the spiral you selected)

The six spirals below differ only in whether the changes in radians are positive or negative.

The six spirals below differ only in the length of their arms.

Observations about advanced spirals

The following are some observations I have made about these spirals. For all of the Demonstrations below, click the word Demo, then click inside the drawing canvas to draw the selected demo.

Spirals with 2 Arms

  • In a simple 2-arm spiral (similar to those that can be created with spiral graph toys), the number of loops seen in the spiral is a function of the ratio between the radians per step for each of the arms. In fact, it looks like the number of loops is equal to the sum of the numerator and denominator of the reduced ratio.
    Ratio# LoopsDemo
    Ratio# LoopsDemo
    Ratio# LoopsDemo
  • Inverse ratios produce shapes that have star-like ends instead of loops. Again, the number of star-like ends is equal to the sum of the numerator and denominator of the reduced ratio.
    Ratio# EndsDemo
  • The length of the arms also indicates whether the shape will be spiral or a star. Ratio for examples below is 4:1. Note that the Arm1=Arm2 and Arm1<Arm2 conditions are impossible with physical spiral graph toys.
    Arm 1 > Arm 2Spiral with loops
    Arm 1 = Arm 2Loops meet at center point
    Arm 1 < Arm 2Star with loopy ends
  • All of the spirals above assume a clockwise Arm1 and counterclockwise Arm2. If we break the laws of physics and make both arms move in the same direction (again, impossible with physical spiral graph toys), the result is more similar to a cardioid (see also Wolfram Mathworld), where given a ratio of x:y, there appear to be x-y (x minus y) loop-ends in the spiral.
    Ratio+ / -Demo
    7:3+, +
    3:5-, -
    5:3-, -
    2:1+, +

Spirals with 3 Arms

  • Spirals with rotation ratios of x:y:x and, interestingly, x:y:-y (where '-' indicates a rotation aside from the clockwise-counterclockwise alternation) remain radially symmetric.
    Ratio+ / -Demo
    2:1:2+, -, +
    3:1:1+, -, -
  • In spirals with 3 arms, we start to see bilateral symmetry instead of radial symmetry.
  • Spirals in a ratio of x:y:ay or x:y:ax, where 'a' is an integer, maintain the general shape of the 2-arm x:y spiral, with a little embellishment.
    Ratio+ / -Demo
    2:1:3+, -, +
    2:1:10+, -, +
    2:1:10+, -, -