JSX Trigonometrische Funktionen
Aus Wiki1
(Unterschied zwischen Versionen)
Zeile 2: | Zeile 2: | ||
<jsxgraph box="box" width="400" height="400"> | <jsxgraph box="box" width="400" height="400"> | ||
- | var | + | var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3]}); |
- | + | var ax = brd.create('line',[[0,0],[1,0]],{visible:false}); | |
- | var | + | var ay = brd.create('line',[[0,0],[0,1]],{visible:false}); |
- | var | + | |
- | var | + | var p0 = brd.create('point',[0,0],{fixed:true,visible:false}); |
- | var | + | 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 | |
- | var | + | |
- | + | 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'],{}); | ||
</jsxgraph> | </jsxgraph> | ||
[[Kategorie:Bilder]] | [[Kategorie:Bilder]] | ||
[[Kategorie:Wissen]] | [[Kategorie:Wissen]] |
Version vom 20:06, 23. Nov. 2013
Mit Hilfe des Programmpakets JSXGraph (siehe http://jsxgraph.uni-bayreuth.de/wp/) können komplexe, interaktive Grafiken nur mit Hilfe von JavaScript in Webseiten integriert werden. Hier ein Beispiel zur Darstellung der Trigonometrischen Funktionen (der rote Punkt kann mit der Maus bewegt werden!):