Sine and cosine: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
Animation of the sine and cosine curve.
Animation of the sine and cosine curve.
<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<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>.
<a href="javascript:void(0);" onclick="animate(b1p1, -10, 41);">Click here to start and stop animation</a>.
<table border="0">
</html>
<tr><td>
<jsxgraph box="box" width="400" height="400">
  <div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
</td><td>
  <div id="box2" class="jxgbox" style="width:400px; height:400px;"></div>
</td></tr>
</table>
<script language="JavaScript">
  var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
  var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
var board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
  var xax1 = board.create('axis', [[0,0], [0,1]]);
  var xax1 = board.create('axis', [[0,0], [0,1]]);
  var yax1 = board.create('axis', [[0,0], [1,0]]);
  var yax1 = board.create('axis', [[0,0], [1,0]]);
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'});
  var b1c1 = board.create('circle', [[0,0], [1,0]]);
  var b1c1 = board.create('circle', [[0,0], [1,0]]);
  var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
  var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
  var perp = board.create('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
  var perp = board.create('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
  var perp2 = board.create('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});
  var perp2 = board.create('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});
// Animation
var animated = false;
function animate(point, direction, count) {
    if(animated) {
      point.stopAnimation();
      animated = false;
    } else {
      point.startAnimation(direction, count);
      animated = true;
    }
}
</jsxgraph>
<jsxgraph box="box2" width="400" height="400">
var board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
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:
  // sine:
Line 41: Line 45:


  board.addChild(board2);
  board.addChild(board2);
       
</jsxgraph>
// Animation
var animated = false;
function animate(point, direction, count) {
    if(animated) {
      point.stopAnimation();
      animated = false;
    } else {
      point.startAnimation(direction, count);
      animated = true;
    }
}
</script>
</html>


===The underlying JavaScript code===
===The underlying JavaScript code===

Revision as of 12:28, 6 February 2011

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

The underlying JavaScript code

 var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
 var board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
 var xax1 = board.create('axis', [[0,0], [0,1]]);
 var yax1 = board.create('axis', [[0,0], [1,0]]);
 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'});

 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',null],visible:[true,false]});
 var perp2 = board.create('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});

 // sine:
 var b2p1 = board2.create('point', [
             function(){ return board.rad([1,0],[0,0],b1p1); }, 
             function() { return b1p1.Y() }], 
             {fixed: true, trace: true, strokeColor: '#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, strokeColor: '#0000ff', name: 'C'});
 // Dependencies (only necessary if b2p1 or b2p2 is deleted)
 b1p1.addChild(b2p1);
 b1p1.addChild(b2p2);

 board.addChild(board2);
        
 // Animation
 var animated = false;
 function animate(point, direction, count) {
    if(animated) {
       point.stopAnimation();
       animated = false;
    } else {
       point.startAnimation(direction, count);
       animated = true;
    }
 }
</script>