Unit circle: Difference between revisions

From JSXGraph Wiki
No edit summary
mNo edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
<nowiki>
<html>
<h2>Unit Circle</h2>
</html>
<jsxgraph width="500" height="500" box="box">
 
var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
var p2 = b.createElement('point',[1,0], {name:'10',size: 4, face: 'o',visible:false,fixed:true});
var p3 = b.createElement('point',[0,1], {name:'01',size: 4, face: 'o',visible:false,fixed:true});
var p4 = b.createElement('point',[1,1], {name:'11',size: 4, face: 'o',visible:false,fixed:true});
 
var ci = b.createElement('circle',["0","10"], {strokeColor:'blue',strokeWidth:2});
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});
 
 
var theta = b.create('angle', ['10','0','A'],{name:'&theta;',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});
 
var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
var li2 = b.create('line',["01","11"], {strokeColor:'blue',strokeWidth:2});
var li3 = b.create('line',["0","A"], {straightFirst:false,straightLast:false,strokeColor:'blue',strokeWidth:2});
 
 
var p6 = b.createElement('point',[ 0, function(){ return p5.Y(); }], {name:'sin',size: 4, face: 'o',visible:false});
var p7 = b.createElement('point',[ function(){ return p5.X(); },0], {name:'cos',size: 4, face: 'o',visible:false});
var p8 = b.createElement('point',[ function(){ return 1/Math.tan(Math.atan2(p5.Y(),p5.X()));},1], {name:'cot',size: 4, face: 'o',visible:false});
 
var p9 = b.createElement('point',[ 1, function(){ return Math.tan(Math.atan2(p5.Y(),p5.X()));}], {name:'tan',size: 4, face: 'o',visible:false});
 
var cos = b.create('text',[function(){return p6.X();},function(){ return p6.Y()/2;},"sin"],{anchorX:'right'});
var sin = b.create('text',[function(){return p7.X()/2;},function(){ return p7.Y();},"cos"],{anchorY:'top'});
 
var cot = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y();},"cot"],{anchorY:'bottom'});
var tan = b.create('text',[function(){return p9.X();},function(){ return p9.Y()/2;},"tan"],{anchorX:'left'});
 
 
var csc = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y()/2;},"csc"],{anchorY:'top'});
var sec = b.create('text',[function(){return p9.X()/2;},function(){ return p9.Y()/2;},"sec"],{anchorX:'left'});
 
 
 
var li4 = b.create('line',["0",p6], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'green',strokeWidth:2});
var li5 = b.create('line',["0",p7], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'brown',strokeWidth:2});
var li6 = b.create('line',["0",p8], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'purple',strokeWidth:2});
var li7 = b.create('line',["0",p9], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'yellow',strokeWidth:2});
 
 
var li8 = b.create('line',["01",p8], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'pink',strokeWidth:2});
var li9 = b.create('line',["10",p9], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'#00ff00',strokeWidth:2});
var li10 = b.create('line',[p5,p6], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});
var li11 = b.create('line',[p5,p7], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});
 
var costext=b.create('text', [-1.0, -0.8, function(){return "cos("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});
 
var sintext=b.create('text', [-1.0, -0.9, function(){return "sin("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});
 
var tantext=b.create('text', [-1.0, -1.0, function(){return "tan("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p9.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});


<html>
var cottext=b.create('text', [-1.0, -1.1, function(){return "cot("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p8.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});
<form>
 
<input type="button" value="start" onclick="rol.start()">
var sectext=b.create('text', [-1.0, -1.2, function(){return "sec("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.cos( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});
<input type="button" value="stop" onclick="rol.stop()">
 
<input type="button" value="one step" onclick="rol.rolling()">
var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});
</form></html>


<jsxgraph width="600" height="300" box="jxgbox">
</jsxgraph>
var b = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1,5,20,-1], keepaspectratio:true});
brd.suspendUpdate();


<div id="box" class="jxgbox" style="width:800px; height:800px;"></div>
=== The underlying JavaScript code ===
<script type="text/javascript">
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
Line 23: Line 75:
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});


