Spinning Dots This week’s project was to reconstruct the spinning dots gif.

I googled “spinning dots gif” and found only three images that matched what I wanted to do.
Two of them are from Dave Whyte (Spinning dots, bees & bombs) and the other one from Ashwini Kumar Kounduri (Rotating Dots).
None of these links explained how it’s done. I can say that it was much more difficult to explain than it was to code.

There are three things to consider.

• The number of dots in each ring
• The speed of the rings
• How many frames you need to capture an animation cycle.

The number of dots in each ring is a multiple of the number of dots in the first (inner) ring.
The gif displayed on this page has 4 dots in its inner ring and has 9 rings. The second ring has 8 dots, the third 12 and so on. The last ring contains 36 dots.

Finding the speed of the rings was more tricky. I used the last ring as a reference because it was easier to see what was going on. Draw a line from the center all the way to the last ring. For each dot of ring 9 that crosses the line you’ll see 2 dots crossing the line from ring 8, 3 dots from ring 7 and so on all the way up to the fisrt ring where 9 dots will cross the line.

Lets find out the speed of ring 8. For an entire revolution of ring 9 you’ll get 36 dots across the line. On ring 8, you’ll get 36*2 = 72 dots that crosses the line. Remember that there are only 32 dots on ring 8 so 72 dots across the line means 72/32 = 2.25 revolutions. In other words, for every turn of ring 9 you have 2.25 turns of ring 8.

ring 8 –> 36 * 2 / 32 = 2.25

we can simplify this to: 9 * 2 / 8

9 is the total ring count
8 is the current ring were dealing with
2 is the number of dots that crosses the line

The process is the same for all the rings:

9*1/9 = 1
9*2/8 = 2.25
9*3/7 = 3.86

See the pattern?
1/9, 2/8, 3/7, etc.

To make the script flexible I wanted to avoid hard coding values, now I was ready to do it.

Once the rings are properly synchronized, the number of frames for a smooth animation depends on the speed of the outer ring and how many dots it contains. In this case, with 36 dots on the last ring and an angular velocity of 0.0025rad I needed 70 frames for a complete cycle.

frames = 2*pi / dots in last ring / angular velocity of last ring