Circles on circles: Difference between revisions

From JSXGraph Wiki
(Undo revision 2471 by A WASSERMANN (Talk))
No edit summary
Line 19: Line 19:
slide: function(event, ui) {
slide: function(event, ui) {
$("#c1").val(ui.value*0.01);
$("#c1").val(ui.value*0.01);
                                c1 = ui.value*0.01;
                                 board.update();
                                 board.update();
}
}
Line 26: Line 27:
slide: function(event, ui) {
slide: function(event, ui) {
$("#f1").val(ui.value);
$("#f1").val(ui.value);
                                f1 = ui.value;
                                 board.update();
                                 board.update();
}
}
Line 36: Line 38:
slide: function(event, ui) {
slide: function(event, ui) {
$("#c2").val(ui.value*0.01);
$("#c2").val(ui.value*0.01);
                                c2 = ui.value*0.01;
                                 board.update();
                                 board.update();
}
}
Line 43: Line 46:
slide: function(event, ui) {
slide: function(event, ui) {
$("#f2").val(ui.value);
$("#f2").val(ui.value);
                                f2 = ui.value;
                                 board.update();
                                 board.update();
}
}
Line 69: Line 73:
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<script language="JavaScript">
<script language="JavaScript">
board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 100, unitY: 100});
board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 100, unitY: 100});
var c1 = 0.6;
var c2 = 0.0;
var f1 = 7;
var f2 = 17;
var c = board.createElement('curve', [
var c = board.createElement('curve', [
               function(t) { return Math.cos(t)+ $("#c1").val()*Math.cos($("#f1").val()*t)+ $("#c2").val()*Math.cos($("#f2").val()*t);},
               function(t) { return Math.cos(t)+ c1*Math.cos(f1*t)+ c2*Math.cos(f2*t);},
               function(t) { return Math.sin(t)+ $("#c1").val()*Math.sin($("#f1").val()*t)+ $("#c2").val()*Math.sin($("#f2").val()*t);},
               function(t) { return Math.sin(t)+ c1*Math.sin(f1*t)+ c2*Math.sin(f2*t);},
               0,2.2*Math.PI]);
               0,2.1*Math.PI]);
</script>
</script>
</html>
</html>


===The source code of this construction===
===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>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/jsxgraph.css" />
Line 157: Line 165:
               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.2*Math.PI]);
               0,2.1*Math.PI]);
</script>
</script>
</source>
</source>
[[Category:Examples]]
[[Category:Examples]]
[[Category:Curves]]
[[Category:Curves]]

Revision as of 14:42, 29 June 2009

This is an example of a parametric curve plot. The 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.

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/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"/>
<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/jsxgraphcore.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.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.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.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.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>
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<script language="JavaScript"> 			
 board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 100, unitY: 100});
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.1*Math.PI]);
</script>