Sine and cosine: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(6 intermediate revisions by 2 users not shown)
Line 4: Line 4:
</html>
</html>
<jsxgraph box="box" width="400" height="400">
<jsxgraph box="box" width="400" height="400">
var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true});
var xax1 = board.create('axis', [[0,0], [0,1]]);
board.suspendUpdate();
var yax1 = board.create('axis', [[0,0], [1,0]]);
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', [board.defaultAxes.x,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
var perp = board.create('perpendicular', [xax1,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
var perp2 = board.create('perpendicular',[board.defaultAxes.y,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
var perp2 = board.create('perpendicular',[yax1,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
board.unsuspendUpdate();


// Animation
// Animation
var animated = false;
var animated = false;
function animate(point, direction, count) {
function animate(point, direction, count) {
     if(animated) {
     if(animated) {
      point.stopAnimation();
        point.stopAnimation();
      animated = false;
        animated = false;
     } else {
     } else {
      point.startAnimation(direction, count);
        point.startAnimation(direction, count);
      animated = true;
        animated = true;
     }
     }
}
}
</jsxgraph>
</jsxgraph>
<jsxgraph box="box2" width="400" height="400">
<jsxgraph box="box2" width="400" height="400">
var board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
var board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-1, 1.33, 7, -1.33], axis: true});
var xax2 = board2.create('axis', [[0,0], [1,0]]);
board2.suspendUpdate();
board2.create('axis', [[0,0], [0,1]]);
board2.create('ticks', [board2.defaultAxes.x, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: 2});
board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});


// sine:
// sine:
var b2p1 = board2.create('point', [
var b2p1 = board2.create('point', [
             function(){ return board.rad([1,0],[0,0],b1p1); },  
             function(){ return JXG.Math.Geometry.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 JXG.Math.Geometry.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);
</jsxgraph>
</jsxgraph>


===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="javascript">
<source lang="javascript">
var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true});
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 b1c1 = board.create('circle', [[0,0], [1,0]]);
var yax1 = board.create('axis', [[0,0], [1,0]]);
var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
var xax2 = board2.create('axis', [[0,0], [1,0]]);
var perp = board.create('perpendicular', [board.defaultAxes.x,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
board2.create('axis', [[0,0], [0,1]]);
var perp2 = board.create('perpendicular',[board.defaultAxes.y,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
board.unsuspendUpdate();


board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});
// Animation
var animated = false;
function animate(point, direction, count) {
    if(animated) {
        point.stopAnimation();
        animated = false;
    } else {
        point.startAnimation(direction, count);
        animated = true;
    }
}


var b1c1 = board.create('circle', [[0,0], [1,0]]);
var board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-1, 1.33, 7, -1.33]});
var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
board2.suspendUpdate();
var perp = board.create('perpendicular', [xax1,b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
var xax2 = board2.create('axis', [[0,0], [1,0]]);
var perp2 = board.create('perpendicular',[yax1,b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});
board2.create('axis', [[0,0], [0,1]]);
board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: 2});


// sine:
// sine:
var b2p1 = board2.create('point', [
var b2p1 = board2.create('point', [
             function(){ return board.rad([1,0],[0,0],b1p1); },  
             function(){ return JXG.Math.Geometry.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 JXG.Math.Geometry.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]]

Latest revision as of 15:58, 20 February 2013

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

The underlying JavaScript code

var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true});
board.suspendUpdate();
var b1c1 = board.create('circle', [[0,0], [1,0]]);
var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
var perp = board.create('perpendicular', [board.defaultAxes.x,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
var perp2 = board.create('perpendicular',[board.defaultAxes.y,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;
    }
}

var board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-1, 1.33, 7, -1.33]});
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: 2});

// sine:
var b2p1 = board2.create('point', [
             function(){ return JXG.Math.Geometry.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 JXG.Math.Geometry.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);