Share JSXGraph: example "Epicycloid: circles rotating on circles"

JSXGraph
Share JSXGraph: example "Epicycloid: circles rotating on circles"
This website is a beta version. The official release will be in **2023**.

Epicycloid: circles rotating on circles

This is an example of a _parametric curve plot_. It shows the orbit of a point on a circle rotating on a circle which again rotates on the unit circle. The resulting curve is described by the function $$ [0,2\pi]→{\mathbb R}^2, \quad t\mapsto \binom{\cos(t)}{\sin(t)}+c_1\binom{\cos(f_1t)}{\sin(f_1t)}+c_2\binom{\cos(f_2t)}{\sin(f_2t)} $$ This is an example of seamless JSXGraph embedding into the web page. The sliders are external HTML sliders. Epicycloidal curves have been used by the ancient greeks to describe the orbits of the planets, see - [Giovanni Gallavotti: Quasi periodic motions from Hipparchus to Kolmogorov](http://arxiv.org/abs/chao-dyn/9907004) - [Detailed explanation in German](https://www.swisseduc.ch/mathematik/schwingungen/docs/kapitel3.pdf) from [https://www.swisseduc.ch/mathematik/schwingungen/](https://www.swisseduc.ch/mathematik/schwingungen/).




  <p>
    <label for="c1">c1:</label>
    <input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;" 
        min="0" max="100" value="60" 
        oninput="c1 = this.value*0.01; board.update();" 
    /><br/>
    <label for="f1">f1:</label>
    <input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;" 
        min="1" max="100" value="7"
        oninput="f1 = this.value; board.update();" 
    /><br/>
    <label for="c2">c2:</label>
    <input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;" 
        min="0" max="100" value="0"
        oninput="c2 = this.value*0.01; 
                  board.updateQuality = board.BOARD_QUALITY_HIGH;
                  board.update();" 
    /><br/>
    <label for="f2">f2:</label>
    <input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;" 
        min="1" max="100" value="17"
        oninput="f2 = this.value; board.update();" 
    />
  </p>

// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-2.5, 2.5, 2.5, -2.5],
    keepaspectratio: true
});
var c1 = 0.6;
var c2 = 0.0;
var f1 = 7;
var f2 = 17;
var c = board.create('curve', [
    (t) => Math.cos(t) + c1 * Math.cos(f1 * t) + c2 * Math.cos(f2 * t),
    (t) => Math.sin(t) + c1 * Math.sin(f1 * t) + c2 * Math.sin(f2 * t),
    0, 2.02 * Math.PI
], {
    strokeWidth: 2
});