Difference between revisions of "Circles on circles"

From JSXGraph Wiki
Jump to navigationJump to search
 
(31 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{\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>
 
:<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>
The sliders to adjust the parameters of this curve are from the jQuery UI package, see [http://jqueryui.com http://jqueryui.com]. This example shows the seamless integration of JSXGraph into the web page.
+
 
 +
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"/>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery-ui.min.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
 
 
<style type="text/css">
 
#slider-frame > div.sliders { padding: 10px !important; };
 
</style>
 
<script type="text/javascript">
 
$(function() {
 
$("#sliderc1").slider({
 
orientation: "horizontal",range: "min",min: 0,max: 100,value: 60,
 
slide: function(event, ui) {
 
$("#c1").val(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);
 
                                board.update();
 
}
 
});
 
$("#c1").val($("#sliderc1").slider("value")*0.01);
 
$("#f1").val($("#sliderf1").slider("value"));
 
 
 
$("#sliderc2").slider({
 
orientation: "horizontal",range: "min",min: 0,max: 100,value: 0,
 
slide: function(event, ui) {
 
$("#c2").val(ui.value*0.01);
 
                                board.update();
 
}
 
});
 
$("#sliderf2").slider({
 
orientation: "horizontal",range: "min",min: 1,max: 100,value: 17,
 
slide: function(event, ui) {
 
$("#f2").val(ui.value);
 
                                board.update();
 
}
 
});
 
$("#c2").val($("#sliderc2").slider("value")*0.01);
 
$("#f2").val($("#sliderf2").slider("value"));
 
});
 
</script>
 
 
 
<div class="sliders" 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});
 
var c = board.createElement('curve', [
 
              function(t) { return Math.cos(t)+ $("#c1").val()*Math.cos($("#f1").val()*t)+ $("#c2").val()*Math.cos($("#f2").val()*t);},
 
              function(t) { return Math.sin(t)+ $("#c1").val()*Math.sin($("#f1").val()*t)+ $("#c2").val()*Math.sin($("#f2").val()*t);},
 
              0,2.2*Math.PI]);
 
</script>
 
 
</html>
 
</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>
  
===The source code of this construction===
+
'''Variation:'''
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>.
+
* [[Circles on circles rotating in opposite directions]]
<source lang="html4strict">
 
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<link rel="Stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/css/ui-lightness/jquery-ui-1.7.2.custom.css"/>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery-ui.min.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
  
<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>
 
</source>
 
</source>
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Curves]]
 
[[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>