Circles on circles: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(8 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 | 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> | ||
This example shows the seamless integration of JSXGraph into the web page. | |||
<html> | <html> | ||
< | <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> | ||
< | </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 104: | Line 59: | ||
===The source code of this construction=== | ===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"> | <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(' | 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]] |
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>