Gearographic Curves - Part 2

• Download full project source - 5.4 KB

Introduction

The goal of this article is to continue definition and presentation of the Gearographic curves started in "Part 1" [1].

In this part, some interesting R script findings will be discussed, also the JavaScript-based solution for multi-gear curves will be presented.

The basic version of equations for Gearographic curves is still the following:

where:

• R0,T0 - simply coefficients related to the first gear radius and angle t (theta)
• R1,T1 - coefficients related to the second gear radius and angle t (theta)

Note: We allow all coefficients to be negative.

These equations are used both in the R language (for 2 gears) and in the JavaScript (for many gears).

In the attached GGCArtp2.zip file, find all R scripts and webpage related to this article.

Last Minute Remarks

I want to assure readers that I'm aware of all related articles, at least, those from reliable online sources.

Many sources are using similar, but actually, different formulas, also using different plotting techniques, including different languages and tools, e.g., [3].

Others are very well done, professional implementation (e.g., [4,5]), but they are, definitely, not for beginners. Just take a look at the offered source code [4] and compare JavaScript sizes here and in [4].

Gearographic Curves in R

Nothing different needs to be done in R to generate and plot Gearographic curves. Really, it's just "translating" JavaScript to R.

In the R code below, find a complete version of function generating and plotting Gearographic curves (2 gears). Also, there are a few samples using this function.

## GG2g(): GearoGraph - 2 gears. Curves are plotted with lines (line segments)
#  Where: n - lines, r0,r1 - 1st and 2nd gear radius scales; t0,t1 - theta
#         scales; fn - file name (no extension); cfg - color FG;
#         ttl - plot title; psz - max square picture size; cbg - color BG.
#
GG2g <- function(n,r0,t0,r1,t1,fn, cfg="maroon", ttl="", psz=640, cbg="white"){
  pf = paste0(fn, ".png");
  # Plotting
  par(bg=cbg); it=pi*2/n; t=seq(0,n,it);
  x=(r0*cos(t0*t)+r1*cos(t1*t));
  y=(r0*sin(t0*t)-r1*sin(t1*t));
  if (ttl!="") {
    plot(x,y, type="l", main=ttl, axes=FALSE, xlab="", ylab="", col=cfg)}
  else {par(mar=rep(2,4)); par(plt=c(0,1,0,1));
    par(xpd = NA); par(oma=rep(2,4), xaxs='i', yaxs='i');
    plot(x,y, type="l", axes=FALSE, col=cfg)};
  # Writing png-file
  dev.copy(png, filename=pf, width=psz, height=psz);
  # Cleaning
  dev.off(); graphics.off();
}
# GG2g(4000,240,1,235,400,"GG2gR01","navy","", 1280); ##  Flower head
# GG2g(2000,200,1,150,330,"GG2gR02","darkgreen","", 1280); ## Many trees (from center)
# GG2g(3013,243,1,53,610,"GG2gR03c","maroon","", 1280); ## Engraved ring

The resultant 3 Gearographic curves ("Flower head", "Trees" and "Engraved ring") are presented in the figure below.

Here is an interesting question: "What if we want to plot Gearographic curves using dots instead of line segments?" The new function is almost a twin (not identical) of the GG2g() function. Only 3 lines of R code are different. See them in the code fragment below:

## 1st line - different name of function
## GG2gd <- function(n,r0,t0,r1,t1,fn, cfg="maroon", ttl="", psz=640, cbg="white"){

## 2nd line - different 1st plot statement
    plot(x,y, main=ttl, axes=FALSE, xlab="", ylab="", col=cfg, pch=20)}

## 3rd line - different 2nd plot statement
    plot(x,y, axes=FALSE, col=cfg, pch=20)};

Let's generate and plot nice ring (looking like 3D carved ring) using both functions, plus additional curve "Trees" using dots (in Fig.1, we have it in lines):

GG2g(2000,250,1,50,500,"GG2gRcr","darkred","Carved ring (in lines)", 1280);
GG2gd(2000,250,1,50,500,"GG2gRdcr","darkred","Carved ring (in dots)", 1280);
## additional curve "Trees" using dots
GG2gd(2000,200,1,150,330,"GG2gdmt","darkgreen","", 1280);  # Trees (in dots)

All 3 resultant curves are presented below:

Now, both curves in dots are not only unattractive, but they are confusing and misleading. Although, in fact, the plotting is correct!

Here, we re-discovered an interesting effect that plotting continuous curve using line segments or dots is different.
For example:

