齿轮图曲线 - 第一部分。

• 下载 GGCArtp1.zip - 4.2 KB

引言

本文的目标是定义和展示齿轮曲线。这种曲线的灵感来自螺线曲线，但希望能简化和统一它们，并克服许多限制。希望生成和绘制更复杂和有趣的曲线。

本文面向初学者和中级程序员，并提供用于说明齿轮曲线不同方面的网页和 R 脚本。

让我们从这两种曲线的简要比较开始。

根据维基百科 [1]
 

关于万花尺及其相关曲线的文章非常多。除了 [1] 之外，还有许多在线动画制作器和生成器，以及许多几乎用任何支持图形的语言实现的应用程序。

根据 [1]，描述笔（连接到齿轮）轨迹的数学方程，用单个参数 t 表示，如下：

其中
  R - 固定外圆/齿轮（又称定子）的半径；
  r - 滚动小内圆/齿轮（又称转子）的半径，r<R；
  rho - 内圆/齿轮上笔孔的半径，rho<r。

应该强调的是，这些不是极坐标方程，因为角度 t（theta）不是极角 [1]。尽管它们看起来与 [2,3] 中的极坐标方程相似。

此外，还应该提到，一些作者使用了许多略有不同的公式，例如：

• 计算并使用齿轮齿数比；
• 添加起始角 phi（又称相位）；
• 计算每个完整圆的循环数；
• 添加其他一些系数。

 

所有这些版本都是完全正确的，因为它们都试图精确地绘制出与“几何绘图玩具”所产生的曲线相似的曲线。

齿轮曲线使用的方程与上面所示的非常相似，但这些方程经过修改和统一，以克服一些现在更灵活的限制：

• R 和 r 的大小可以是任何合理的（或不合理的），即 r>R 也可以；
• 新的 4 个系数（见下文）可以有任何值，包括负值；
• 缩放允许填充整个画布；
• 支持前景和背景颜色。

 

所以，我们版本的齿轮曲线方程如下：

其中
  R0,T0 - 简单地与第一个齿轮半径和角度 t (theta) 相关的系数；
  R1,T1 - 与第二个齿轮半径和角度 t (theta) 相关的系数；

 

使用这些方程的 JavaScript 片段（与下面所示的几乎相同）包含在此项目中使用的每个页面中。

// global vars
  var cvs, ctx, cw;  // canvas, context, width
  var n=2000, psc=1; // dots/segments, plot scale
  var pi=Math.PI, pi2=pi*2;
//
// Plotting Gearographic curves (using 2 gears)
// Coefficients related to:
// R0,T0 - prime radius and theta scale; R1,T1 - 2nd radius and theta scale.
function pGG2g(R0, T0, R1, T1){
  var it=pi2/n, t;   // it - initial theta, t - theta
  // Plot loop
  ctx.beginPath();
  for (var i=0; i<=n; i++) {
    t=i*it;
    x = (R0*Math.cos(T0*t) + R1*Math.cos(T1*t))*psc;
    y = (R0*Math.sin(T0*t) - R1*Math.sin(T1*t))*psc;
    ctx.lineTo(x, y);
    //if(i<5) {console.log("t,x,y:", t, "/",x, "/", y)}
  }
  ctx.stroke();
}

如上所示，——绘制齿轮曲线的函数非常简单，与 [2] 中使用的函数相似。

使用 Demo 1 网页

“演示 1：9 条齿轮曲线（2 个齿轮）”网页（GG2gDemo1.html）包含在 zip 文件中。

它在一个图中生成并显示 9 条简单的循环齿轮曲线（2 个齿轮）。参见下面的图 1。
注：此处使用并显示了系数 (R0 / R1 / T1)

• 子图 1-6：最简单的典型曲线（“万花尺”也如此）
  • (30 / 10 / 10); (30 / 10 / -10); (30 / 29 / 8).
  • (30 / 15 / 20); (30 / 7 / 30); (30 / 27 / 20).
• 子图 7-9：稍微复杂一些的曲线（只是有更多的循环）。
  • (30 / 15 / 57); (10 / 31 / 30); (30 / 27 / 40).

使用 Demo 2 网页

“演示 2：齿轮曲线（2 个齿轮）”网页（GG2gDemo2.html）包含在 zip 文件中。

