Trigonometric functions: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(3 intermediate revisions by 2 users not shown)
Line 7: Line 7:


<jsxgraph width="600" height="600" box="box">
<jsxgraph width="600" height="600" box="box">
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, grid:true, unitX: 100, unitY: 100});
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3]});
var ax = brd.createElement('line',[[0,0],[1,0]],{visible:false});
var ax = brd.create('line',[[0,0],[1,0]],{visible:false});
var ay = brd.createElement('line',[[0,0],[0,1]],{visible:false});
var ay = brd.create('line',[[0,0],[0,1]],{visible:false});


var p0 = brd.createElement('point',[0,0],{fixed:true,visible:false});
var p0 = brd.create('point',[0,0],{fixed:true,visible:false});
var p1 = brd.createElement('point',[1,0],{name:'',visible:false,fixed:true});
var p1 = brd.create('point',[1,0],{name:'',visible:false,fixed:true});
var c = brd.createElement('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.createElement('glider',[0.4,1.0,c],{name:'',withLabel:false});
var p2 = brd.create('glider',[0.4,1.0,c],{name:'',withLabel:false});
var p3 = brd.createElement('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.createElement('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.createElement('line',[p0,p2],{straightFirst:false,straightLast:false,strokeColor:'black',withLabel:false});  // Hypotenuse
brd.create('line',[p0,p2],{straightFirst:false,straightLast:false,strokeColor:'black'});  // Hypotenuse
brd.createElement('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:'red',withLabel:false});    // sin
brd.create('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:'red'});    // sin
brd.createElement('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red',withLabel:false});    // cos
brd.create('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red'});    // cos


var t = brd.createElement('tangent',[p2],{visible:false});
var t = brd.create('tangent',[p2],{visible:false});
var p5 = brd.createElement('point',[brd.intersectionFunc(t,ax,0)],{visible:false,name:'',withLabel:false});
var p5 = brd.create('intersection',[t,ax,0],{visible:false,name:'',withLabel:false});
var p6 = brd.createElement('point',[brd.intersectionFunc(t,ay,0)],{visible:false,name:'',withLabel:false});
var p6 = brd.create('intersection',[t,ay,0],{visible:false,name:'',withLabel:false});
brd.createElement('line',[p5,p6],{straightFirst:false,straightLast:false,withLabel:false});                      // tan + cot
brd.create('line',[p5,p6],{straightFirst:false,straightLast:false});                      // tan + cot
brd.create('line',[p0,p6],{straightFirst:false,straightLast:false,strokeColor:'green'});  // csc
brd.create('line',[p0,p5],{straightFirst:false,straightLast:false,strokeColor:'green'});  // sec


brd.createElement('line',[p0,p6],{straightFirst:false,straightLast:false,strokeColor:'green',withLabel:false});  // csc
brd.create('text',[
brd.createElement('line',[p0,p5],{straightFirst:false,straightLast:false,strokeColor:'green',withLabel:false});  // sec
 
brd.createElement('text',[
         function(){return (p0.X()+p2.X())*0.5;},
         function(){return (p0.X()+p2.X())*0.5;},
         function(){return (p0.Y()+p2.Y())*0.5;},
         function(){return (p0.Y()+p2.Y())*0.5;},
         '1'],{});
         '1'],{});


brd.createElement('text',[
brd.create('text',[
         function(){return (p2.X()+p4.X())*0.3;},
         function(){return (p2.X()+p4.X())*0.3;},
         function(){return (p2.Y()+p4.Y())*0.5;},
         function(){return (p2.Y()+p4.Y())*0.5;},
         'cos'],{});
         'cos'],{});


brd.createElement('text',[
brd.create('text',[
         function(){return (p2.X()+p3.X())*0.5;},
         function(){return (p2.X()+p3.X())*0.5;},
         function(){return (p2.Y()+p3.Y())*0.5;},
         function(){return (p2.Y()+p3.Y())*0.5;},
         'sin'],{});
         'sin'],{});


brd.createElement('text',[
brd.create('text',[
         function(){return 0.1+(p2.X()+p5.X())*0.5;},
         function(){return 0.1+(p2.X()+p5.X())*0.5;},
         function(){return 0.1+(p2.Y()+p5.Y())*0.5;},
         function(){return 0.1+(p2.Y()+p5.Y())*0.5;},
         'tan'],{});
         'tan'],{});


brd.createElement('text',[
brd.create('text',[
         function(){return 0.1+(p2.X()+p6.X())*0.5;},
         function(){return 0.1+(p2.X()+p6.X())*0.5;},
         function(){return 0.1+(p2.Y()+p6.Y())*0.5;},
         function(){return 0.1+(p2.Y()+p6.Y())*0.5;},
         'cot'],{});
         'cot'],{});


brd.createElement('text',[
brd.create('text',[
         function(){return -0.2+(p0.X()+p6.X())*0.5;},
         function(){return -0.2+(p0.X()+p6.X())*0.5;},
         function(){return (p0.Y()+p6.Y())*0.5;},
         function(){return (p0.Y()+p6.Y())*0.5;},
         'csc'],{});
         'csc'],{});


brd.createElement('text',[
brd.create('text',[
         function(){return (p0.X()+p5.X())*0.5;},
         function(){return (p0.X()+p5.X())*0.5;},
         function(){return (p0.Y()+p5.Y())*0.5;},
         function(){return (p0.Y()+p5.Y())*0.5;},
Line 66: Line 65:
</jsxgraph>
</jsxgraph>


===The JavaScript Code===
<source lang="javascript">
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3]});
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('glider',[0.4,1.0,c],{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});
brd.create('line',[p0,p2],{straightFirst:false,straightLast:false,strokeColor:'black'});  // Hypotenuse
brd.create('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:'red'});    // sin
brd.create('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red'});    // cos
var t = brd.create('tangent',[p2],{visible:false});
var p5 = brd.create('intersection',[t,ax,0],{visible:false,name:'',withLabel:false});
var p6 = brd.create('intersection',[t,ay,0],{visible:false,name:'',withLabel:false});
brd.create('line',[p5,p6],{straightFirst:false,straightLast:false});                      // tan + cot
brd.create('line',[p0,p6],{straightFirst:false,straightLast:false,strokeColor:'green'});  // csc
brd.create('line',[p0,p5],{straightFirst:false,straightLast:false,strokeColor:'green'});  // sec
brd.create('text',[
        function(){return (p0.X()+p2.X())*0.5;},
        function(){return (p0.Y()+p2.Y())*0.5;},
        '1'],{});
brd.create('text',[
        function(){return (p2.X()+p4.X())*0.3;},
        function(){return (p2.Y()+p4.Y())*0.5;},
        'cos'],{});
brd.create('text',[
        function(){return (p2.X()+p3.X())*0.5;},
        function(){return (p2.Y()+p3.Y())*0.5;},
        'sin'],{});
brd.create('text',[
        function(){return 0.1+(p2.X()+p5.X())*0.5;},
        function(){return 0.1+(p2.Y()+p5.Y())*0.5;},
        'tan'],{});
brd.create('text',[
        function(){return 0.1+(p2.X()+p6.X())*0.5;},
        function(){return 0.1+(p2.Y()+p6.Y())*0.5;},
        'cot'],{});
brd.create('text',[
        function(){return -0.2+(p0.X()+p6.X())*0.5;},
        function(){return (p0.Y()+p6.Y())*0.5;},
        'csc'],{});
brd.create('text',[
        function(){return (p0.X()+p5.X())*0.5;},
        function(){return (p0.Y()+p5.Y())*0.5;},
        'sec'],{});
</source>
[[Category:Examples]]
[[Category:Examples]]
[[Category:Geometry]]
[[Category:Geometry]]
[[Category:Calculus]]
[[Category:Calculus]]

Latest revision as of 16:10, 20 February 2013

The well known trigonometric functions can be visualized on the circle of radius 1. See http://en.wikipedia.org/wiki/Trigonometric_functions for the definitions.

  • Tangent: [math]\displaystyle{ \tan x = \frac{\sin x}{\cos x} }[/math]
  • Cotangent: [math]\displaystyle{ \cot x = \frac{\cos x}{\sin x} }[/math]
  • Secant: [math]\displaystyle{ \sec x = \frac{1}{\cos x} }[/math]
  • Cosecant: [math]\displaystyle{ \csc x = \frac{1}{\sin x} }[/math]

The JavaScript Code

var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3]});
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('glider',[0.4,1.0,c],{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});

