Difference between revisions of "Cosine"

From JSXGraph Wiki
Jump to navigationJump to search
Line 8: Line 8:
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td><div id="box" class="jxgbox" style="width:500px; height:500px;"></div></td>
+
<td>
<td><div id="boxR" class="jxgbox" style="width:500px; height:500px;"></div></td>
+
  <jsxgraph box="box" width="500" height="500">  
</tr>
+
      var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5], axis:true});  
</table>
+
      var ax = brd.create('line',[[0,0],[1,0]],{visible:false});
 
+
      var ay = brd.create('line',[[0,0],[0,1]],{visible:false});
<script language="javascript" type="text/javascript">
 
 
 
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 xr = brd1.create('line',[[-9,0],[9,0]],{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'});
 
console.log("test1");
 
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);
 
}]);
 
 
 
console.log("test2");
 
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())]);
 
y.setPosition(JXG.COORDS_BY_USER,[x.X(),Math.cos(x.X())]);
 
brd.update();
 
}
 
  
 +
  </jsxgraph>
 +
</td>
 +
<td>
 +
  <jsxgraph box="boxR" width="500" height="500">
 +
      var brd1 = JXG.JSXGraph.initBoard('boxR', {boundingbox: [-10, 1.5, 10, -1.5], axis:true});
 +
      var xr = brd1.create('line',[[-9,0],[9,0]],{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);
 +
          }]);
 +
      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>
+
  </jsxgraph>
 +
</td>
 +
</tr>
 +
</table>
 
</body>
 
</body>
  
 
</html>
 
</html>
 
[[Category:Contributions]]
 
[[Category:Contributions]]

Revision as of 14:41, 6 March 2016

Complex PlaneCosine Graph
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5], axis:true}); 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 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 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 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('text',[ function(){return (p2.X()+p4.X())*0.3;}, function(){return p2.Y()+0.05;}, 'cos'],{}); var brd1 = JXG.JSXGraph.initBoard('boxR', {boundingbox: [-10, 1.5, 10, -1.5], axis:true}); var xr = brd1.create('line',[[-9,0],[9,0]],{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); }]); 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(); }