javascript - 带转折点的 Canvas 螺旋上升效果

Question

螺旋上升效果如下图:



可在此处找到演示:http://openlayers.org/en/latest/examples/dynamic-data.html

在演示页面的底部，使用了一种算法来实现这种效果。但我不知道它是如何工作的。

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);

R、r 和 p 是什么意思？以及如何理解上面的公式？有人可以为我解释细节吗？感谢您的帮助。

Answer 1

我可以识别代码绘制 epicycloid curve (+ 它的相位 theta 永久改变以提供移动效果)。

您可以将 R 称为内(此处较大)圆的半径，将 p 和 r(此处为相等值)称为半径外(这里较小)圆。这里的 r 看起来像环形 Spring 的线圈半径。

第一个被加数对应于外圆的中心，第二个被加数对应于围绕外圆中心的二阶旋转。

使用这些值并观察效果

请注意，如果您更改 p 使其不等于 r，您将得到 epitrochoid曲线(更一般的外摆线)