This post doesn’t really involve data, but I was just messing around with animation and the canvas in Javascript and decided to make this. It’s a fun little interactive web animation that makes aggregate circular motion from a bunch of dots moving in straight lines. There are no real instructions except to mess with the controls and see what it does to the animation (i.e. change the number of dots, the speed slider, the dot colors, and show the dot paths).



One cool thing I noticed is when the animation is at high speed, when you switch the number of dots to 60 from 20 or 30, the circle seems to switch from rolling around to spinning around the center.

It was inspired by an optical illusion video I saw on youtube by Brusspup.

Creating this animation required a little bit of trigonometry (which I had to struggle a little to remember) and learning to programming graphics and animation in Javascript. Animation seems to be just drawing shapes, erasing the shapes and then drawing them in another location.

