Circles on circles rotating in opposite directions: Difference between revisions

From JSXGraph Wiki
No edit summary
 
Line 57: Line 57:


===The source code of this construction===
===The source code of this construction===
This is the first experiment with the jQuery UI package. So, the code may not be optimized, yet. The main difficulty is to read the values of the sliders. This is done via four JavaScript variables <math>c1, c2, f1, f2</math>.
The main difficulty is to read the values of the sliders.  
This is done via four JavaScript variables <math>c1, c2, f1, f2</math>.
<source lang="html4strict">
<source lang="html4strict">
<div style="margin:5px">
<div style="margin:5px">

Latest revision as of 12:16, 23 June 2020

This is an example of a parametric curve plot. It shows the orbit of a point on a circle. The circle rotates on a circle which again rotates on the unit circle. The resulting curve is described by the function

[math]\displaystyle{ [0,2\pi]\to{\mathbf R}^2, \quad t\mapsto {\cos(t)\choose \sin(t)}+c_1{\cos(f_1t)\choose \sin(f_1t)}+c_2{\sin(f_2t)\choose \cos(f_2t)} }[/math]

This example shows the seamless integration of JSXGraph into the web page.

Variation:

External references

Epicycloidal curves have been used by the ancient greeks to describe the orbits of the planets, see

The source code of this construction

The main difficulty is to read the values of the sliders. This is done via four JavaScript variables [math]\displaystyle{ c1, c2, f1, f2 }[/math].

<div style="margin:5px">
  <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();" 
    />
    <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();" 
    />
    <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();" 
    />
    <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>

<jsxgraph width="500" height="500" box="jxgbox">
board = JXG.JSXGraph.initBoard('jxgbox', {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', [
              function(t) { return Math.cos(t)+ c1*Math.cos(f1*t)+ c2*Math.sin(f2*t);},
              function(t) { return Math.sin(t)+ c1*Math.sin(f1*t)+ c2*Math.cos(f2*t);},
              0,2.02*Math.PI], {strokeWidth:2});
</script>