Sine and cosine: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
Animtion of the sine and cosine curve. | |||
<html> | <html> | ||
<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 10: | Line 11: | ||
</td></tr> | </td></tr> | ||
</table> | </table> | ||
<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: 250, originY: 250, unitX: 150, unitY: 150}); | board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 150, unitY: 150}); | ||
Revision as of 17:45, 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>
