Sine and cosine: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 6: | Line 6: | ||
<table border="0"> | <table border="0"> | ||
<tr><td> | <tr><td> | ||
<div id="box" class="jxgbox" style="width: | <div id="box" class="jxgbox" style="width:400px; height:400px;"></div> | ||
</td><td> | </td><td> | ||
<div id="box2" class="jxgbox" style="width: | <div id="box2" class="jxgbox" style="width:400px; height:400px;"></div> | ||
</td></tr> | </td></tr> | ||
</table> | </table> | ||
<a href="javascript:void(0);" onclick="animate(b1p1, -10, 41);">Click here to start and stop animation</a>. | <a href="javascript:void(0);" onclick="animate(b1p1, -10, 41);">Click here to start and stop animation</a>. | ||
<script language="JavaScript"> | <script language="JavaScript"> | ||
board = JXG.JSXGraph.initBoard('box', {originX: | board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150}); | ||
board2 = JXG.JSXGraph.initBoard('box2', {originX: | board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150}); | ||
board.createElement('axis', [[0,0], [0,1]]); | board.createElement('axis', [[0,0], [0,1]]); | ||
board.createElement('axis', [[0,0], [1,0]]); | board.createElement('axis', [[0,0], [1,0]]); | ||
Revision as of 17:46, 3 January 2009
Animtion 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.algebra.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.algebra.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>
