Circles on circles: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(38 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This is an example of a parametric curve plot. The curve is described by the function
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> [0,2\pi]\to{\matbf R}^2, \quad t\mapsto {\cos(t)\choose \sin(t)}</math>
:<math> [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.


<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<div style="margin:5px">
<link rel="Stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/css/ui-lightness/jquery-ui-1.7.2.custom.css"/>
  <p>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>
    <label for="c1">c1:</label>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery-ui.min.js"></script>
    <input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
        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>
</html>
<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.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});
</jsxgraph>
 
'''Variation:'''
* [[Circles on circles rotating in opposite directions]]


<style type="text/css">
===External references===
#slider-frame > div.sliders { padding: 10px !important; };
Epicycloidal curves have been used by the ancient greeks to describe the orbits of the planets, see
</style>
* [http://arxiv.org/abs/chao-dyn/9907004 Giovanni Gallavotti: Quasi periodic motions from Hipparchus to Kolmogorov]
<script type="text/javascript">
* [http://www.swisseduc.ch/mathematik/schwingungen/docs/kapitel3.pdf http://www.swisseduc.ch/mathematik/schwingungen/docs/kapitel3.pdf] for a detailed explanation in German (from [http://www.swisseduc.ch/mathematik/schwingungen/ http://www.swisseduc.ch/mathematik/schwingungen/]).
$(function() {
$("#sliderc1").slider({
orientation: "horizontal",range: "min",min: 0,max: 100,value: 60,
slide: function(event, ui) {
$("#c1").val(ui.value*0.01);
                                c1 = ui.value*0.01;
                                board.update();
}
});
$("#sliderf1").slider({
orientation: "horizontal",range: "min",min: 1,max: 100,value: 7,
slide: function(event, ui) {
$("#f1").val(ui.value);
                                f1 = ui.value;
                                board.update();
}
});
$("#c1").val($("#sliderc1").slider("value")*0.01);
$("#f1").val($("#sliderf1").slider("value"));


$("#sliderc2").slider({
More on epicycloidal curves:
orientation: "horizontal",range: "min",min: 0,max: 100,value: 0,
* [[Hypotrochoid]]
slide: function(event, ui) {
* [http://www.uni-graz.at/~fripert/kreise/index.html Experiments by Harald Fripertinger]
$("#c2").val(ui.value*0.01);
* [http://en.wikipedia.org/wiki/Epicycloid http://en.wikipedia.org/wiki/Epicycloid]
                                c2 = ui.value*0.01;
* [http://mathworld.wolfram.com/Epicycloid.html http://mathworld.wolfram.com/Epicycloid.html]
                                board.update();
}
});
$("#sliderf2").slider({
orientation: "horizontal",range: "min",min: 1,max: 100,value: 17,
slide: function(event, ui) {
$("#f2").val(ui.value);
                                f2 = ui.value;
                                board.update();
}
});
$("#c2").val($("#sliderc2").slider("value")*0.01);
$("#f2").val($("#sliderf2").slider("value"));
});
</script>


<div class="sliders" style="margin:5px">
===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>c1, c2, f1, f2</math>.
<source lang="html4strict">
<div style="margin:5px">
   <p>
   <p>
     <label for="c1">c1:</label>
     <label for="c1">c1:</label>
     <input type="text" 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"
        oninput="c1 = this.value*0.01; board.update();"
    />
     <label for="f1">f1:</label>
     <label for="f1">f1:</label>
     <input type="text" 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"
        oninput="f1 = this.value; board.update();"
    />
     <label for="c2">c2:</label>
     <label for="c2">c2:</label>
     <input type="text" id="c2" style="border:0; color:#f6931f; font-weight:bold;" />
     <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>
     <label for="f2">f2:</label>
     <input type="text" 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"
        oninput="f2 = this.value; board.update();"
    />
   </p>
   </p>
  <div id="sliderc1" style="width:300px;margin:10px;"></div>
  <div id="sliderf1" style="width:300px;margin:10px;"></div>
  <div id="sliderc2" style="width:300px;margin:10px;"></div>
  <div id="sliderf2" style="width:300px;margin:10px;"></div>
</div>
</div>
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
 
<script language="JavaScript">
<jsxgraph width="500" height="500" box="jxgbox">
board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 100, unitY: 100});
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2.5,2.5,2.5,-2.5], keepaspectratio:true});
var c1 = 0.6;
var c1 = 0.6;
var c2 = 0.0;  
var c2 = 0.0;  
var f1 = 7;  
var f1 = 7;  
var f2 = 17;
var f2 = 17;
var c = board.createElement('curve', [
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.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);},
               function(t) { return Math.sin(t)+ c1*Math.sin(f1*t)+ c2*Math.sin(f2*t);},
               0,2.2*Math.PI]);
               0,2.02*Math.PI], {strokeWidth:2});
</script>
</jsxgraph>
</html>
</source>
 
[[Category:Examples]]
[[Category:Examples]]
[[Category:Curves]]
[[Category:Curves]]

Latest revision as of 12:18, 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 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});
</jsxgraph>