Difference between revisions of "Circles on circles"

From JSXGraph Wiki
Jump to navigationJump to search
 
(65 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>
  
<style type="text/css">
+
'''Variation:'''
#slider-frame > div.sliders { padding: 10px !important; };
+
* [[Circles on circles rotating in opposite directions]]
</style>
 
<script type="text/javascript">
 
$(function() {
 
$("#slider1").slider({
 
orientation: "vertical",range: "min",min: 0,max: 100,value: 60,
 
slide: function(event, ui) {
 
$("#c1").val(ui.value*0.01);
 
}
 
});
 
$("#c1").val($("#slider1").slider("value")*0.01);
 
});
 
</script>
 
  
<div class="sliders" style="margin:5px">
+
===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">c<sub>1</sub>:</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>
 +
    <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>
 
   </p>
  <span id="slider1" style="height:200px;"></span>
 
  <span id="slider2" style="height:200px;"></span>
 
 
</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: 50, unitY: 50});
+
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2.5,2.5,2.5,-2.5], keepaspectratio:true});
</script>
+
var c1 = 0.6;
</html>
+
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>
 +
</source>
 +
[[Category:Examples]]
 +
[[Category:Curves]]

Latest revision as of 13: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>