Download GGCArtp1.zip - 4.2 KB

Introduction

The goal of this article is to define and present Gearographic curves. This type of curves was inspired by Spirograph curves, but the desire was to simplify and unify them, plus overcome many limitations and restrictions. The hope was to generate and plot more sophisticated and intriguing curves.

This article is targetting beginner and intermediate coders, and offering web-pages and R scripts used to illustrate different aspects of Gearographic curves.

Let us start with a very brief comparison of these two types of curves.

According to Wikipedia [1]:

"Spirograph is a geometric drawing toy that produces mathematical roulette curves of the variety technically known as hypotrochoids and epitrochoids."

There is a vast number of articles out there about the Spirograph and curves related to it. In addition to [1], there are many online animators and generators, also many apps realized virtually in any language supporting graphics.

According to [1], the mathematical equations describing the trajectory of the pen (attached to a gear) in terms of a single parameter t are the following:

x = (R-r)*cos(t) + rho*cos(((R-r)/r)*t),
y = (R-r)*sin(t) - rho*sin(((R-r)/r)*t),

where:
  R - a radius of a fixed outer circle/gear (aka stator);
  r - a radius of a rolling smaller inner circle/gear (aka rotor), r<R;
  rho - a radius to the pen-hole in the inner circle/gear, rho<r.

It should be stressed, that these are not polar equations because angle t (theta) is not the polar angle [1]. Although, they are looking similar to the polar equations in [2,3].

Also, it should be mentioned, that there are many slightly different formulas used by some authors, for example:

calculating and using gears' teeth ratio;
adding starting angle phi (aka phase);
calculating number of loops per full circle;
adding some other coefficients.

All these versions are perfectly correct, because they all are trying to plot curves precisely similar to produced by "a geometric drawing toy".

The Gearographic curves are using equations very similar to shown above, but these equations are modified and unified to overcome some limitations that now are more flexible:

R and r sizes can be any reasonable (or not), i.e., r>R is OK;
new 4 coefficients (see below) can have any values, including negatives;
scaling allows to fill up whole canvas;
both foreground and background colors are supported.

So, our version of equations for Gearographic curves is the following:

x = R0*cos(T0*t) + R1*cos(T1*t),
y = R0*sin(T0*t) - R1*sin(T1*t),

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);

The JavaScript fragment employing these equations (almost the same as shown below) is included in each page used in this project.

// global vars
  var cvs, ctx, cw;  // canvas, context, width
  var n=2000, psc=1; // dots/segments, plot scale
  var pi=Math.PI, pi2=pi*2;
//
// Plotting Gearographic curves (using 2 gears)
// Coefficients related to:
// R0,T0 - prime radius and theta scale; R1,T1 - 2nd radius and theta scale.
function pGG2g(R0, T0, R1, T1){
  var it=pi2/n, t;   // it - initial theta, t - theta
  // Plot loop
  ctx.beginPath();
  for (var i=0; i<=n; i++) {
    t=i*it;
    x = (R0*Math.cos(T0*t) + R1*Math.cos(T1*t))*psc;
    y = (R0*Math.sin(T0*t) - R1*Math.sin(T1*t))*psc;
    ctx.lineTo(x, y);
    //if(i<5) {console.log("t,x,y:", t, "/",x, "/", y)}
  }
  ctx.stroke();
}

As you can see above, - the function plotting Gearographic curves is pretty simple and similar to the one used in [2].

Using the Demo 1 webpage

The "Demo 1: 9 Gearographic Curves (2 gears)" webpage (GG2gDemo1.html) is attached in the zip-file.

It generates and shows 9 simply looping Gearographic curves (2 gears) plotted within one picture. See Fig.1 below.
Note: coefficients (R0 / R1 / T1) are used and shown here:

Sub-figures 1-6: the most simple typical (for "Spirograph" too) curves:
- (30 / 10 / 10); (30 / 10 / -10); (30 / 29 / 8).
- (30 / 15 / 20); (30 / 7 / 30); (30 / 27 / 20).
Sub-figures 7-9: a little bit more complicated curves (just having more loops).
- (30 / 15 / 57); (10 / 31 / 30); (30 / 27 / 40).

Figure 1: Simply looping Gearographic curves (2 gears)

9 Gearographic curves

Using the Demo 2 webpage

The "Demo 2: Gearographic Curves (2 gears)" webpage (GG2gDemo2.html) is attached in the zip-file.

