A Tool for Making Drawings Based on the Golden Angle Spiral

Or, drawing pretty things with math.

Golden angle spiral made up of 30,000 dots

The above image has 20,000 dots arranged according to the golden angle. This is the same ratio used in the popular golden rectangle, but in angle form. If every dot is rotated by the golden angle (roughly 137.508 degrees), and placed at a distance from the center relative to the square root of its index, the result is an efficient arrangement for equally spacing elements in a circle (and a pretty cool spiral pattern).

One lazy Sunday, I was hit with the compulsion to play with this system so I built a little tool for making these drawings. The below drawings all use 2,000 dots, with varying angles of rotation, and an added size function, where dots can be sized based on the sine or cosine of their distance from the center.

Varying the angle and size function of dots arranged according to the golden angle

Make your own!

Use the tool below to make your own drawings.

Note, be careful with the animation tools if you have photosensitive epilepsy. It can make some intense flashing patterns.

  • Using the top row of controls, you can make a static drawing.
  • The size functions will adjust the base size of the dot.
  • The offset will push the graph left or right. For example, the period of a sine graph is 2pi radians. So enter 3.14 to push the graph by half of a period.
  • The second row gives you some simple animating tools. Whatever value is entered will be added to the base value every frame.
  • This isn't the most efficient animation code, so it will start to slow down around 1,000 dots. But for static drawings you can go up to 30,000 before each drawing starts to slow down.

Some things to try

  • Try a sine graph with three periods, and animate the offset by 0.1
  • With enough dots, even a tiny change in the angle makes a big difference. Start with 1,000 dots and a rough golden angle around 137.5 degrees and animate the angle by .005 degrees.


About the Code

This draws SVG shapes and is built with React. Check out the code on Github.