Difference between revisions of "Sine and cosine"

From JSXGraph Wiki
Jump to: navigation, search
Line 53: Line 53:
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
 
<source lang="javascript">
 
<source lang="javascript">
 +
// Board 1
 
  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});
+
  board.suspendUpdate();
 
  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 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]]);
 
  var xax2 = board2.create('axis', [[0,0], [1,0]]);
 
  board2.create('axis', [[0,0], [0,1]]);
 
  board2.create('axis', [[0,0], [0,1]]);
 
 
  board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});
 
  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:
 
  // sine:
Line 71: Line 87:
 
             function(){ return board.rad([1,0],[0,0],b1p1); },  
 
             function(){ return board.rad([1,0],[0,0],b1p1); },  
 
             function() { return b1p1.Y() }],  
 
             function() { return b1p1.Y() }],  
             {fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
+
             {fixed: true, trace: true, color: '#ff0000', name: 'S'});
 
  // cosine:
 
  // cosine:
 
  var b2p2 = board2.create('point', [
 
  var b2p2 = board2.create('point', [
 
             function(){ return board.rad([1,0],[0,0],b1p1); },  
 
             function(){ return board.rad([1,0],[0,0],b1p1); },  
 
             function() { return b1p1.X() }],  
 
             function() { return b1p1.X() }],  
             {fixed: true, trace: true, strokeColor: '#0000ff', name: 'C'});
+
             {fixed: true, trace: true, color: '#0000ff', name: 'C'});
 
  // Dependencies (only necessary if b2p1 or b2p2 is deleted)
 
  // Dependencies (only necessary if b2p1 or b2p2 is deleted)
 
  b1p1.addChild(b2p1);
 
  b1p1.addChild(b2p1);
 
  b1p1.addChild(b2p2);
 
  b1p1.addChild(b2p2);
 +
board2.unsuspendUpdate();
  
 
  board.addChild(board2);
 
  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>
 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Geometry]]
 
[[Category:Geometry]]

Revision as of 13:33, 6 February 2011

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);