螺旋扭曲的多边形和玫瑰。

• 下载完整项目源代码 - 2.2 KB

引言

在[1,2]中，描述了绘制规则螺旋线和几种特殊螺旋线的绘图技术。

尽管有许多种“异国情调”的螺旋线，甚至在二维[3]中也进行了绘制。但在这里，我们将处理最简单的一种，主要使用旋转多边形、大的圆形点、图像、星星和极坐标玫瑰[4]进行绘制。

这里是“多边形”一词的通用定义以及维基百科[5]的其他相关定义：

值得一提的是，即使在这里CodeProject (CP)网站上，我们也有这样的螺旋线[6]。更不用说许多其他来源了。但它们都采用了非常不同的技术和语言/工具。

本文的目的是展示，即使是初学者也可以用纯 JavaScript 绘制异国情调的螺旋线。

这是非常容易理解的，因为[1,2]中已经使用了非常相似的原始绘图螺旋函数和相同的绘制大点的函数bDot()。这里只添加了四个新的小函数，即pNgon()、pImg()、pRose()和pStar()。在下面的代码片段中可以找到它们。

// global vars
  var cvs, ctx, cw, cc, cimg, cf=0;//canvas: context, width, center. image. fill
  var clr, it, n, k, pu, ng; // it - initial angle, n - number of dots,, etc,
                      //  color, k-big dot, pu - plotting unit, ng - n-gon
  var pi=Math.PI, pi2=2*pi, p, ar=0; // p - petals

// Big round Dot (r - radius)
function bDot(x, y, r) {
  ctx.strokeStyle=clr;
  ctx.beginPath(); ctx.arc(x, y, r, 0, pi2, true);
  ctx.closePath(); ctx.stroke();  if(cf) {ctx.fill()}
}

// Plot n-gon (r - radius, n - sides)
function pNgon(x, y, r, ngon) {
  ctx.strokeStyle=clr;
  var a=pi2/ngon, ia=(Math.PI/180)*randgp(180), ai;
  ctx.beginPath();
  for (var i=0; i<=ngon; i++) {
  	ai=i*a+ia;
    ctx.lineTo(x+r*Math.cos(ai), y+r*Math.sin(ai));
  }
  ctx.closePath(); ctx.stroke(); if(cf) {ctx.fill()}
}

// Plot Polar rose (r - radius, p - petals)
function pRose(x, y, r, p) {
  var rc, t, xc, yc, itc, nd;
  itc=pi/360; nd=1000;
  ctx.strokeStyle=clr; ctx.beginPath();
  for(var i=0; i<nd; i++) {
    t=itc*i; rc=r*Math.cos(p*t);
    xc = rc*Math.cos(t); yc = rc*Math.sin(t);
    ctx.lineTo(x+xc, y+yc);
  }//fend i
  ctx.stroke();
  ctx.closePath(); if(cf) {ctx.fill()};
}

// Image
function pImg(x, y) {
  ctx.drawImage(cimg,x,y);
}

// Plot star (r - radius)
function pStar(x, y, r) {
  ctx.strokeStyle=clr;
  var X=[ 0, 5, 5, 8,12,10,12, 8, 5, 5, 0];
  var Y=[14,10, 0, 7, 3,14,24,20,28,18,14];
  var sc=0.05;
  ctx.beginPath();
  for (var i=0; i<11; i++) {
    ctx.lineTo(x+r*sc*X[i], y+sc*r*Y[i]);
  }
  ctx.closePath(); ctx.stroke(); if(cf) {ctx.fill()}
}

如上所述，所有新函数都非常简单。

• pNgon() 函数在位置 x,y 使用半径 r 绘制一个 n 边形，并使用随机角度进行旋转。
• pRose() 函数在位置 x,y 使用半径 r 和 p 个花瓣绘制一个极坐标玫瑰[4]。
• pStar() 函数在位置 x,y 使用半径 r 和适当选择的比例绘制一个星形。
• pImg() 函数在位置 x,y 绘制一个图像。

此外，为除图像外的所有绘图单元添加了随机颜色。这是使用[7]中众所周知的随机颜色辅助函数完成的。结果，在典型的“生成/绘制螺旋线的 Prime 循环”中，只修改了一行代码（如下所示）。

    if(pu!="i") {clr=randhclr(); ctx.fillStyle=clr};

备注

不知何故，有些玫瑰填充的颜色“过多”。如果这让你感到困扰，请取消选中“填充”复选框。顺便说一句，除了图像外，所有绘图单元都可以进行同样的操作。

请特别注意 pStar() 函数，因为它展示了绘制闭合多边形的最常用方法，该方法不依赖于公式，而是基于任意 x,y 坐标表。这反过来又为编码者提供了创建各种绘图单元的可能性。例如，国际象棋人物、水果、雪花等。

使用演示网页

zip 文件中只附带了一个小的演示网页：“ExoticSpiral”。

它允许用户选择以下选项：

