JSXGraph
JSXGraph share

Share

Epicycloid: circles rotating on circles
QR code 
<iframe 
    src="http://jsxgraph.org/share/iframe/epicycloid-circles-rotating-on-circles" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Epicycloid: circles rotating on circles" 
    allowfullscreen
></iframe>
This code has to 
  <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>



<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    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
    });
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

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

license

This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.