Knots from circle pathes: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 4: | Line 4: | ||
<html> | <html> | ||
<div style="margin:5px"> | <div style="margin:5px"> | ||
<p> | <p> | ||
| Line 58: | Line 9: | ||
<input type="range" 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" | min="0" max="100" value="60" | ||
oninput="c1 = this.value*0.01; | |||
board.updateQuality = board.BOARD_QUALITY_HIGH; | board.updateQuality = board.BOARD_QUALITY_HIGH; | ||
board.update();" | board.update();" | ||
| Line 84: | Line 35: | ||
/> | /> | ||
</p> | </p> | ||
</div> | </div> | ||
</html> | </html> | ||
Revision as of 12:05, 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
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].
<html>
<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 cw = 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:6, strokeColor: 'blue', shadow: true});
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, strokeColor: 'white'});
</jsxgraph>
