Sine and cosine: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 4: | Line 4: | ||
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script> | <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script> | ||
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | ||
<a href="javascript:void(0);" onclick="animate(b1p1, -10, 41);">Click here to start and stop animation</a>. | |||
<table border="0"> | <table border="0"> | ||
<tr><td> | <tr><td> | ||
| Line 11: | Line 12: | ||
</td></tr> | </td></tr> | ||
</table> | </table> | ||
<script language="JavaScript"> | <script language="JavaScript"> | ||
board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150}); | board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150}); | ||
Revision as of 12:01, 10 February 2009
Animation of the sine and cosine curve. Click here to start and stop animation.
The underlying JavaScript code
board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 150, unitY: 150});
board2 = JXG.JSXGraph.initBoard('box2', {originX: 100, originY: 250, unitX: 50, unitY: 150});
board.createElement('axis', [[0,0], [0,1]]);
board.createElement('axis', [[0,0], [1,0]]);
board2.createElement('axis', [[0,0], [1,0]]);
board2.createElement('axis', [[0,0], [0,1]]);
b1c1 = board.createElement('circle', ['Ursprung', 'Punkt_1_0']);
b1p1 = board.createElement('point', [2, 0], {slideObject: b1c1});
perp = board.createElement('perpendicular', ['X-Achse',b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
perp2 = board.createElement('perpendicular',['Y-Achse',b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});
// sine:
b2p1 = board2.createElement('point', [
function(){
return board.rad(JXG.GetReferenceFromParameter(board, 'Punkt_1_0'),
JXG.GetReferenceFromParameter(board, 'Ursprung'), b1p1); },
function() { return b1p1.Y() }],
{fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
// cosine:
b2p2 = board2.createElement('point', [
function(){ return board.rad(JXG.GetReferenceFromParameter(board, 'Punkt_1_0'),
JXG.GetReferenceFromParameter(board, 'Ursprung'), b1p1); },
function() { return b1p1.X() }],
{fixed: true, trace: true, strokeColor: '#0000ff', name: 'C'});
// Dependencies (only necessary if b2p1 or b2p2 is deleted)
b1p1.addChild(b2p1);
b1p1.addChild(b2p2);
// Animation
var animated = false;
function animate(point, direction, count) {
if(animated) {
point.stopAnimation();
animated = false;
} else {
point.startAnimation(direction, count);
animated = true;
}
}
</script>
