Unit circle

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