Search code examples
javascriptalgorithmmathspiral

canvas spiral rise effect with turning points

There is a spiral rise effect as showed bellow:

spiral rise effect

A demo can be found here: http://openlayers.org/en/latest/examples/dynamic-data.html

In the bottom of the demo page, an algorithm is used to implement this effect. But I can not figure out how does it work. 

var t = theta + 2 * Math.PI * i / n;
var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);

What does R, r and p means? And how to understand the formula above? Can someone explain detail for me? Any help is appreciated.

Solution

  • I can recognize that code draws epicycloid curve (+ it's phase theta permanently changes to provide moving effect).

    You can refer to R as radius of inner (here bigger) circle, p and r (equal values here) as radius of outer (here smaller) circle. Here r looks like radius of coil of toroidal spring.

    The first summands correspond to the center of outer circle, the second ones - to the second-order rotation about outer circle center.

    Play with these values and observe effects

    Note that if you change p to make it not equal to r, you'll get epitrochoid curve (more general kind of epicycloid)