Unit circle: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
<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 angletheta =  Math.atan2(p5.Y(),p5.X());
var thetadegree = Math.atan2(p5.Y(),p5.X())*180/3.1415;
function thetadegree2(pointa) {
      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 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'});




<link rel="stylesheet" type="text/css" href="css/jsxgraph.css" />
 
<script type="text/javascript" src="js/jsxgraphcore.js"></script>
var li4 = b.create('line',["0",p6], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'green',strokeWidth:2});
</head>
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});




<html>
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});


<body id="graphing">
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'});


  <div id="main">
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'});
    <header><div id="logo">
        <div id="logo_text">
          <!-- class="logo_color", allows you to change the colour of the text -->
          <h1><a href="index.html"><span class="logo_color">PHY-225</span></a></h1>
          <h2>Mathematical Methods in Physics</h2>
        </div>
      </div>
      <nav><div id="menu_container">
          <ul class="myv_menu" id="nav">
<li><a href="index.html">Home</a></li>
            <li ><a href="textbook.html">Textbook</a></li>
            <li><a href="homework.html">Homework</a></li>
            <!-- <li><a href="mathematica.html">Mathematica</a></li> -->


            <li class="menu_active"> <a href="examples.html">Examples</a>
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'});
 
</li>
           
          </ul>
</div>
      </nav></header><div id="site_content">
 
      <div id="content">
        <h1>Unit Circle</h1>


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'});


<DIV ALIGN=CENTER>
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'});


</jsxgraph>


<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 108: Line 136:
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>
</body>

Revision as of 13:04, 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 angletheta =  Math.atan2(p5.Y(),p5.X());
var thetadegree = Math.atan2(p5.Y(),p5.X())*180/3.1415;

function thetadegree2(pointa) {
      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 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'});