Difference between revisions of "Circles on circles"

From JSXGraph Wiki
Jump to navigationJump to search
 
(45 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>
 +
 
 +
'''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);
 
}
 
});
 
$("#sliderf1").slider({
 
orientation: "horizontal",range: "min",min: 1,max: 100,value: 7,
 
slide: function(event, ui) {
 
$("#f1").val(ui.value*0.01);
 
}
 
});
 
$("#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: 60,
+
* [[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]
}
+
* [http://mathworld.wolfram.com/Epicycloid.html http://mathworld.wolfram.com/Epicycloid.html]
});
 
$("#sliderf2").slider({
 
orientation: "horizontal",range: "min",min: 1,max: 100,value: 17,
 
slide: function(event, ui) {
 
$("#f2").val(ui.value);
 
}
 
});
 
$("#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">
 
board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 100, unitY: 100});
 
alert($("c1").value);
 
var c = board.createElement('curve', [
 
              function(t) { return Math.cos(t)+ 0.5*Math.cos(*t);},
 
              function(t) { return Math.sin(t)+ 0.5*Math.sin(3*t);},
 
              0,4*Math.PI]);
 
  
//              function(t) { return Math.cos(t)+ $("#sliderc1").value*Math.cos($("#sliderf1").value*t);},
+
<jsxgraph width="500" height="500" box="jxgbox">
//              function(t) { return Math.sin(t)+ $("#sliderc1").value*Math.sin($("#sliderf1").value*t);},
+
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2.5,2.5,2.5,-2.5], keepaspectratio:true});
 
+
var c1 = 0.6;
</script>
+
var c2 = 0.0;
</html>
+
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 14: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] [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]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>