This visualization can create art based on hypocycloids, or circles rolling within other circles. In a traditional hypocycloid, however, it traces the path of a single path as it travels around a circle within a circle. In this animation, there are multiple circles of the same size rolling within the same circle.

By default, it shows the inner and outer circles as well as all the points as they travel around the inner circles. By default, the animation shows the bigger circle and the path of the smaller circles as they travel around. The checkbox next to the start/stop buttons will draw lines connecting points whose associated circles are opposites.

So if there are 30 circles, it would draw lines between circles 1 and 16, 2 and 17, 3 and 18, etc. all the way to 15 and 30. These lines are colored based on length - longer lines are blue and shorter lines are red. If you check the "one line?" checkbox, then it will only draw one line. If you check that and the "show ellipse" box, it will keep track of where the end point of the line changes as the circles rotate.

The points slider changes the number of points, or inner circles. The separation slider changes the size of the angle of the tangent position of adjacent circles. The checkbox "set separation" sets this value to pi, which is a special case (see below).

The inner/outer radius sliders change the radius of the inner and outer circles, respectively. The mulitplier slider changes the multiplier for how long to draw the lines connecting points.

The special case mentioned above is setting the separation value to pi, and the radius of the inner circle to be half of the radius of the outer circle. When this happens, each individual point moves in a straight line along a diameter of the outer circle. If you check "show lines", "one line", and "show ellipse" in addition to those other values being the same, the shape traced will be a perfect elipse, with radii depending on the multiplier.

NOTE: Due to a quirk in Javascript, you have to click the stop button before hitting start if you change any of the sliders. Otherwise, it may start to calculate more than one frame in the time of one frame and potentially crash.


PointsShow lines?Use Multiplier?
SeparationSet separation
Inner RadiusOne line?
Outer RadiusShow ellipse?
Multiplier
Show bigger circle
Show inner circles
Display all points

Points:

Separation:

Inner Radius:

Outer Radius:

Multiplier: