Knots from circle pathes: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
Line 9: Line 9:
     <input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"  
     <input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"  
         min="0" max="100" value="60"  
         min="0" max="100" value="60"  
         oninput="c1 = this.value*0.01;  
         oninput="c1 = this.value*0.01; board.update();"  
                  board.update();"  
     />
     />
     <label for="f1">f1:</label>
     <label for="f1">f1:</label>
     <input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"  
     <input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"  
         min="1" max="100" value="7"
         min="1" max="100" value="7"
         oninput="f1 = this.value;  
         oninput="f1 = this.value; board.update();"  
                  board.updateQuality = board.BOARD_QUALITY_HIGH;
                  board.update();"  
     />
     />
     <label for="c2">c2:</label>
     <label for="c2">c2:</label>
Line 29: Line 26:
     <input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"  
     <input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"  
         min="1" max="100" value="17"
         min="1" max="100" value="17"
         oninput="f2 = this.value;  
         oninput="f2 = this.value; board.update();"  
                  board.updateQuality = board.BOARD_QUALITY_HIGH;
                  board.update();"  
     />
     />
   </p>
   </p>
Line 88: Line 83:
The main difficulty is to read the values of the sliders.  
The main difficulty is to read the values of the sliders.  
This is done via four JavaScript variables <math>c1, c2, f1, f2</math>.
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">
Line 94: Line 90:
     <input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"  
     <input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"  
         min="0" max="100" value="60"  
         min="0" max="100" value="60"  
         oninput="c1 = this.value*0.01;  
         oninput="c1 = this.value*0.01; board.update();"  
                  board.updateQuality = board.BOARD_QUALITY_HIGH;
                  board.update();"  
     />
     />
     <label for="f1">f1:</label>
     <label for="f1">f1:</label>
     <input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"  
     <input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"  
         min="1" max="100" value="7"
         min="1" max="100" value="7"
         oninput="f1 = this.value;  
         oninput="f1 = this.value; board.update();"  
                  board.updateQuality = board.BOARD_QUALITY_HIGH;
                  board.update();"  
     />
     />
     <label for="c2">c2:</label>
     <label for="c2">c2:</label>
Line 115: Line 107:
     <input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"  
     <input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"  
         min="1" max="100" value="17"
         min="1" max="100" value="17"
         oninput="f2 = this.value;  
         oninput="f2 = this.value; board.update();"  
                  board.updateQuality = board.BOARD_QUALITY_HIGH;
                  board.update();"  
     />
     />
   </p>
   </p>

Latest revision as of 12:13, 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{\cos(f_2t)\choose \sin(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

More on epicycloidal curves:

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 cw = board.create('curve', [
              function(t) { return Math.cos(t)+ c1*Math.cos(f1*t)+ c2*Math.cos(f2*t);},
              function(t) { return Math.sin(t)+ c1*Math.sin(f1*t)+ c2*Math.sin(f2*t);},
              0,2.02*Math.PI], {strokeWidth:4, strokeColor: 'blue', shadow: true});

var c = board.create('curve', [
              function(t) { return Math.cos(t)+ c1*Math.cos(f1*t)+ c2*Math.cos(f2*t);},
              function(t) { return Math.sin(t)+ c1*Math.sin(f1*t)+ c2*Math.sin(f2*t);},
              0,2.02*Math.PI], {strokeWidth:2, strokeColor: 'white'});
</jsxgraph>