Difference between revisions of "Sine and cosine"

From JSXGraph Wiki
Jump to navigationJump to search
m (Added special ticks)
 
(13 intermediate revisions by 2 users not shown)
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/prototype.js"></script>
 
<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>
+
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true});
</td><td>
+
board.suspendUpdate();
  <div id="box2" class="jxgbox" style="width:400px; height:400px;"></div>
+
var b1c1 = board.create('circle', [[0,0], [1,0]]);
</td></tr>
+
var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
</table>
+
var perp = board.create('perpendicular', [board.defaultAxes.x,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
<script language="JavaScript">
+
var perp2 = board.create('perpendicular',[board.defaultAxes.y,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 150, unitY: 150});
+
board.unsuspendUpdate();
board2 = JXG.JSXGraph.initBoard('box2', {originX: 50, originY: 200, unitX: 50, unitY: 150});
+
 
board.createElement('axis', [[0,0], [0,1]]);
+
// Animation
board.createElement('axis', [[0,0], [1,0]]);
+
var animated = false;
var xax = board2.createElement('axis', [[0,0], [1,0]]);
+
function animate(point, direction, count) {
board2.createElement('axis', [[0,0], [0,1]]);
+
    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', {boundingbox: [-1, 1.33, 7, -1.33], axis: true});
 +
board2.suspendUpdate();
 +
board2.create('ticks', [board2.defaultAxes.x, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: 2});
  
board2.createElement('ticks', [xax, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: '2px'});
+
// 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);
 +
</jsxgraph>
  
b1c1 = board.createElement('circle', ['Ursprung', 'Punkt_1_0']);
+
===The underlying JavaScript code===
b1p1 = board.createElement('point', [2, 0], {slideObject: b1c1});
+
<source lang="javascript">
perp = board.createElement('perpendicular', ['X-Achse',b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
+
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true});
perp2 = board.createElement('perpendicular',['Y-Achse',b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});
+
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
// sine:
+
var animated = false;
b2p1 = board2.createElement('point', [
+
function animate(point, direction, count) {
            function(){
 
                return board.rad(JXG.GetReferenceFromParameter(board, 'Punkt_1_0'),
 
                                        JXG.GetReferenceFromParameter(board, 'Ursprung'), b1p1); },
 
            function() { return b1p1.Y() }],
 
            {fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
 
// cosine:
 
b2p2 = board2.createElement('point', [
 
            function(){ return board.rad(JXG.GetReferenceFromParameter(board, 'Punkt_1_0'),
 
                                                  JXG.GetReferenceFromParameter(board, 'Ursprung'), 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) {
 
     if(animated) {
      point.stopAnimation();
+
        point.stopAnimation();
      animated = false;
+
        animated = false;
 
     } else {
 
     } else {
      point.startAnimation(direction, count);
+
        point.startAnimation(direction, count);
      animated = true;
+
        animated = true;
 
     }
 
     }
}
+
}
</script>
 
</html>
 
  
===The underlying JavaScript code===
+
var board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-1, 1.33, 7, -1.33]});
<source lang="javascript">
+
board2.suspendUpdate();
board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 150, unitY: 150});
+
var xax2 = board2.create('axis', [[0,0], [1,0]]);
board2 = JXG.JSXGraph.initBoard('box2', {originX: 100, originY: 250, unitX: 50, unitY: 150});
+
board2.create('axis', [[0,0], [0,1]]);
board.createElement('axis', [[0,0], [0,1]]);
+
board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: 2});
board.createElement('axis', [[0,0], [1,0]]);
 
board2.createElement('axis', [[0,0], [1,0]]);
 
board2.createElement('axis', [[0,0], [0,1]]);
 
  
b1c1 = board.createElement('circle', ['Ursprung', 'Punkt_1_0']);
+
// sine:
b1p1 = board.createElement('point', [2, 0], {slideObject: b1c1});
+
var b2p1 = board2.create('point', [
perp = board.createElement('perpendicular', ['X-Achse',b1p1],{strokeColor:['#ff0000',null],visible:[true,false]});
+
             function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },  
perp2 = board.createElement('perpendicular',['Y-Achse',b1p1],{strokeColor:['#0000ff',null],visible:[true,false]});
 
 
 
       
 
// sine:
 
b2p1 = board2.createElement('point', [
 
             function(){  
 
                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, color: '#ff0000', name: 'S'});
// cosine:
+
// cosine:
b2p2 = board2.createElement('point', [
+
var b2p2 = board2.create('point', [
             function(){ return board.rad(JXG.GetReferenceFromParameter(board, 'Punkt_1_0'),  
+
             function(){ return JXG.Math.Geometry.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, 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();
// Animation
+
 
var animated = false;
+
board.addChild(board2);
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 17: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);