Sine and cosine

From JSXGraph Wiki
Revision as of 10:23, 25 March 2011 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Animation of the sine and cosine curve. Click here to start and stop animation.

The underlying JavaScript code

 // Board 1
 var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
 board.suspendUpdate();
 var xax1 = board.create('axis', [[0,0], [0,1]]);
 var yax1 = board.create('axis', [[0,0], [1,0]]);
 var b1c1 = board.create('circle', [[0,0], [1,0]]);
 var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
 var perp = board.create('perpendicular', [xax1,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
 var perp2 = board.create('perpendicular',[yax1,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
 board.unsuspendUpdate();

 // Animation
 var animated = false;
 function animate(point, direction, count) {
    if(animated) {
       point.stopAnimation();
       animated = false;
    } else {
       point.startAnimation(direction, count);
       animated = true;
    }
 }

 // Board 2
 var board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
 board2.suspendUpdate();
 var xax2 = board2.create('axis', [[0,0], [1,0]]);
 board2.create('axis', [[0,0], [0,1]]);
 board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});

 // sine:
 var b2p1 = board2.create('point', [
             function(){ return board.rad([1,0],[0,0],b1p1); }, 
             function() { return b1p1.Y() }], 
             {fixed: true, trace: true, color: '#ff0000', name: 'S'});
 // cosine:
 var b2p2 = board2.create('point', [
             function(){ return board.rad([1,0],[0,0],b1p1); }, 
             function() { return b1p1.X() }], 
             {fixed: true, trace: true, color: '#0000ff', name: 'C'});
 // Dependencies (only necessary if b2p1 or b2p2 is deleted)
 b1p1.addChild(b2p1);
 b1p1.addChild(b2p2);
 board2.unsuspendUpdate();

 board.addChild(board2);