Unit circle: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
<link rel="stylesheet" type="text/css" href="css/jsxgraph.css" />
<script type="text/javascript" src="js/jsxgraphcore.js"></script>
</head>


<html>
<html>
<form>
<input type="button" value="start" onclick="rol.start()">
<input type="button" value="stop" onclick="rol.stop()">
<input type="button" value="one step" onclick="rol.rolling()">
</form></html>


<jsxgraph width="600" height="300" box="jxgbox">
<body id="graphing">
var b = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1,5,20,-1], keepaspectratio:true});
 
brd.suspendUpdate();
  <div id="main">
    <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>
 
</li>
           
          </ul>
</div>
      </nav></header><div id="site_content">
 
      <div id="content">
        <h1>Unit Circle</h1>
 
 
 
<DIV ALIGN=CENTER>
 


<div id="box" class="jxgbox" style="width:800px; height:800px;"></div>
<div id="box" class="jxgbox" style="width:800px; height:800px;"></div>
Line 79: Line 110:


   </script>
   </script>
[/nowiki]
</body>

Revision as of 19:51, 12 September 2013


<link rel="stylesheet" type="text/css" href="css/jsxgraph.css" />
<script type="text/javascript" src="js/jsxgraphcore.js"></script>

</head>


<html>

<body id="graphing">

<header> <nav> </nav></header>

Unit Circle



<script type="text/javascript"> 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:'θ',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'}); 


 </script>

</body>

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