|
|
Zeile 1: |
Zeile 1: |
| 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!): | | 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!): |
| | | |
- | <jsxgraph width="600" height="600" box="box"> | + | <jsxgraph width="600" height="600"> |
- | var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, grid:true, unitX: 100, unitY: 100}); | + | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,2,2,-2], axis:true}); |
- | var ax = brd.createElement('line',[[0,0],[1,0]],{visible:false});
| + | |
- | var ay = brd.createElement('line',[[0,0],[0,1]],{visible:false});
| + | |
| | | |
- | var p0 = brd.createElement('point',[0,0],{fixed:true,visible:false}); | + | var p = []; |
- | var p1 = brd.createElement('point',[1,0],{name:'',visible:false,fixed:true}); | + | for (var i=0; i<4; i++) { |
- | var c = brd.createElement('circle',[p0,p1],{dash:2,strokeWidth:1,strokeOpacity:0.6});
| + | p.push(brd.create('point', [Math.random()*3.6-1.8, Math.random()*3.6-1.8])); |
- | var p2 = brd.createElement('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 p4 = brd.createElement('point',[0.0,function(){return p2.Y();}],{visible:false,name:'',withLabel:false});
| + | |
| | | |
- | brd.createElement('line',[p0,p2],{straightFirst:false,straightLast:false,strokeColor:'black'}); // Hypotenuse
| + | var pol = brd.create('polygon',p,{ |
- | brd.createElement('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:'red'}); // sin
| + | withLines:false, |
- | brd.createElement('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red'}); // cos
| + | withLabel: true, |
- | | + | name: function () { |
- | var t = brd.createElement('tangent',[p2],{visible:false}); | + | return "lala " + p[1].Dist(p[2]).toFixed(2) + "m"; |
- | var p5 = brd.createElement('point',[brd.intersectionFunc(t,ax,0)],{visible:false,name:'',withLabel:false});
| + | }, |
- | var p6 = brd.createElement('point',[brd.intersectionFunc(t,ay,0)],{visible:false,name:'',withLabel:false});
| + | id: p[0].X() + "_" + p[1].Y(), |
- | brd.createElement('line',[p5,p6],{straightFirst:false,straightLast:false}); // tan + cot
| + | label: {offset:[-200,100]} // Pixel values |
- | brd.createElement('line',[p0,p6],{straightFirst:false,straightLast:false,strokeColor:'green'}); // csc
| + | }); |
- | brd.createElement('line',[p0,p5],{straightFirst:false,straightLast:false,strokeColor:'green'}); // sec
| + | |
- | | + | |
- | brd.createElement('text',[
| + | |
- | function(){return (p0.X()+p2.X())*0.5;},
| + | |
- | function(){return (p0.Y()+p2.Y())*0.5;}, | + | |
- | '1'],{});
| + | |
- | | + | |
- | brd.createElement('text',[
| + | |
- | function(){return (p2.X()+p4.X())*0.3;},
| + | |
- | function(){return (p2.Y()+p4.Y())*0.5;},
| + | |
- | 'cos'],{});
| + | |
- | | + | |
- | brd.createElement('text',[
| + | |
- | function(){return (p2.X()+p3.X())*0.5;},
| + | |
- | function(){return (p2.Y()+p3.Y())*0.5;},
| + | |
- | 'sin'],{});
| + | |
- | | + | |
- | brd.createElement('text',[
| + | |
- | function(){return 0.1+(p2.X()+p5.X())*0.5;},
| + | |
- | function(){return 0.1+(p2.Y()+p5.Y())*0.5;},
| + | |
- | 'tan'],{});
| + | |
- | | + | |
- | brd.createElement('text',[
| + | |
- | function(){return 0.1+(p2.X()+p6.X())*0.5;},
| + | |
- | function(){return 0.1+(p2.Y()+p6.Y())*0.5;},
| + | |
- | 'cot'],{});
| + | |
- | | + | |
- | brd.createElement('text',[
| + | |
- | function(){return -0.2+(p0.X()+p6.X())*0.5;},
| + | |
- | function(){return (p0.Y()+p6.Y())*0.5;},
| + | |
- | 'csc'],{});
| + | |
- | | + | |
- | brd.createElement('text',[
| + | |
- | function(){return (p0.X()+p5.X())*0.5;},
| + | |
- | function(){return (p0.Y()+p5.Y())*0.5;},
| + | |
- | 'sec'],{});
| + | |
| </jsxgraph> | | </jsxgraph> |
| | | |