Trochoid: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(10 intermediate revisions by 2 users not shown)
Line 4: Line 4:
:<math>y = a-b\cos(\phi)</math>
:<math>y = a-b\cos(\phi)</math>


<html>
<jsxgraph box="jsxgbox" width="550" height="500">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox:[-10,10,10,-10], axis:true});
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>
board.suspendUpdate();
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
var D = JXG.Math.Numerics.D;
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
var a = board.create('slider', [[1,-1],[8,-1],[-5,1,5]], {style:6,name:'a'});
<script language="JavaScript">
var b = board.create('slider', [[1,-2],[8,-2],[-5,1,5]], {style:6,name:'b'});
board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 25, unitY: 25});
var x = function(phi) { return a.Value()*phi-b.Value()*Math.sin(phi); }
board.suspendUpdate();
var y = function(phi) { return a.Value()-b.Value()*Math.cos(phi); }
board.createElement('axis', [[0,0],[1,0]]);
var c1 = board.create('curve', [x,y,-Math.PI*4,Math.PI*4],{strokeWidth:3});
board.createElement('axis', [[0,0],[0,1]]);
var a = board.createElement('slider', [[1,-1],[8,-1],[-5,1,5]], {style:6});
var b = board.createElement('slider', [[1,-2],[8,-2],[-5,1,5]], {style:6});
var x = function(phi) { return a.Value()*phi-b.Value()*Math.sin(phi); }
var y = function(phi) { return a.Value()-b.Value()*Math.cos(phi); }
var c1 = board.createElement('curve', [x,y,'phi',-Math.PI*4,Math.PI*4],{strokeWidth:3});
   
   
var dualCurve = function(x,y,board) {
var dualCurve = function(x,y,board) {
     var X = function(phi) { return board.D(y)(phi)/(y(phi)*board.D(x)(phi)-x(phi)*board.D(y)(phi)); }
     var X = function(phi) { return D(y)(phi)/(y(phi)*D(x)(phi)-x(phi)*D(y)(phi)); }
     var Y = function(phi) { return board.D(x)(phi)/(x(phi)*board.D(y)(phi)-y(phi)*board.D(x)(phi)); }
     var Y = function(phi) { return D(x)(phi)/(x(phi)*D(y)(phi)-y(phi)*D(x)(phi)); }
     return [X,Y];
     return [X,Y];
    }
}
var dual = dualCurve(x,y,board);
var dual = dualCurve(x,y,board);
var c2 = board.createElement('curve', [dual[0],dual[1],'phi',-Math.PI*1,Math.PI*1],{strokeWidth:3, strokeColor:'red'});
var c2 = board.create('curve', [dual[0],dual[1],-Math.PI*1,Math.PI*1],{strokeWidth:3, strokeColor:'red'});
board.unsuspendUpdate();
board.unsuspendUpdate();
</script>  
</jsxgraph>  
</html>
 
