Spiraling Twisting Polygons and Roses

• Download full project source - 2.2 KB

Introduction

In [1,2], the plotting technique was described for regular and a few unique spirals.

Although there are many kinds of "exotic" spirals even plotted in 2D [3]. But here, we would be dealing with the simplest one, mostly plotted with the twisted polygons, big round dots, images, stars and Polar roses [4].

Here is a simple definition for the general polygon term and other related definitions from Wikipedia [5]:

It should be mentioned, that even here, on CodeProject (CP) site, we have such spirals [6]. Not to mention many other sources. But all of them are employing very different techniques and languages/tools.

The goal of this article is to show that even a beginner can plot exotic spirals in plain JavaScript.

This is very understandable, because a very similar prime plotting spiral function and the same function plotting big dots bDot() were already used in [1,2]. Here, only four new small functions were added, i.e., pNgon(), pImg(), pRose() and pStar(). Find them all in the code fragment below.

// 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()}
}

As you can see above - all new functions are very simple:

• pNgon() function is plotting a n-gon at the position x,y using radius r and twisting it using random angle.
• pRose() function is plotting a Polar Rose [4] at the position x,y using radius r and p petals.
• pStar() function is plotting a star at the position x,y using radius r and appropriately selected scale.
• pImg() function is plotting an image at the position x,y.

In addition, random color was added to plotting all plotting units except images. It was done using well-known helper functions for random color from [7]. As a result, only one line of code (shown below) was modified in the typical "Prime loop generating/plotting spiral".

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

Remark

Somehow, a few roses are "overfilled" with color. If it is bothering you, then uncheck "fill" checkbox. By the way, the same is possible with all plotting units except images.

Pay particular attention to the pStar() function, because it presents the most common method of plotting closed polygon, not depending on formula, i.e., based on any table with x,y coordinates. In turn, it gives coder a possibility to create a big variety of plotting units. E.g., chess figures, fruits, snowflakes, etc.

Using the Demo Webpage

Only one small demo webpage is attached in the zip-file: "ExoticSpiral".

It allows the user to choose the following:

• the number of sides for a n-gon;
• the number of petals for a Polar rose;
• to fill or not a micro body of a plotting unit;
• the plotting unit, i.e., any of the following: a big round dot, a polygon, a rose, an image or a star;
• "Plot" button clicking a few times will increase the radius each time, plus changes colors randomly;
• "Reset" button clicking a few times will use the same initial radius each time, plus changes colors randomly.

Note: As it stated in [4] --

Remark: I think, so called "Polar rose" looks more like "colored daisy" [8,9]. But this is not so important.

Interesting, not expected result can be observed in the 2^nd and 3^rd spirals above: they are looking like 3D spiraling pipes.

There is no 3D effect in the [Fig.2] above, because polygons are twisting, but spiral is still clear and colorful. The third spiral was plotted using not filled with color pentagons.

Note: In the [Fig.3] above, instead of CP "Professional" icon, you can use your own pretty face photo.

Conclusion

By now, our newbie coder should be the expert in plotting spirals. Of course, if this newbie studied and practiced with all types: regular [1], Vogel's [2] and exotic.

What was learned (I hope) from this not so complicated page is the following:

• How to create function generating plotting unit, i.e., any kind of small figure. Actually, coder has ready to use functions supporting 5 plotting units, i.e., big dots, polygons, Polar roses, images and stars.
• How to put any plotting unit on the canvas in the desired order.
  • Note: Here we are using a spiral, but it's possible to use circles, rhombuses, etc.
• How to twist some plotting units.
• How to handle the size of the plotting unit.
• How to handle random color and color filling the unit.
• And so on.

Remarks:

• Plotting units could be called "markers", "shapes", "plotting symbols", "small symbols", etc.
• Many advanced graphical tools/languages (e.g., gnuplot and R) have dozens built in markers. See samples related to R in [10].
• So, now you have some of them in JavaScript too, and you can use them if you want.

Here are a few suggested exercises for our new expert in spiraling and replicating plotting units in the plain JavaScript:

• EX# 1. Modify original ExoticSpiral.html page adding 2 new plotting units (and deleting all old functions). Samples could be as the following:
  • "Smily" face (use arc() function and lines)
  • Your own polygon (use pStar() as a sample)
• EX# 2. Modify again myExoticSpiral.html page you've just created. This time, instead of using 1 spiral for plotting, generate 2 circles in the center of canvas (small and big). Put 8 "smilies" on the small circle and 8 your own polygons on the big circle.
• EX# 3. Modify again myExoticSpiral1.html page you've just created. This time, instead of using 2 circles, generate 3 lines and put different plotting units on each of them. In other words, make it similar looking to the picture in [10].

It should be stressed: always make a lot of archive copies, e.g., at least, for each new page version.

Oh, and spiraling is so simple! Isn't it?

References

1. Voevudko, A.E. (2017) Dancing with Spirals. Code Project, URL: https://www.codeproject.com/Articles/1213518/Dancing-with-Spirals.
2. Voevudko, A.E. (2017) The Vogel Spiral Phenomenon. Code Project, URL: https://www.codeproject.com/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://www.codeproject.com/Articles/85815/Using-lambdas-for-WPF-or-Silverlight-animation.
7. Voevudko, A.E. (2017) Generating Random Voronoi Diagrams. Code Project, URL: https://www.codeproject.com/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/.

History

1/16/2018 Fixing edited part. Adding "History".
1/12/2018 Initial posting.