JSXGraph

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

Dynamische Mathematik mit JSXGraph

Seit Anfang 2008 wird am Lehrstuhl für Mathematik und ihre Didaktik der Universität Bayreuth die Dynamische-Mathematik-Software JSXGraph entwickelt. Der innovativste Unterschied zu anderen Geometrie-/Mathematik-Programmen mit vergleichbarer Funktionalität ist erst auf den zweiten Blick zu sehen: JSXGraph ist weder ein eigenständiges Windows-Programm noch ein Java-Applet, sondern JSXGraph ist vollständig in JavaScript programmiert!

Was ist JavaScript? JavaScript ist eine lange Zeit belächelte, interpretierte Programmiersprache, die schon seit 1996 von praktisch allen Web-Browsern unterstützt wird. Jedoch erst durch das sogenannte Web 2.0 wurde die tatsächliche Leistungsfähigkeit von JavaScript erkannt und die in den Browsern eingebauten Interpreter optimiert. Mittlerweile kommt kaum mehr ein Web-Auftritt ohne JavaScript aus und die Browser versuchen sich in der Ausführungsgeschwindigkeit gegenseitig zu übertrumpfen. Zum Zeichnen im Web-Browser verwendet JSXGraph zwei Vektorgrafik-Formate: Im Internet Explorer wird die Sprache VML verwendet, in allen anderen Browsern die Sprache SVG.

Das Resultat ist, dass zum Betrachten einer JSXGraph-Konstruktion im Web-Browser keinerlei Plugin mehr benötigt wird. Die allseits bekannte Angst, ob im Computerraum wirklich auch das richtige Java-Plugin auf jedem Computer installiert ist, gehört damit der Vergangenheit an. Wenn der Web-Server so konfiguriert ist, dass die Inhalte komprimiert ausgeliefert werden (was in jedem Fall anzuraten ist), benötigt JSXGraph gerade einmal 80 kByte zur Übertragung.

Heutzutage wird Dynamische Mathematik zumeist mit Java-Applets realisiert, z.B. mit dem ausgezeichneten GeoGebra. Die Frage ist jedoch, ob auf den Computern der Zukunft Java-Applets überhaupt noch lauffähig sein werden. Der Trend scheint im Moment zu immer kleineren Computern zu gehen, die nicht mehr ausschließlich mit Intel-kompatible Prozessoren laufen und Windows als Betriebssystem besitzen, man denke nur an das iPhone von Apple und das ChromeOS von Google. Auf diese Situation sollten wir Dynamische-Mathematik-Enthusiasten vorbereitet sein. JSXGraph zeigt, dass Alternativen vorhanden sind, Konstruktionen werden auf dem iPhone (ab SDK 2.1) angezeigt (Interaktion ist momentan leider noch nicht möglich).

Eine weitere Alternative zu Java ist Flash, in Frankreich wird damit von einer Lehrer-Organisation das hervorragende Tracenpoche entwickelt. Leider beschränken sich die Entwickler in der Verbreitung auf Frankreich.

Die Programmbibliothek JSXGraph

JSXGraph richtet sich nicht direkt an "Endanwender", es ist nicht gedacht als interaktives Konstruktionsprogramm wie GEONExT oder GeoGebra. Das bedeutet, es gibt noch keine Programmoberfläche, auf der durch Mausklicks eine Konstruktion erstellt werden kann. JSXGraph ist eher dazu gedacht:

  • Bereits existierende GEONExT anzuzeigen, siehe dieses Beispiel,
  • Intergeo-Konstruktionen anzuzeigen, siehe dieses Beispiel. Intergeo ist ein EU-Projekt, in dem sich die führenden europäischen Anbieter von (freier oder kommerzieller) Geometrie-Software zusammmengeschlossen haben, um den gegenseitigen Austausch geometrischer Konstruktionen zu ermöglichen,
  • Spezial-Anwendungen durch Experten zu programmieren, siehe das JSXGraph-Wiki mit einer Reihe von Beispielen.

