第九章 旋轮曲线（ROULETTE CURVES）
原作：Keith Peters https://www.bit-101.com/blog/2022/11/coding-curves/
译者：池中物王二狗(sheldon)
源码：github: https://github.com/willian12345/coding-curves
曲线艺术编程系列第 9 章
一开始我本章标题我打算使用“次摆线与摆线（旋轮线）”。我想它们是两种不同类型的曲线，虽然有点儿联系。但随着了解的深入，我有点儿凌乱了。事实上摆线是一类非常特别的次摆线。我会原谅我自己的。这是维基百科上它们的定义：
在几何上，次摆线（trochoid 原自古希腊语 trochos ‘wheel’）是一个圆延一条直线滚动一圈形成的旋转曲线。
在几何上， 摆线追踪在圆上的一个点，圆延直线滚动后形成的曲线。
它们不仅不是两个不同的东西，从描述上看它们几乎是同一个东西。细节决定成败。让我们开始探索吧。
有三种不同的次摆线：
- 普通次摆线（也称摆线）
- Prolate trochoids 长幅摆线
- Curtate trochoids 短幅摆线
除此之外，还有一些相关的曲线，大概覆盖以下几种：
Epitrochoids 长短辐外摆线
Hypotrochoids 长短辐内摆线
Epicycloids 外摆线
Hypocycloids 内摆线
Involutes 渐伸线
它们组合在一起就是旋轮曲线家族了。在这章除 Involutes 渐伸线外其它都将涉及到。
讲了了大堆有的没的，先从次摆线开始，让我们一一把它们搞清楚。
Trochoids 次摆线
就像上面描述的，一条次摆线就是一个圆在直线上滚动形成的旋转曲线。在编码之前先把它可视化看看：
如果我们追踪圆周上的那个黑点...
... 新的曲线就是次摆线。事实上由于是绘制点依赖于圆周，所以也称为普通摆线或圆滚线。
如果将圆周上的点延伸超过圆周，那么我们就得到长幅次摆线（Prolate trochoid）。
如果黑点在圆内部，它就是短幅次摆线（Curtate trochoids)。
为了做出这些动画，我让圆从左向右运动，计算出每个位置上圆的旋转角度，用 sine 和 cosine 基于圆的位置与旋转角度计算出点的位置，然后用这些点画出线。但对于次摆线其实有更直接的公式
x = a * t - b * sin(t)
y = a - b * cos(t)
t 是圆的旋转角度，它可以无限增长， a 是圆的半径， b 是圆心点至绘制点的距离 - 可以说是那个点的半径。让我们把它实现出来：
width = 800
height = 300
canvas(width, height)
translate(0, height/2)
scale(1, -1)
moveTo(0, 0)
lineTo(width, 0)
stroke()
a = 20.0
b = 20.0
res = 0.05
for (t = 0.0; t < width; t += res) {
x = a * t - b * sin(t)
y = a - b * cos(t)
lineTo(x, y)
}
stroke()
公式是基于笛卡尔坐标的，我们要将 y 轴移至 canvas 中心，并将 y 轴翻转。
然后画一条直线从 y 轴中心穿过用于表示圆滚动时的“地面”。你可以画也可以选择不画。
我们将 a 和 b 都设为 20， 这样就可以得到摆线（译者者：普通旋转线）了。我们循环将从 0 至 canvas 的宽度用于变量 t, 应用公式连接至计算出的结果点。
如果将 b 提高到 60， 我们就得到了长幅摆线
如果将 b 减小到 10， 我们就得到了短幅摆线。
我不知道长幅摆线和短幅摆线的用词是否准确，但听起来挺酷。
这就是全部关于次摆线的内容。试试给 a 和 b 设不同的值，或者你自己改一下其它值，我就不再再多讲了。因为下面还留有很多旋轮曲线需要探讨。
中心次摆线
接下来我们要聚焦于被称为中心次摆线的四种曲线。与延直线滚动不同，它是延另一个圆滚动，可能是延那个圆圆内部滚动也可能是延那个圆的外部滚动。
四类分别是：
- Epicycloids 外摆线 - 延一个圆外部滚动的圆，圆周上某一点轨迹形成的曲线。
- Epitrochoids 长短辐外摆线 - 与上面一个一样，但这个点是不在圆周上，而是在圆外或圆内，与短幅次摆线与长幅次摆线一样。
- Hypocycloids 内摆线 - 延一个圆内部滚动的圆，圆周上某一点轨迹形成的曲线。
- Hypotrochoids 长短辐内摆线 - 与上面那个一样，但这个点是不在圆周上，而是在圆外或圆内
除此之外，还有一些曲线也是属于上面曲线的一种变体，只是形成曲线的两个圆半径有特殊的比例关系。我们稍后会看介绍一些。
Epitrochoids 长短辐外摆线
首先，让我们将一个圆延另一个圆外滚动可视化
再追踪一下那个黑色的点的绘制结果
这就是你长短辐外摆线！
事实上，由于那个点是在圆周位置上，所以这也就是外摆线！
如果将点往外移动一点...
再我们往内移动一点。
再一次，我创建这些动画是通过计算这些圆的位置，绘制这些圆，再计算这些圆的旋转角度并绘制对应的点， 然后再连接每一帧所绘制的点路径形成曲线。为了展示动画像这么做是值得的，但是其实是有更简单的公式，你可以直接应用：
长短辐外摆线公式：
x = (r0 + r1) * cos(t) - d * cos(((r0 + r1) * t) / r1)
y = (r0 + r1) * sin(t) - d * sin(((r0 + r1) * t) / r1)
参数解析：
- r0 是定圆的半径
- r1 是动圆的半径
- t 是增长的弧度
- d 是动圆中心点与绘制点之间的距离 (如果是外摆线则 r1 与 d 相同)
我们用这个公式瞬间就可以用些代码实现：
width = 800
height = 800
canvas(width, height)
translate(width/2, height/2)
r0 = 180
r1 = 60
d = 60
res = 0.01
circle(0, 0, r0)
stroke()
for (t = 0.0; t < PI * 2; t += res) {
x = (r0 + r1) * cos(t) - d * cos(((r0 + r1) * t) / r1)
y = (r0 + r1) * sin(t) - d * sin(((r0 + r1) * t) / r1)
lineTo(x, y)
}
stroke()
我们设置变量 r0, r1, d 然后绘制定圆仅仅是为了引用变量
接着循环 t 至 2 * PI, 得到 x， y 点，绘制一条线至那个点。
得到结果：
值得注意的一点， ro 到 r1 的比例。 180:60 或 3:1。 我们得到3个结点。如果将 r1 改为 45，比例即变为 4:1 ， 我们将得到 4 个结点。（我将 d 变为 45 也是为了适配 r1）
下面是 12:1 :
如果比例的第二个数字不是1，会如何？让我们将 r0 设置为 150，r1 为 100。现在，ratio 为 3:2。
毫无意外，我们得到了一个半的结点（nodes）。为了完成这个曲线，我们不得不再绕一圈，需要将 t 的范围值变为 0 到 PI * 4。然后得到结果：
如果你使用整数，循环总是会完成的。在下一个例子中，比如是 11:7 ，所以不得不将 t 结束值调整为 PI * 14：
如果是 111:70， 意味着我需要 t 结束范围调整至 140 * PI:
手动算这个有点痛苦，你可以创建个函数简化比例计算并用分母 * PI * 2 作为循环次数。 下面有两个有用的函数
//（译者注： gcd 即 greatest common divisor 求最大公约数）
function gcd(x, y) {
result min(x, y)
while (result > 0) {
if (x % result == 0 && y % result == 0) {
break
}
result--
}
return result
}
function simplify(x, y) {
g = gcd(x, y)
return x / g, y / g
}
仅需要将 r0 和 r1 传入 simplify 函数，得到简化后的比例。将结果的第二个数字 * 2 * PI 做为循环的结束条件。下面是例子...
（译得注：简化比例式，最后将分母 * 2 * PI）
width = 800
height = 800
canvas(width, height)
translate(width/2, height/2)
r0 = 111
r1 = 70
d = 70
res = 0.01
num, den = simplify(r0, r1)
circle(0, 0, r0)
stroke()
for (t = 0.0; t < PI * 2 * den; t += res) {
x = (r0 + r1) * cos(t) - d * cos(((r0 + r1) * t) / r1)
y = (r0 + r1) * sin(t) - d * sin(((r0 + r1) * t) / r1)
lineTo(x, y)
}
stroke()
用化简后的分数的分母保证循环足够多闪以形成完整的曲线。
到目前为止，全部是外摆线(圆外旋轮线)。 让我们改变参数 d 来创建一些其它的长短幅外摆线。
让 d 大于 r1:
d 小于 r1:
在这些例子中我没有再把内圆画出来。
你无需让我再提供更多的例子了。只需要改变数字看看能得到啥结果。
特殊长短幅外摆线
蚶线是长短幅摆线的一种，生成它的两个圆半径相等。如果两个点在圆内，则它是特殊的蚶线被称为 Cardioid 心形曲线。
下面是一个蚶线，两个半径都是 80 ， d 值设为 160。
心形线三个值都设为 80
肾脏线是长短幅外摆线的一类，它的定圆半径是动圆半径的2倍，且那个点在动圆的圆周上。这是肾脏线的图
你也可以让那个动圆上的点不在动圆圆周上，但却不再是肾脏线了，但依然是很不错的曲线。
现在让我们把视线转向长短幅内摆线！
长短幅内摆线
正如前面提到的，长短幅内摆线其实就是动圆是延定圆内部滚动的。
我们跟踪那个曲线上的绘制点，就得到了长短幅内摆线
事实上，由于绘制点在动圆圆周上，它就是内摆线。
当绘制点移动到动圆外部， 得到的就是：
当绘制点移到动圆内部...
像之前一样，这个动画是用野路子创建的，其实是有简单公式可以实现。
长短幅内摆线公式：
x = (r0 - r1) * cos(t) + d * cos(((r0 - r1) * t) / r1)
y = (r0 - r1) * sin(t) - d * sin(((r0 - r1) * t) / r1)
参数与长短幅外摆线类似，事实上公式也基本相同，仅有几项符号不同。
下面是使用方法。
width = 800
height = 800
canvas(width, height)
translate(width/2, height/2)
r0 = 300
r1 = 50
d = 50
res = 0.01
num, den = simplify(r0, r1)
for (t = 0.0; t < PI * 2 * den; t += res) {
x = (r0 - r1) * cos(t) + d * cos(((r0 - r1) * t) / r1)
y = (r0 - r1) * sin(t) - d * sin(((r0 - r1) * t) / r1)
}
stroke()
代码运行结果：
注意 r0 与 r1 比例是 6:1, 拥有 6 个点。比例的作用原理与之前的长短幅外摆线一样
下面是半径 312 和 76 (译者注：这里 r0 为 312，r1，d 都为 76)：
将绘制点 d 值设大一点移出动圆圆周：
移入动圆内...
如果你不断尝试，我保证你能发掘出更多有趣的图形。
特殊长短幅内摆线
我将再介绍两种特殊长短幅内摆线。我们需要再次调整两个圆的大小比例。
这是星状图的比例 4:1
还有一个更有趣的比例 2:1. 被称为图斯双圆，以描述它的13世纪波斯天文学家名字而命名。下面是演示它的动画。
正如你所看到的，形成了一条直线。
如果你多创建几个动圆，并将每个动圆的绘制点相位与前一个相比再往后调整一点，你将会得到如下图：
每个点延直线来回运动。如果你将所有线条和动圆移除，你会得到一个旋转的圆的错觉。事实上，它看起来像是另一个内摆线
螺旋图！
小时候如果你像我一样比较呆，那么你可能也会像我这样拥有下面这些东西（译者注：可能我不够呆，反正我没有过，倒是见过同学有类似的东西--!）：
这是几个星期前为写这一章内容我新买的。它很酷，锡盒子包装内包含了一些绘制用的纸还有使用说明和灵感小册子。
大的齿轮固定在纸上。过去用的是小钉子，现在用的是用粘粘的东西（sticky-tack 多伟大的改进！）固定住，还有一些小的多孔的小齿轮。你将笔插进这些小孔中，让它延着大圆旋转一圈。
瞧！一个长短幅内摆线
如果你将小齿轮摆外面滚一轮，它就是长短幅外摆线。相当有趣，说实施，我还是更喜欢用代码实现它。下面是绘制过程中笔滑了，这让线条看起来有点儿乱。笔触也断断续续的。
当我玩的过程中才发现，它只能画出短幅摆线和内摆线。绘制点只能是在移动的齿轮内。
本章 Javascript 源码 https://github.com/willian12345/coding-curves/blob/main/examples/ch09文章来源：https://www.toymoban.com/news/detail-480957.html
博客园: http://cnblogs.com/willian/
github: https://github.com/willian12345/文章来源地址https://www.toymoban.com/news/detail-480957.html
到了这里，关于曲线艺术编程 coding curves 第九章 旋轮曲线（ROULETTE CURVES）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
