## 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]:

In elementary geometry, a **polygon** is a plane figure that is bounded by a finite chain of straight line segments closing in a loop to form a closed polygonal *chain* or *circuit*. These segments are called its *edges* or *sides*, and the points where two edges meet are the polygon's vertices (singular: vertex) or corners. The interior of the polygon is sometimes called its body. An *n-gon* is a polygon with n sides; for example, a triangle is a 3-gon. A polygon is a 2-dimensional example of the more general polytope in any number of dimensions. The basic geometrical notion of a polygon has been adapted in various ways to suit particular purposes. Mathematicians are often concerned only with the bounding closed polygonal chain and with simple polygons which do not self-intersect, and they often define a polygon accordingly. A polygonal boundary may be allowed to intersect itself, creating star polygons and other self-intersecting polygons.

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.

var cvs, ctx, cw, cc, cimg, cf=0;
var clr, it, n, k, pu, ng;
var pi=Math.PI, pi2=2*pi, p, ar=0;
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()}
}
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()}
}
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);
}
ctx.stroke();
ctx.closePath(); if(cf) {ctx.fill()};
}
function pImg(x, y) {
ctx.drawImage(cimg,x,y);
}
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] --

"If k is an integer, the curve will be rose-shaped with 2k petals if k is even,

and k petals if k is odd."

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

Figure 1: 3 Spirals plotted using big round dots

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

Figure 2: 3 Spirals plotted using polygons (3-, 4-, 5-gones)

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.

Figure 3: 3 Spirals plotted using images, Polar roses (7-petals) and stars

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

**TIP**: Selecting arbitrary big number of petals, e.g., 20, and clicking many times "Plot" button (to fill whole canvas), - you can become a famous artist designing abstract art!

## 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

- Voevudko, A.E. (2017)
*Dancing with Spirals*. Code Project, URL: https://www.codeproject.com/Articles/1213518/Dancing-with-Spirals. - Voevudko, A.E. (2017)
*The Vogel Spiral Phenomenon*. Code Project, URL: https://www.codeproject.com/Articles/1221341/The-Vogel-Spiral-Phenomenon. - Spiral, ShutterStock (Stock Photos, Illustrations, and Vector Art), URL: https://www.shutterstock.com/search/spiral.
- Rose (mathematics), Wikipedia, the free encyclopedia, URL: https://en.wikipedia.org/wiki/Rose_(mathematics).
- Polygon, Wikipedia, the free encyclopedia, URL: https://en.wikipedia.org/wiki/Polygon.
- 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. - Voevudko, A.E. (2017)
*Generating Random Voronoi Diagrams*. Code Project, URL: https://www.codeproject.com/Articles/1189287/Generating-Random-Voronoi-Diagrams. - Daisy, Pixabay (Free Images - Photos, Illustrations, Vector graphics), https://pixabay.com/en/photos/daisy/.
- 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
- 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.