• In [2], it was emphasized that H. Vogel discovered "sunflower seed pattern", only because he was plotting his spiral using big dots.
• Here, we have the reversed effect: the "real" Gearographic curve should be plotted using line segments. Plotting it using dots is incorrect, but, at least, can help to understand plotting "points" and other details, i.e., like shades, "carvings", etc.

Concluding Remarks about Plotting in R

Please be advised that plotting Gearographic curves in R:

• Takes more time than using "Generator" page from [1].
• To test many curves require to prepare function calls with different arguments, but in "Generator" page, it could be faster, just a few clicks for the next curve.
• It is recommended to set at least double size of canvas (i.e., 1280), because scaling in R works differently. E.g., to find "trees" in the "forest", - a user should look at the full size of the "Trees" sub-figure shown in Fig. 1.

Gearographic Curves Plotted using Many Gears

The idea to use many gears was presented in many online resources (e.g., [3-5] and many others).

In [3], it was posted C# code that is good and easy to "translate" to JavaScript and convert to our equations. See this C# code fragment below "as is":

// each line in the grid is like adding a wheel to a spirograph toy,
// we just add up where each "wheel" move the point
for (i = 0; i < max; i++)
{
  rx += radius[i] * Math.Cos(speed[i] * (angle + phase[i]));
  ry += radius[i] * Math.Sin(speed[i] * (angle + phase[i]));
}

The "translated" to JavaScript and converted to our equations code fragment has been presented below:

// global vars
  var cvs, ctx, cw, cc; // canvas: context, width, center
  var cfg, cbg;         // colors: FG & BG
  var pi2=Math.PI*2, gn, msro;
//*****
  // Plot loop
  for (var i=0; i<=n; i++) {
    t=i*it;
 	x = R[0] * Math.cos(T[0]*t);
	y = R[0] * Math.sin(T[0]*t);

	for (var g=1; g<gn; g++) {
	  x += R[g] * Math.cos(T[g]*t);
	  y -= R[g] * Math.sin(T[g]*t); }
    x=x*sc+cc+sx; y=y*sc+cc+sy;
    ctx.lineTo(x, y);
  }

Note: Theoretically, unlimited number of gears could be used, but practically, it would be very difficult to test it.

Using the Gearographic Curve Generator Webpage

The "Gearographic Curve Generator (many gears)" webpage (GGmgGenerator.html) is attached in the zip-file and is shown (partially) in Fig.3 below.

As you can see above, this page allows to enter almost all parameters controlling Gearographic curve plotting and can generate and show all possible Gearographic curves (many gears).

It should be mentioned that size and syntax of both input vectors - R, T - are checked. In case of an error, an appropriate error message (sometimes confusing) is shown in red above a canvas area. See sample message in Fig. 3 above.

First of all, look at Fig. 4 below with 6 selected curves. Note: Input parameters used to plot sub-figures can be found in GGCmgTestSamples.txt file.

Fig. 4 sub-figures are as follows:

• Sub-figures 1-3 (2, 3 and 4 gears)
• Sub-figures 4-6 (5, 6 and 9 gears)

And now, load the page and proceed with testing as it was recommended in "Part 1" [1].

The pretty big GGCmgTestSamples.txt file is attached in the zip-file. It will definitely help you with testing.

Conclusion

During testing "Generator (multi-gear)" page users, definitely, will discover the following peculiarities/properties:

• It became difficult to predict curve if the number of gears is more than 3.
• Meanwhile, eventually, many new interesting patterns were found.
• If all values of the vector T are big (e.g., all T[i]>200) then a curve becomes too messy. In rare cases, increasing the size of canvas can help to see a pattern if any.

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

• How to check the size and the syntax of the input vectors
• How to fit a curve in the canvas and put it in the center of the canvas
• A test tactic for the "Generator" page. See samples in the GGCmgTestSamples.txt file

Here are a few traditional exercises that can be very-very-very easily implemented even by a beginner!

Enjoy gerographic curves!

References

1. Voevudko, A.E. (2018) Gearographic Curves - Part 1. Code Project, URL: https://www.codeproject.com/Articles/1233760/Gearographic-Curves-Part
2. Voevudko, A.E. (2017) The Vogel Spiral Phenomenon. Code Project, URL: https://www.codeproject.com/Articles/1221341/The-Vogel-Spiral-Phenomenon.
3. arussell, J. (2013) Hypotrochoid / Spirograph. Code Project, URL: https://www.codeproject.com/Tips/656968/Hypotrochoid-Spirograph.
4. SEEDcode. (2016) SpirographN: Online generator (many gears). URL: http://seedcode.com/SpirographN/sgn.html.
5. Whitehouse, J. (2012) Spirograph Patterns. Online generator (many gears). URL: http://www.eddaardvark.co.uk/python_patterns/spirograph.html.