canvas 带转折点的螺旋上升效果

Question

螺旋上升效果如下图：

A demo can be found here: 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 曲线（更一般的外摆线）

canvas 带转折点的螺旋上升效果

canvas spiral rise effect with turning points

javascript

algorithm

math

spiral