brd.create('line',[p0,p2],{straightFirst:false,straightLast:false,strokeColor:'black'});   // Hypotenuse
brd.create('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:'red'});     // sin
brd.create('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red'});     // cos

var t = brd.create('tangent',[p2],{visible:false});
var p5 = brd.create('intersection',[t,ax,0],{visible:false,name:'',withLabel:false});
var p6 = brd.create('intersection',[t,ay,0],{visible:false,name:'',withLabel:false});
brd.create('line',[p5,p6],{straightFirst:false,straightLast:false});                       // tan + cot
brd.create('line',[p0,p6],{straightFirst:false,straightLast:false,strokeColor:'green'});   // csc
brd.create('line',[p0,p5],{straightFirst:false,straightLast:false,strokeColor:'green'});   // sec

brd.create('text',[
        function(){return (p0.X()+p2.X())*0.5;},
        function(){return (p0.Y()+p2.Y())*0.5;},
        '1'],{});

brd.create('text',[
        function(){return (p2.X()+p4.X())*0.3;},
        function(){return (p2.Y()+p4.Y())*0.5;},
        'cos'],{});

brd.create('text',[
        function(){return (p2.X()+p3.X())*0.5;},
        function(){return (p2.Y()+p3.Y())*0.5;},
        'sin'],{});

brd.create('text',[
        function(){return 0.1+(p2.X()+p5.X())*0.5;},
        function(){return 0.1+(p2.Y()+p5.Y())*0.5;},
        'tan'],{});

brd.create('text',[
        function(){return 0.1+(p2.X()+p6.X())*0.5;},
        function(){return 0.1+(p2.Y()+p6.Y())*0.5;},
        'cot'],{});

brd.create('text',[
        function(){return -0.2+(p0.X()+p6.X())*0.5;},
        function(){return (p0.Y()+p6.Y())*0.5;},
        'csc'],{});

brd.create('text',[
        function(){return (p0.X()+p5.X())*0.5;},
        function(){return (p0.Y()+p5.Y())*0.5;},
        'sec'],{});