Circles on circles: Difference between revisions
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(11 intermediate revisions by 2 users not shown) | |||
Line 4: | Line 4: | ||
<html> | <html> | ||
<link rel="Stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/css/ui-lightness/jquery-ui-1.7.2.custom.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.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/jquery-ui.min.js"></script> | ||
<style type="text/css"> | <style type="text/css"> | ||
Line 20: | Line 18: | ||
$("#c1").val(ui.value*0.01); | $("#c1").val(ui.value*0.01); | ||
c1 = ui.value*0.01; | c1 = ui.value*0.01; | ||
board.updateQuality = board.BOARD_QUALITY_HIGH; | |||
board.update(); | board.update(); | ||
} | } | ||
Line 28: | Line 27: | ||
$("#f1").val(ui.value); | $("#f1").val(ui.value); | ||
f1 = ui.value; | f1 = ui.value; | ||
board.updateQuality = board.BOARD_QUALITY_HIGH; | |||
board.update(); | board.update(); | ||
} | } | ||
Line 39: | Line 39: | ||
$("#c2").val(ui.value*0.01); | $("#c2").val(ui.value*0.01); | ||
c2 = ui.value*0.01; | c2 = ui.value*0.01; | ||
board.updateQuality = board.BOARD_QUALITY_HIGH; | |||
board.update(); | board.update(); | ||
} | } | ||
Line 47: | Line 48: | ||
$("#f2").val(ui.value); | $("#f2").val(ui.value); | ||
f2 = ui.value; | f2 = ui.value; | ||
board.updateQuality = board.BOARD_QUALITY_HIGH; | |||
board.update(); | board.update(); | ||
} | } | ||
Line 71: | Line 73: | ||
<div id="sliderf2" style="width:300px;margin:10px;"></div> | <div id="sliderf2" style="width:300px;margin:10px;"></div> | ||
</div> | </div> | ||
< | </html> | ||
<jsxgraph width="500" height="500" box="jxgbox"> | |||
board = JXG.JSXGraph.initBoard(' | 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. | 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.02*Math.PI],{strokeWidth:2}); | 0,2.02*Math.PI],{strokeWidth:2}); | ||
</ | </jsxgraph> | ||
'''Variation:''' | '''Variation:''' | ||
Line 91: | Line 92: | ||
Epicycloidal curves have been used by the ancient greeks to describe the orbits of the planets, see | 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://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 | * [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]] | * [[Hypotrochoid]] | ||
* [http://www.uni-graz.at/~fripert/kreise/index.html Experiments by Harald Fripertinger] | * [http://www.uni-graz.at/~fripert/kreise/index.html Experiments by Harald Fripertinger] | ||
Line 102: | Line 103: | ||
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>. | 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>. | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
< | <html> | ||
<link rel="Stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/css/ui-lightness/jquery-ui-1.7.2.custom.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.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/jquery-ui.min.js"></script> | ||
<style type="text/css"> | <style type="text/css"> | ||
Line 118: | Line 118: | ||
$("#c1").val(ui.value*0.01); | $("#c1").val(ui.value*0.01); | ||
c1 = ui.value*0.01; | c1 = ui.value*0.01; | ||
board.updateQuality = board.BOARD_QUALITY_HIGH; | |||
board.update(); | board.update(); | ||
} | } | ||
Line 126: | Line 127: | ||
$("#f1").val(ui.value); | $("#f1").val(ui.value); | ||
f1 = ui.value; | f1 = ui.value; | ||
board.updateQuality = board.BOARD_QUALITY_HIGH; | |||
board.update(); | board.update(); | ||
} | } | ||
Line 137: | Line 139: | ||
$("#c2").val(ui.value*0.01); | $("#c2").val(ui.value*0.01); | ||
c2 = ui.value*0.01; | c2 = ui.value*0.01; | ||
board.updateQuality = board.BOARD_QUALITY_HIGH; | |||
board.update(); | board.update(); | ||
} | } | ||
Line 145: | Line 148: | ||
$("#f2").val(ui.value); | $("#f2").val(ui.value); | ||
f2 = ui.value; | f2 = ui.value; | ||
board.updateQuality = board.BOARD_QUALITY_HIGH; | |||
board.update(); | board.update(); | ||
} | } | ||
Line 169: | Line 173: | ||
<div id="sliderf2" style="width:300px;margin:10px;"></div> | <div id="sliderf2" style="width:300px;margin:10px;"></div> | ||
</div> | </div> | ||
< | </html> | ||
<jsxgraph width="500" height="500" box="jxgbox"> | |||
board = JXG.JSXGraph.initBoard(' | 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. | 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.02*Math.PI],{strokeWidth:2}); | 0,2.02*Math.PI],{strokeWidth:2}); | ||
</ | </jsxgraph> | ||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Curves]] | [[Category:Curves]] |
Revision as of 11:40, 14 September 2015
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]
The sliders to adjust the parameters of this curve are from the jQuery UI package, see http://jqueryui.com. 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
- Giovanni Gallavotti: Quasi periodic motions from Hipparchus to Kolmogorov
- http://www.swisseduc.ch/mathematik/schwingungen/docs/kapitel3.pdf for a detailed explanation in German (from http://www.swisseduc.ch/mathematik/schwingungen/).
More on epicycloidal curves:
- Hypotrochoid
- Experiments by Harald Fripertinger
- http://en.wikipedia.org/wiki/Epicycloid
- http://mathworld.wolfram.com/Epicycloid.html
The source code of this construction
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]\displaystyle{ c1, c2, f1, f2 }[/math].
<html>
<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>
<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);
c1 = ui.value*0.01;
board.updateQuality = board.BOARD_QUALITY_HIGH;
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.updateQuality = board.BOARD_QUALITY_HIGH;
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);
c2 = ui.value*0.01;
board.updateQuality = board.BOARD_QUALITY_HIGH;
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.updateQuality = board.BOARD_QUALITY_HIGH;
board.update();
}
});
$("#c2").val($("#sliderc2").slider("value")*0.01);
$("#f2").val($("#sliderf2").slider("value"));
});
</script>
<div class="sliders" style="margin:5px">
<p>
<label for="c1">c1:</label>
<input type="text" id="c1" style="border:0; color:#f6931f; font-weight:bold;" />
<label for="f1">f1:</label>
<input type="text" id="f1" style="border:0; color:#f6931f; font-weight:bold;" />
<label for="c2">c2:</label>
<input type="text" id="c2" style="border:0; color:#f6931f; font-weight:bold;" />
<label for="f2">f2:</label>
<input type="text" id="f2" style="border:0; color:#f6931f; font-weight:bold;" />
</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>
</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>