===Reference==
===References===
* [http://en.wikipedia.org/wiki/Trochoid http://en.wikipedia.org/wiki/Trochoid]
* [http://en.wikipedia.org/wiki/Trochoid http://en.wikipedia.org/wiki/Trochoid]
* [http://en.wikipedia.org/wiki/Dual_curve http://en.wikipedia.org/wiki/Dual_curve]
* [http://en.wikipedia.org/wiki/Dual_curve http://en.wikipedia.org/wiki/Dual_curve]
===The underlying JavaScript code===
===The underlying JavaScript code===
This is an example where [http://jquery.com jQuery] is used.
<source lang="javascript">
<source lang="xml">
board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox:[-10,10,10,-10], axis:true});
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
board.suspendUpdate();
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>
var D = JXG.Math.Numerics.D;
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
var a = board.create('slider', [[1,-1],[8,-1],[-5,1,5]], {style:6,name:'a'});
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
var b = board.create('slider', [[1,-2],[8,-2],[-5,1,5]], {style:6,name:'b'});
<script language="JavaScript">
var x = function(phi) { return a.Value()*phi-b.Value()*Math.sin(phi); }
board = JXG.JSXGraph.initBoard('jsxgbox', {originX: 250, originY: 250, unitX: 25, unitY: 25});
var y = function(phi) { return a.Value()-b.Value()*Math.cos(phi); }
board.suspendUpdate();
var c1 = board.create('curve', [x,y,-Math.PI*4,Math.PI*4],{strokeWidth:3});
board.createElement('axis', [[0,0],[1,0]]);
board.createElement('axis', [[0,0],[0,1]]);
var a = board.createElement('slider', [[1,-1],[8,-1],[-5,1,5]], {style:6});
var b = board.createElement('slider', [[1,-2],[8,-2],[-5,1,5]], {style:6});
var x = function(phi) { return a.Value()*phi-b.Value()*Math.sin(phi); }
var y = function(phi) { return a.Value()-b.Value()*Math.cos(phi); }
var c1 = board.createElement('curve', [x,y,'phi',-Math.PI*4,Math.PI*4],{strokeWidth:3});
   
   
var dualCurve = function(x,y,board) {
var dualCurve = function(x,y,board) {
     var X = function(phi) { return board.D(y)(phi)/(y(phi)*board.D(x)(phi)-x(phi)*board.D(y)(phi)); }
     var X = function(phi) { return D(y)(phi)/(y(phi)*D(x)(phi)-x(phi)*D(y)(phi)); }
     var Y = function(phi) { return board.D(x)(phi)/(x(phi)*board.D(y)(phi)-y(phi)*board.D(x)(phi)); }
     var Y = function(phi) { return D(x)(phi)/(x(phi)*D(y)(phi)-y(phi)*D(x)(phi)); }
     return [X,Y];
     return [X,Y];
    }
}
var dual = dualCurve(x,y,board);
var dual = dualCurve(x,y,board);
var c2 = board.createElement('curve', [dual[0],dual[1],'phi',-Math.PI*1,Math.PI*1],{strokeWidth:3, strokeColor:'red'});
var c2 = board.create('curve', [dual[0],dual[1],-Math.PI*1,Math.PI*1],{strokeWidth:3, strokeColor:'red'});
board.unsuspendUpdate();
board.unsuspendUpdate();
</script>
</source>
</source>
[[Category:Examples]]
[[Category:Examples]]
[[Category:Curves]]

Latest revision as of 16:12, 20 February 2013

The Trochoid curve (blue) and its dual curve (red). The equation of the trochoid is

[math]\displaystyle{ x = a\phi-b\sin(\phi) }[/math]
[math]\displaystyle{ y = a-b\cos(\phi) }[/math]

References

The underlying JavaScript code

board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox:[-10,10,10,-10], axis:true});
board.suspendUpdate();
var D = JXG.Math.Numerics.D;
var a = board.create('slider', [[1,-1],[8,-1],[-5,1,5]], {style:6,name:'a'});
var b = board.create('slider', [[1,-2],[8,-2],[-5,1,5]], {style:6,name:'b'});
var x = function(phi) { return a.Value()*phi-b.Value()*Math.sin(phi); }
var y = function(phi) { return a.Value()-b.Value()*Math.cos(phi); }
var c1 = board.create('curve', [x,y,-Math.PI*4,Math.PI*4],{strokeWidth:3});
 
var dualCurve = function(x,y,board) {
    var X = function(phi) { return D(y)(phi)/(y(phi)*D(x)(phi)-x(phi)*D(y)(phi)); }
    var Y = function(phi) { return D(x)(phi)/(x(phi)*D(y)(phi)-y(phi)*D(x)(phi)); }
    return [X,Y];
}
var dual = dualCurve(x,y,board);
var c2 = board.create('curve', [dual[0],dual[1],-Math.PI*1,Math.PI*1],{strokeWidth:3, strokeColor:'red'});
board.unsuspendUpdate();