带有转折点的画布螺旋上升效果答案

【问题标题】：canvas spiral rise effect with turning points带有转折点的画布螺旋上升效果
【发布时间】：2017-12-05 08:19:15
【问题描述】：

有如下所示的螺旋上升效果：

可以在这里找到演示：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 是什么意思？以及如何理解上面的公式？有人可以为我详细解释一下吗？任何帮助表示赞赏。

【问题讨论】：

标签： javascript algorithm math spiral

【解决方案1】：

我可以识别出代码绘制了epicycloid curve（+ 它的相位theta 永久更改以提供移动效果）。

您可以将 R 称为内圆（此处更大）的半径，p 和 r（此处为相等的值）作为半径外圈（这里更小）。这里 r 看起来像环形弹簧的线圈半径。

第一个加法对应于外圆的中心，第二个加法对应于外圆中心的二阶旋转。

使用这些值并观察效果

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

【讨论】：