Sine and cosine: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 15: Line 15:
  board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
  board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
  board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
  board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
  board.createElement('axis', [[0,0], [0,1]]);
  var xax1 = board.createElement('axis', [[0,0], [0,1]]);
  board.createElement('axis', [[0,0], [1,0]]);
  var yax1 = board.createElement('axis', [[0,0], [1,0]]);
var xax = board2.createElement('axis', [[0,0], [1,0]]);
var xax2 = board2.createElement('axis', [[0,0], [1,0]]);
  board2.createElement('axis', [[0,0], [0,1]]);
  board2.createElement('axis', [[0,0], [0,1]]);


board2.createElement('ticks', [xax, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});
board2.createElement('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});
 


  b1c1 = board.createElement('circle', [[0,0], [1,0]]);
  b1c1 = board.createElement('circle', [[0,0], [1,0]]);
  b1p1 = board.createElement('point', [2, 0], {slideObject: b1c1});
  b1p1 = board.createElement('point', [2, 0], {slideObject: b1c1});
  perp = board.createElement('perpendicular', ['X-Achse',b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
  perp = board.createElement('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
  perp2 = board.createElement('perpendicular',['Y-Achse',b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});
  perp2 = board.createElement('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});


       
  // sine:
  // sine:
  b2p1 = board2.createElement('point', [
  b2p1 = board2.createElement('point', [
             function(){  
             function(){ return board.rad([1,0],[0,0],b1p1); },  
                return board.rad(JXG.GetReferenceFromParameter(board, 'Punkt_1_0'),
                                        JXG.GetReferenceFromParameter(board, 'Ursprung'), b1p1); },  
             function() { return b1p1.Y() }],  
             function() { return b1p1.Y() }],  
             {fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
             {fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
  // cosine:
  // cosine:
  b2p2 = board2.createElement('point', [
  b2p2 = board2.createElement('point', [
             function(){ return board.rad(JXG.GetReferenceFromParameter(board, 'Punkt_1_0'),  
             function(){ return board.rad([1,0],[0,0],b1p1); },  
                                                  JXG.GetReferenceFromParameter(board, 'Ursprung'), b1p1); },  
             function() { return b1p1.X() }],  
             function() { return b1p1.X() }],  
             {fixed: true, trace: true, strokeColor: '#0000ff', name: 'C'});
             {fixed: true, trace: true, strokeColor: '#0000ff', name: 'C'});
Line 62: Line 57:
===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="javascript">
<source lang="javascript">
  board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 150, unitY: 150});
  board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
  board2 = JXG.JSXGraph.initBoard('box2', {originX: 100, originY: 250, unitX: 50, unitY: 150});
  board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
  board.createElement('axis', [[0,0], [0,1]]);
  var xax1 = board.createElement('axis', [[0,0], [0,1]]);
  board.createElement('axis', [[0,0], [1,0]]);
  var yax1 = board.createElement('axis', [[0,0], [1,0]]);
  board2.createElement('axis', [[0,0], [1,0]]);
  var xax2 = board2.createElement('axis', [[0,0], [1,0]]);
  board2.createElement('axis', [[0,0], [0,1]]);
  board2.createElement('axis', [[0,0], [0,1]]);


  b1c1 = board.createElement('circle', ['Ursprung', 'Punkt_1_0']);
board2.createElement('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});
 
  b1c1 = board.createElement('circle', [[0,0], [1,0]]);
  b1p1 = board.createElement('point', [2, 0], {slideObject: b1c1});
  b1p1 = board.createElement('point', [2, 0], {slideObject: b1c1});
  perp = board.createElement('perpendicular', ['X-Achse',b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
  perp = board.createElement('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
  perp2 = board.createElement('perpendicular',['Y-Achse',b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});
  perp2 = board.createElement('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});


       
  // sine:
  // sine:
  b2p1 = board2.createElement('point', [
  b2p1 = board2.createElement('point', [
             function(){  
             function(){ return board.rad([1,0],[0,0],b1p1); },  
                return board.rad(JXG.GetReferenceFromParameter(board, 'Punkt_1_0'),
                                        JXG.GetReferenceFromParameter(board, 'Ursprung'), b1p1); },  
             function() { return b1p1.Y() }],  
             function() { return b1p1.Y() }],  
             {fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
             {fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
  // cosine:
  // cosine:
  b2p2 = board2.createElement('point', [
  b2p2 = board2.createElement('point', [
             function(){ return board.rad(JXG.GetReferenceFromParameter(board, 'Punkt_1_0'),  
             function(){ return board.rad([1,0],[0,0],b1p1); },  
                                                  JXG.GetReferenceFromParameter(board, 'Ursprung'), b1p1); },  
             function() { return b1p1.X() }],  
             function() { return b1p1.X() }],  
             {fixed: true, trace: true, strokeColor: '#0000ff', name: 'C'});
             {fixed: true, trace: true, strokeColor: '#0000ff', name: 'C'});

Revision as of 08:11, 22 June 2009

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

The underlying JavaScript code

 board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
 board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
 var xax1 = board.createElement('axis', [[0,0], [0,1]]);
 var yax1 = board.createElement('axis', [[0,0], [1,0]]);
 var xax2 = board2.createElement('axis', [[0,0], [1,0]]);
 board2.createElement('axis', [[0,0], [0,1]]);

 board2.createElement('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});

 b1c1 = board.createElement('circle', [[0,0], [1,0]]);
 b1p1 = board.createElement('point', [2, 0], {slideObject: b1c1});
 perp = board.createElement('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
 perp2 = board.createElement('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});

 // sine:
 b2p1 = board2.createElement('point', [
             function(){ return board.rad([1,0],[0,0],b1p1); }, 
             function() { return b1p1.Y() }], 
             {fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
 // cosine:
 b2p2 = board2.createElement('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);
        
 // Animation
 var animated = false;
 function animate(point, direction, count) {
    if(animated) {
       point.stopAnimation();
       animated = false;
    } else {
       point.startAnimation(direction, count);
       animated = true;
    }
 }
</script>