var angletheta =  Math.atan2(p5.Y(),p5.X());
var thetadegree = Math.atan2(p5.Y(),p5.X())*180/3.1415;


function thetadegree2(pointa) {
var theta = b.create('angle', ['10','0','A'],{name:'&theta;',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});
      return ((Math.atan2(pointa.Y(),pointa.X())*180/3.1415).ToFixed(1));
}
 
theta = b.create('angle', ['10','0','A'],{name:'&theta;',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});


var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
Line 78: Line 124:
var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});
var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});


 
</source>
  </script>
[/nowiki]

Latest revision as of 13:14, 17 September 2013

Unit Circle

The underlying JavaScript code

var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
var p2 = b.createElement('point',[1,0], {name:'10',size: 4, face: 'o',visible:false,fixed:true});
var p3 = b.createElement('point',[0,1], {name:'01',size: 4, face: 'o',visible:false,fixed:true});
var p4 = b.createElement('point',[1,1], {name:'11',size: 4, face: 'o',visible:false,fixed:true});

var ci = b.createElement('circle',["0","10"], {strokeColor:'blue',strokeWidth:2});
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});


var theta = b.create('angle', ['10','0','A'],{name:'&theta;',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});

var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
var li2 = b.create('line',["01","11"], {strokeColor:'blue',strokeWidth:2});
var li3 = b.create('line',["0","A"], {straightFirst:false,straightLast:false,strokeColor:'blue',strokeWidth:2});


var p6 = b.createElement('point',[ 0, function(){ return p5.Y(); }], {name:'sin',size: 4, face: 'o',visible:false});
var p7 = b.createElement('point',[ function(){ return p5.X(); },0], {name:'cos',size: 4, face: 'o',visible:false});
var p8 = b.createElement('point',[ function(){ return 1/Math.tan(Math.atan2(p5.Y(),p5.X()));},1], {name:'cot',size: 4, face: 'o',visible:false});

var p9 = b.createElement('point',[ 1, function(){ return Math.tan(Math.atan2(p5.Y(),p5.X()));}], {name:'tan',size: 4, face: 'o',visible:false});

var cos = b.create('text',[function(){return p6.X();},function(){ return p6.Y()/2;},"sin"],{anchorX:'right'});
var sin = b.create('text',[function(){return p7.X()/2;},function(){ return p7.Y();},"cos"],{anchorY:'top'});

var cot = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y();},"cot"],{anchorY:'bottom'});
var tan = b.create('text',[function(){return p9.X();},function(){ return p9.Y()/2;},"tan"],{anchorX:'left'});


var csc = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y()/2;},"csc"],{anchorY:'top'});
var sec = b.create('text',[function(){return p9.X()/2;},function(){ return p9.Y()/2;},"sec"],{anchorX:'left'});



var li4 = b.create('line',["0",p6], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'green',strokeWidth:2});
var li5 = b.create('line',["0",p7], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'brown',strokeWidth:2});
var li6 = b.create('line',["0",p8], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'purple',strokeWidth:2});
var li7 = b.create('line',["0",p9], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'yellow',strokeWidth:2});


var li8 = b.create('line',["01",p8], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'pink',strokeWidth:2});
var li9 = b.create('line',["10",p9], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'#00ff00',strokeWidth:2});
var li10 = b.create('line',[p5,p6], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});
var li11 = b.create('line',[p5,p7], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});

var costext=b.create('text', [-1.0, -0.8, function(){return "cos("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sintext=b.create('text', [-1.0, -0.9, function(){return "sin("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var tantext=b.create('text', [-1.0, -1.0, function(){return "tan("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p9.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var cottext=b.create('text', [-1.0, -1.1, function(){return "cot("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p8.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sectext=b.create('text', [-1.0, -1.2, function(){return "sec("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.cos( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Unit_circle&oldid=6185"