JSXGraph
JSXGraph share

Share

Epicycloid: circles rotating on circles in opposite direction
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/epicycloid-circles-rotating-on-circles-in-opposite-direction" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Epicycloid: circles rotating on circles in opposite direction" 
    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.sin(f2 * t),
        (t) => Math.sin(t) + c1 * Math.sin(f1 * t) + c2 * Math.cos(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.sin(f2 * t),
    (t) => Math.sin(t) + c1 * Math.sin(f1 * t) + c2 * Math.cos(f2 * t),
    0, 2.02 * Math.PI
], {
    strokeWidth: 2
});

Epicycloid: circles rotating on circles in opposite direction

Applications
Curves
Geometry
Physics

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π]→R2,t↦(cos(t)sin(t))+c1(cos(f1t)sin(f1t))+c2(sin(f2t)cos(f2t)) 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




  <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.sin(f2 * t),
    (t) => Math.sin(t) + c1 * Math.sin(f1 * t) + c2 * Math.cos(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.