Click here to Skip to main content
13,633,280 members
Click here to Skip to main content
Add your own
alternative version

Stats

7.3K views
147 downloads
4 bookmarked
Posted 12 Jan 2018
Licenced CPOL

Spiraling Twisting Polygons and Roses

, 30 Jan 2018
Rate this:
Please Sign up or sign in to vote.
Presenting one kind of the exotic spiral, i.e., using big round dots, twisting polygons and, possibly, your own photo. Offering web-page used to illustrate different aspects of it.

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.

// 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] --

"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

1224773/ESd1.png 1224773/ESd2.png 1224773/ESd3.png

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

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

1224773/ESp1.png 1224773/ESp2.png ESp3.png and no filling 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

1224773/ESi1.png 1224773/ESr7.png 1224773/ESs1.png

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

  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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Voevudko A. E., Ph.D.
Architect
United States United States
I've started programming in a machine code and an assembly language for IBM 370 mainframe, and later programmed in many other languages, including, of course, C/C++/C# and ASP/ASP.net/VB.net.

I've created many system automation tools and websites for companies and universities.
In addition, I've always been a scientist interested in Computer Science, NT, AI, etc.

Now I'm using mainly scripting languages for NT small problems and computer graphics.

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 4 Pin
raddevus31-Jan-18 11:12
mvpraddevus31-Jan-18 11:12 
GeneralRe: My vote of 4 Pin
Voevudko A. E., Ph.D.2-Feb-18 9:31
professionalVoevudko A. E., Ph.D.2-Feb-18 9:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.180712.1 | Last Updated 30 Jan 2018
Article Copyright 2018 by Voevudko A. E., Ph.D.
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid