Circles on circles: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(41 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> | ||
< | <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> | |||
</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]] | |||
===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=" | <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=" | <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=" | <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=" | <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> | </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 c1 = | var c2 = 0.0; | ||
var c2 = 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);}, | 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* | 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
- 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
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>