它生成并显示近三打齿轮曲线（2 个齿轮）。你所需要做的就是点击“绘制下一个”按钮。
注意 - 使用的输入参数显示在画布上方的消息中，格式如下：
   f(2000,200,1,40,20,1,'red').

请参见下面的图 2 中的 6 条选定曲线

• 子图 1-3：漂亮的甜甜圈，中间有五边形和四边形的 2 个图形；
• 子图 4-6：雨伞，带“雕刻”的 3D 环和不对称图形。

使用齿轮曲线生成器网页

“齿轮曲线生成器（2 个齿轮）”网页（GG2gGenerator.html）包含在 zip 文件中，并在下面的图 3 中（部分）显示。

它允许输入几乎所有控制齿轮曲线绘制的参数，并能生成和显示所有可能的齿轮曲线（2 个齿轮）。

 

首先，请参阅下面的图 4 中选定的曲线。注意 - 用于绘制子图的输入参数如下：
  n / R0 / T0 / R1 / T1 / scale.

• 子图 1-3（第一个是不对称的）
  • 3047/300/1/299/434/0.5;
  • 3047/300/1/299/435/0.5;
  • 4000/240/1/235/400/1.
• 子图 4-6（全部 3 个都是不对称的）
  • 3119/300/1/299/311/0.5;
  • 1031/240/1/235/411/0.6;
  • 4003/240/1/235/400.023/1.

现在，重新加载页面并按以下方式进行测试

• 将线条数更改为 200，并保持所有其他输入字段不变，即使用默认值。点击“绘制！”按钮。结果，将绘制出所谓的“五边形甜甜圈”。
• 现在尝试：201-203，然后是 300-303，800，1000，2000，3000。你会发现 2000 足够使循环看起来平滑，即没有可见的线段。
• 继续使用相同的测试策略与其他输入参数。另外，尝试负值。最终，您将需要使用“绘图比例”参数，这将有助于将图像完美地放入画布中，或者有意地填充整个画布。
• 交换 R0 和 R1，因此参数为 2000/100/1/200/40。结果 - 一个不同的甜甜圈。
• 享受发现的新图像！我敢打赌，其中许多以前从未见过。

结束语

在测试“生成器”页面时，用户肯定会发现关于输入参数的以下有用提示

• 线条数（实际上是线段）使曲线看起来平滑，对于大多数曲线来说，2000 就足够了。
• R0 和 R1 充当所绘图形的外圆和内圆。但如果 R0 和 R1 的值互换，图形看起来会有所不同。
• T1 控制循环数或多边形数（通常，此数字 n=T1+1）。

结论

首先，让我们强调：我们所有的目标都实现了！也就是说，我们定义了新的一组齿轮曲线，它与众所周知的万花尺曲线非常相似，但同时，它生成了塑料玩具无法绘制的新曲线。

应该提到的是，一些万花尺曲线无法通过齿轮曲线重现，这是对方程和一般绘图进行修改的必然结果。

（我希望）从这些不那么复杂的页面中学到的东西如下：

• 如何将 9 张绘制的图片放入 1 个画布图形中（参见“演示 1”页面的代码）。
• 如何仅通过每次“懒惰”点击来生成和显示许多选定的图形（参见“演示 2”页面的代码和 GGD2.js）。
• 如何处理画布图形的前景和背景颜色（参见“演示 2”和“生成器”页面的代码）。
• 如何测试具有许多输入参数的页面，例如，类似于“生成器”页面。

在下一篇“齿轮曲线 - 第 2 部分”文章中，将讨论一些有趣的 R 脚本发现，还将介绍基于 JavaScript 的多齿轮曲线解决方案。

参考文献

1. 万花尺，维基百科，自由的百科全书，网址：https://zh.wikipedia.org/wiki/Spirograph。
2. Voevudko, A.E. (2017) Dancing with Spirals. Code Project, 网址：https://codeproject.org.cn/Articles/1213518/Dancing-with-Spirals。
3. Voevudko, A.E. (2018) 螺旋扭曲多边形和玫瑰。Code Project，网址：https://codeproject.org.cn/Articles/1224773/Spiraling-Twisting-Polygons-and-Roses。