Circles on circles: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(54 intermediate revisions by 2 users not shown)
Line 1: Line 1:
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{\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>


<style type="text/css">
'''Variation:'''
#slider-frame > div.sliders { width:200px; padding: 10px !important; };
* [[Circles on circles rotating in opposite directions]]
</style>
<script type="text/javascript">
$(function() {
$("#slider1").slider({
orientation: "horizontal",range: "min",min: 0,max: 100,value: 60,
slide: function(event, ui) {
$("#c1").val(ui.value*0.01);
}
});
$("#slider2").slider({
orientation: "horizontal",range: "min",min: 0,max: 100,value: 60,
slide: function(event, ui) {
$("#c1").val(ui.value*0.01);
}
});
$("#c1").val($("#slider1").slider("value")*0.01);
});
</script>


<div class="sliders" style="margin:5px">
===External references===
Epicycloidal curves have been used by the ancient greeks to describe the orbits of the planets, see
* [http://arxiv.org/abs/chao-dyn/9907004 Giovanni Gallavotti: Quasi periodic motions from Hipparchus to Kolmogorov]
* [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/]).
 
More on epicycloidal curves:
* [[Hypotrochoid]]
* [http://www.uni-graz.at/~fripert/kreise/index.html Experiments by Harald Fripertinger]
* [http://en.wikipedia.org/wiki/Epicycloid http://en.wikipedia.org/wiki/Epicycloid]
* [http://mathworld.wolfram.com/Epicycloid.html http://mathworld.wolfram.com/Epicycloid.html]
 
===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>
    <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>
   </p>
  <div id="slider1"></div>
  <div id="slider2"></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: 50, unitY: 50});
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2.5,2.5,2.5,-2.5], keepaspectratio:true});
</script>
var c1 = 0.6;
</html>
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>
</source>
[[Category:Examples]]
[[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>