Circles on circles: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 4: Line 4:


<html>
<html>
<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"/>
<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>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>


<style type="text/css">
<style type="text/css">
Line 75: Line 73:
   <div id="sliderf2" 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>
</html>
<script language="JavaScript">
<jsxgraph width="500" height="500" box="jxgbox">
board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox:[-2.5,2.5,2.5,-2.5], keepaspectratio:true});
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;
Line 86: Line 84:
               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});
</script>
</jsxgraph>
</html>


'''Variation:'''
'''Variation:'''
Line 106: 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">
<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"/>
<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>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>


<style type="text/css">
<style type="text/css">
Line 177: Line 172:
   <div id="sliderf2" 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>
</html>
<script language="JavaScript">
<jsxgraph width="500" height="500" box="jxgbox">
board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox:[-2.5,2.5,2.5,-2.5], keepaspectratio:true});
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;  
Line 188: Line 183:
               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});
</script>
</jsxgraph>
</source>
</source>
[[Category:Examples]]
[[Category:Examples]]
[[Category:Curves]]
[[Category:Curves]]

Revision as of 10:17, 25 March 2011

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

More on epicycloidal curves:

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].

<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.createElement('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>