• n 边形的边数；
• 极坐标玫瑰的花瓣数；
• 是否填充绘图单元的微小主体；
• 绘图单元，即以下任何一种：一个大的圆形点、一个多边形、一个玫瑰、一个图像或一个星形；
• 点击“绘制”按钮几次会每次增加半径，并随机更改颜色；
• 点击“重置”按钮几次会每次使用相同的初始半径，并随机更改颜色。

注意：正如[4]中所述——

备注：我认为，所谓的“极坐标玫瑰”看起来更像“彩色雏菊”[8,9]。但这并不重要。

上面第 2 种和第 3 种螺旋线中观察到的结果非常有趣，出乎意料：它们看起来像 3D 旋转管道。

上面的[图 2]中没有 3D 效果，因为多边形在旋转，但螺旋线仍然清晰多彩。第三种螺旋线是用未填充颜色的五边形绘制的。

注意：上面的[图 3]中，您可以使用自己的漂亮照片代替 CP 的“专业”图标。

结论

现在，我们的新手程序员应该已经是绘制螺旋线的专家了。当然，前提是这位新手学习并实践了所有类型：规则[1]、Vogel[2]和异国情调。

我（希望）从这个不那么复杂的页面中学到的是以下几点：

• 如何创建生成绘图单元的函数，即任何一种小图形。实际上，编码者已经准备好了支持 5 种绘图单元的函数，即大点、多边形、极坐标玫瑰、图像和星形。
• 如何在画布上按所需顺序放置任何绘图单元。
  • 注意：这里我们使用的是螺旋线，但也可以使用圆、菱形等。
• 如何旋转某些绘图单元。
• 如何处理绘图单元的大小。
• 如何处理随机颜色和填充单元的颜色。
• 依此类推。

备注

• 绘图单元可以称为“标记”、“形状”、“绘图符号”、“小符号”等。
• 许多高级图形工具/语言（例如 gnuplot 和 R）都有数十种内置标记。有关 R 的示例，请参见[10]。
• 所以，现在您在 JavaScript 中也有一些了，如果您愿意，可以随时使用它们。

以下是为我们新的螺旋线和复制绘图单元（使用纯 JavaScript）专家提供的一些练习建议：

• 练习 #1。 修改原始的ExoticSpiral.html页面，添加 2 个新的绘图单元（并删除所有旧函数）。示例如下：
  • “笑脸”（使用arc()函数和线条）
  • 您自己的多边形（以pStar()为例）
• 练习 #2。 再次修改您刚刚创建的myExoticSpiral.html页面。这次，不是使用 1 条螺旋线进行绘制，而是在画布中心生成 2 个圆（小的和大大的）。在小圆上放置 8 个“笑脸”，在大圆上放置 8 个您自己的多边形。
• 练习 #3。 再次修改您刚刚创建的myExoticSpiral1.html页面。这次，不是使用 2 个圆，而是生成 3 条线，并在每条线上放置不同的绘图单元。换句话说，使其看起来类似于[10]中的图片。

需要强调的是：始终进行大量的存档备份，例如，至少为每个新页面版本都备份。

哦，螺旋线是如此简单！不是吗？

参考文献

1. Voevudko, A.E. (2017) Dancing with Spirals. Code Project, 网址：https://codeproject.org.cn/Articles/1213518/Dancing-with-Spirals。
2. Voevudko, A.E. (2017) The Vogel Spiral Phenomenon. Code Project, URL: https://codeproject.org.cn/Articles/1221341/The-Vogel-Spiral-Phenomenon.
3. Spiral, ShutterStock (Stock Photos, Illustrations, and Vector Art), URL: https://www.shutterstock.com/search/spiral.
4. Rose (mathematics), Wikipedia, the free encyclopedia, URL: https://en.wikipedia.org/wiki/Rose_(mathematics).
5. Polygon, Wikipedia, the free encyclopedia, URL: https://en.wikipedia.org/wiki/Polygon.
6. Nesteruk, D. (2010) Using Lambdas for WPF or Silverlight Animation. Code Project, URL: https://codeproject.org.cn/Articles/85815/Using-lambdas-for-WPF-or-Silverlight-animation.
7. Voevudko, A.E. (2017) Generating Random Voronoi Diagrams. Code Project, URL: https://codeproject.org.cn/Articles/1189287/Generating-Random-Voronoi-Diagrams.
8. Daisy, Pixabay (Free Images - Photos, Illustrations, Vector graphics), https://pixabay.com/en/photos/daisy/.
9. Colored daisy flower images only, Google (search), URL: https://www.google.com/search?q=colored+daisy+flower+images+only&rlz=1&tbm=isch&tbo=u&source=univ&sa=X&ved= 0ahUKEwihhvS18svYAhUDzGMKHZq1BmYQ7AkIMg&biw=1007&bih=605
10. Shapes and line types, Cookbook for R, URL: http://www.cookbook-r.com/Graphs/Shapes_and_line_types/.

历史

2018年1月16日 修复编辑部分。添加“历史记录”。
2018年1月12日 首次发布。