Cosine: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
The cosine is a projection of the complex number exp(−ix) (which is a point on the unit circle in the complex plane) to the real axis on the complex plane. In the following interactive figure, you can drag the point x on the real axis and observe the behaviour of the complex number exp(−ix) and the varying value of cosine(x).
<link rel="stylesheet" type="text/css" href="http://cpge.livet.free.fr/Ats/squelettes/jsxgraph.css" />
<script type="text/javascript" src="http://cpge.livet.free.fr/Ats/squelettes/jsxgraphcore.js"></script>
<style type="text/css">
  #rot, #rot0, #rot1, #rot2, #rot3, #rot4 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
</style>
<body>


<table>
{|
<tr>
|Cosine
<td>Complex Plane</td><td>Cosine Graph</td>
|Unit Circle on the Complex Plane
</tr>
|-
<tr>
|  <jsxgraph box="boxR" width="500" height="500">
<td><div id="box" class="jxgbox" style="width:500px; height:500px;"></div></td>
      var brd1 = JXG.JSXGraph.initBoard('boxR', {boundingbox: [-10, 1.5, 10, -1.5], axis:true});
<td><div id="boxR" class="jxgbox" style="width:500px; height:500px;"></div></td>
      var xr = brd1.create('line',[[-9,0],[9,0]],{visible:false});
</tr>
      var x = brd1.create('glider',[-9,0,xr],{visible:true, name:'x'});
</table>
      var y = brd1.create('point',[x.X(),Math.cos(x.X())],{size:1,name:'',strokeColor:'green'});
      var x1 = brd1.create('segment',[x,y],{visible:true, straightFirst:false,straightLast:false,strokeColor:'red'});
      x.on('drag', function(){ transform(x);});
      var f = brd1.create('functiongraph',
          [function(x){
    return Math.cos(x);  
          }]);
      brd1.create('text',[
        function(){return x.X()+0.3;},
        function(){return y.Y()*0.5;},
        'cos'],{});
      function transform(x) {
        p2.setPosition(JXG.COORDS_BY_USER,[Math.cos(x.X()),Math.sin(x.X())]);
        y.setPosition(JXG.COORDS_BY_USER,[x.X(),Math.cos(x.X())]);
        brd.update();
      }


<script language="javascript" type="text/javascript">
  </jsxgraph>
console.log("test");
|  <jsxgraph box="box" width="500" height="500">
var brd1 = JXG.JSXGraph.initBoard('boxR', {boundingbox: [-10, 1.5, 10, -1.5], axis:true});
      var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5], axis:true});  
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5], axis:true});
      brd1.addChild(brd);
 
      var ax = brd.create('line',[[0,0],[1,0]],{visible:false});
var xr = brd1.create('line',[[-9,0],[9,0]],{visible:false});
      var ay = brd.create('line',[[0,0],[0,1]],{visible:false});
var x = brd1.create('glider',[-9,0,xr],{visible:true, name:'x'});
var y = brd1.create('point',[x.X(),Math.cos(x.X())],{size:1,name:'',strokeColor:'green'});
 
var x1 = brd1.create('segment',[x,y],{visible:true, straightFirst:false,straightLast:false,strokeColor:'red'});
x.on('drag', function(){ transform(x);});
var f = brd1.create('functiongraph',[function(x){
return Math.cos(x);
}]);
var ax = brd.create('line',[[0,0],[1,0]],{visible:false});
var ay = brd.create('line',[[0,0],[0,1]],{visible:false});
   
   
var p0 = brd.create('point',[0,0],{fixed:true,visible:false});
      var p0 = brd.create('point',[0,0],{fixed:true,visible:false});
var p1 = brd.create('point',[1,0],{name:'',visible:false,fixed:true});
      var p1 = brd.create('point',[1,0],{name:'',visible:false,fixed:true});
var c = brd.create('circle',[p0,p1],{dash:2,strokeWidth:1,strokeOpacity:0.6});
      var c = brd.create('circle',[p0,p1],{dash:2,strokeWidth:1,strokeOpacity:0.6});




var p2 = brd.create('point',[Math.cos(x.X()),Math.sin(x.X())],{name:'exp(ix)',fixed:true,size:1, strokeColor:'green'});
      var p2 = brd.create('point',[Math.cos(x.X()),Math.sin(x.X())],{name:'exp(ix)',fixed:true,size:1, strokeColor:'green'});


var p3 = brd.create('point',[function(){return p2.X();},0.0],{visible:false,name:'',withLabel:false});
      var p3 = brd.create('point',[function(){return p2.X();},0.0],{visible:false,name:'',withLabel:false});
var p4 = brd.create('point',[0.0,function(){return p2.Y();}],{visible:false,name:'',withLabel:false});
      var p4 = brd.create('point',[0.0,function(){return p2.Y();}],{visible:false,name:'',withLabel:false});
   
   
brd.create('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red'});    // cos
      brd.create('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red'});    // cos
brd.create('text',[
      brd.create('text',[
         function(){return (p2.X()+p4.X())*0.3;},
         function(){return (p2.X()+p4.X())*0.3;},
         function(){return p2.Y()+0.05;},
         function(){return p2.Y()+0.05;},
         'cos'],{});
         'cos'],{});


brd1.create('text',[
        function(){return x.X()+0.3;},
        function(){return y.Y()*0.5;},
        'cos'],{});


function transform(x) {
 
p2.setPosition(JXG.COORDS_BY_USER,[Math.cos(x.X()),Math.sin(x.X())]);
  </jsxgraph>
y.setPosition(JXG.COORDS_BY_USER,[x.X(),Math.cos(x.X())]);
|}
brd.update();
}




</script>
</body>


</html>
[[Category:Contributions]]
[[Category:Contributions]]
[[Category:Examples]]
[http://www.bookofproofs.org/branches/cosine/ read more about cosine on Bookofproofs]

Latest revision as of 13:21, 6 March 2016

The cosine is a projection of the complex number exp(−ix) (which is a point on the unit circle in the complex plane) to the real axis on the complex plane. In the following interactive figure, you can drag the point x on the real axis and observe the behaviour of the complex number exp(−ix) and the varying value of cosine(x).

Cosine Unit Circle on the Complex Plane

read more about cosine on Bookofproofs

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Cosine&oldid=6467"