It generates and shows almost 3 dozens of Gearographic curves (2 gears). All you need to do is just to click the "Plot next" button.
Note - used input parameters are shown in the message above canvas in the form like following:
f(2000,200,1,40,20,1,'red').

See Fig.2 below for 6 selected curves:

Sub-figures 1-3: nice donut, 2 figures with 5-gon and 4-gone in the middle;
Sub-figures 4-6: umbrella, 3D like ring with "carvings" and not symmetrical figure.

Figure 2: Selected Gearographic curves (2 gears)

Demo 2: Donut Demo 2: Central 5-gon Demo 2: Central 4-gon

Demo 2: Umbrella Demo 2: 3D ring with carvings Demo 2: Not symmetrical figure

Using the Gearographic curve generator webpage

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

Figure 3: GG2gGenerator.html page.

GG2gGenerator.html page.

It allows to enter almost all parameters controlling Gearographic curve plotting and can generate and show all possible Gearographic curves (2 gears).

First of all, see Fig.4 below with selected curves. Note - input parameters used to plot sub-figures are following:
n / R0 / T0 / R1 / T1 / scale.

Sub-figures 1-3 (the 1st one is asymmetric):
- 3047/300/1/299/434/0.5;
- 3047/300/1/299/435/0.5;
- 4000/240/1/235/400/1.
Sub-figures 4-6 (all 3 are asymmetric):
- 3119/300/1/299/311/0.5;
- 1031/240/1/235/411/0.6;
- 4003/240/1/235/400.023/1.

Figure 4: Selected Gearographic curves (2 gears)

1233760/GGF_01.png 1233760/GGF_02.png 1233760/GGF_03.png

GGF_04.png: GGF_05.png: GGF_06.png:

And now, reload the page and proceed with testing as follows:

Change a number of lines to 200 and leave all other input fields as is, i.e., default. Click "Plot it!" button. In result, the so-called a "Penta-donut" will be plotted.
Now try: 201-203, then 300-303, 800, 1000, 2000, 3000. It would be clear that 2000 is enough to make loops looking smooth, i.e., not having visible line segments.
Continue using the same testing tactic with other input parameters. Also, try negative values. Eventually, you will need to use "plot scale" parameter, which will help to fit an image nicely inside the canvas, or purposely fill the whole canvas.
Swap R0 and R1, so parameters are 2000/100/1/200/40. Result - a different donut.
Enjoy discovered new images! I bet, many of them were never seen before.

Concluding remarks

During testing "Generator" page users, definitely, discover the following useful hints about input parameters:

The number of lines (actually, line segments) is making a curve looking smooth, and 2000 is enough for most curves.
R0 and R1 are acting as outer and inner circles of the plotted figure. But a figure looks differently if values of R0 and R1 are swapped.
T1 is controlling a number of loops or n-gons (usually, this number n=T1+1).

Conclusion

First of all, let's emphasized: all our goals are achieved! I.e., we have defined the new set of Gearographic curves, which is very similar to the well-known set of Spirograph curves, but, at the same time, it produces new curves that were not possible to plot using a plastic toy.

It should be mentioned that some Spirograph curves cannot be reproduced by Gearographic curves, and this is an understandable result of modifications applied to equations and to the plotting in general.

What was learned (I hope) from these not so complicated pages is following:

How to fit 9 plotted pictures into 1 canvas figure (see the code of the "Demo 1" page).
How to generate and show many selected figures using just one "lazy" click per figure (see the code of the "Demo 2" page and GGD2.js).
How to handle foreground and background colors for canvas figures (see the code of the "Demo 2" and "Generator" pages).
How to test page having many input parameters, e.g., similar to the "Generator" page.

In the next "Gearographic Curves - Part 2" article some interesting R script findings will be discussed, also the JavaScript-based solution for multi-gear curves will be presented.

References

Spirograph, Wikipedia, the free encyclopedia, URL: https://en.wikipedia.org/wiki/Spirograph.
Voevudko, A.E. (2017) Dancing with Spirals. Code Project, URL: https://www.codeproject.com/Articles/1213518/Dancing-with-Spirals.
Voevudko, A.E. (2018) Spiraling Twisting Polygons and Roses. Code Project, URL: https://www.codeproject.com/Articles/1224773/Spiraling-Twisting-Polygons-and-Roses.

Gearographic Curves - Part 1