Aber natürlich steht es jedem frei, JSXGraph mit einer Oberfläche zu versehen. Denn JSXGraph ist Open-Source-Software, die Quellfiles liegen bei Sourceforge und können jederzeit heruntergeladen werden. Wenn Sie Unterstützung brauchen, wenden Sie sich bitte gerne an uns.

Der Funktionsumfang

Wie im JSXGraph-Wiki zu erleben ist, hat JSXGraph mittlerweile einen enormen Funktionsumfang. Hier ist ein Auszug der Möglichkeiten:


Es gibt JSXGraph-Plugins für MediaWiki, WordPress und moodle, die eine leichte Integration von JSXGraph in diese System ermöglichen. JSXGraph ist kompatibel zu ASCIIMathML, d.h. es können LaTeX-artige mathematische Symbole verwendet werden, siehe dazu die Diskussion im Moodle-Forum (als Gast anmelden). Der finnische Lehrer Mauno Korpelainen verwaltet eine aktuelle Version von ASCIIMathML, die kompatible zu JavaScript und moodle ist.

Es folgen noch ein paar Beispiele als Appetitanreger.

Herzliche Grüße, Alfred Wassermann

Beispiele

Geometrie

Analysis

Sonstiges

Sourcecode dazu:

<jsxgraph width="800" height="700" box="box3"> 			
 var board = JXG.JSXGraph.initBoard('box3', {originX: 300, originY: 300, unitX: 50, unitY: 50});
 board.suspendUpdate();
 var S = board.createElement('slider', [[-5,-6],[5,-6],[0,0.89,1]], {name:'S'});
 var hue = board.createElement('slider', [[-5,-7],[5,-7],[0,15,36]], {name:'color'});
 var points = new Array();
 points[0] = board.createElement('point',[5, 5], {name:' '});	
 points[1] = board.createElement('point',[-5, 5], {name:' '});	
 points[2] = board.createElement('point',[-5, -5], {name:' '});	
 points[3] = board.createElement('point',[5, -5], {name:' '});	
 
 function quadrangle(pt, n) {
  var col;
  var arr = new Array();
  for(var i = 0; i < 4; i++) {
   arr[i] = board.createElement('point', 
         [function(t) {
            return function () {var x = pt[t].X(); 
                                var x1 = pt[(t+1)%4].X(); 
                                var s = S.Value();
                                return x+(x1-x)*s;
                         }}(i), 
          function(t) {
            return function () {var y = pt[t].Y(); 
                                var y1 = pt[(t+1)%4].Y(); 
                                var s = S.Value();
                                return y+(y1-y)*s;
                         }}(i)
          ], 
          {style:3, name:"",withLabel:false,visible:false});
  }
  col =  function(){return JXG.hsv2rgb(hue.Value()*n,0.5,0.9);};
  board.createElement('polygon',pt, {fillColor:col});
  if(n>0)
    quadrangle(arr, --n);
 }
 quadrangle(points,30);
 board.unsuspendUpdate();
</jsxgraph>

Turtle-Grafik

Eingabe-Fenster

<shtml hash="d4c438dd5a80ff1669948cc555ed1687"><html key="turtle1"><form><textarea id="inputtext" rows=5 cols=35 wrap="off" style="width:600px;">t.fd(100);</textarea>
<input type="button" value="run" onClick="run()"><input type="button" value="clear" onClick="clearturtle()"><input type="button" value="clear log" onClick="clearlog()"></form></shtml>

Hier ist eine Liste der verfügbaren Turtle-Befehle.

Ein etwas komplizierteres Beispiel ist

for (var i=0;i<100;i++){
 t.forward(i*3);
 t.left(71);
}

Man kann dieses Beispiel mit copy and paste oben eingeben und man erhält eine neue Spur der Turtle.

Ausgabe-Fenster

Update 26.1.2010

Ab Version 0.80 läuft JSXGraph auch auf dem iPhone und Android-basierten multi-touch Geräten. Zur Demonstration siehe die Beispiele Euler-Gerade und Bezier-Kurven auf YouTube.

Linkliste