Ajaxschmiede.de

Angeregt durch einen Artikel von Lutz Tautenhahn über das Zeichnen von Diagrammen und Funktionen mittels Javascript überlegte ich mir, ob es mit Hilfe der Javascript-Bibliothek flot, über die wir bereits berichteten, nicht ebenso möglich ist, mathematische Funktionen darzustellen.

Bereits nach kurzer Zeit hatte ich es geschafft, meine erste Funktion mittels Javascript und flot zu zeichnen. Als mathematisch geprägter Mensch war ich mit den Kompromissen, die ich in Bezug auf das Aufstellen von Gleichungen eingehen musste, jedoch nicht zufrieden und wollte Abhilfe schaffen.

Um es vorweg zu nehmen: Ich hatte Erfolg. Das Ergebnis meiner Bemühungen kann man in dieser Demonstration sehen, die es auch erlaubt komplexere Funktionen zu visualisieren

Das Script macht massiven Gebrauch von regulären Ausdrücken – zum einen um die eingegebene Funktion zu überarbeiten, zum anderen zum darstellen.

Kernstück des Zeichnens von Gleichungen ist die folgende for-Schleife, die einerseits die Aufgabe hat das x in der Funktion bei jedem Durchlauf gegen den Zählerwert zu ersetzen und andererseits das benötige Array, das an flot übergeben wird, bestehend aus x- und y-Wert aufzubauen:

for ( var i = startwert; i <= endwert; i += schrittweite ) { ausgabe = funktion.replace(/x/gi, i); var1.push([i, eval(ausgabe)]); } [/source] Das übrige Javascript dient, wie bereits erwähnt, dazu das Aufstellen von Funktionen sehr zu vereinfachen und für den Menschen intuitiver zu gestalten. Reguläre Ausdrücke übersetzen diese Kürzel und Kurzschreibungweisen in für den Browser verständliche Operationen. Folgende Vereinfachungen habe ich implementiert:

• 2x anstatt 2*x
• x(x+2) anstatt x*(x+2)
• x[5] bzw. (x+2)[5] anstatt Math.pow(x, 5) bzw. Math.pow(x+2, 5) zum Potenzieren
• ² und ³ wird akzeptiert
• Leerzeichen können beliebig gesetzt werden
• gebrochene Zahlen können sowohl mit , als auch mit . geschrieben werden

Ich werde an meinem Script weiter arbeiten, da ich noch etliche Ideen habe, die ich gern umsetzen will.

Unter anderem z.B.

• Anzeigen von mehr als einer Gleichung
• Bilden von Ableitungen und Stammfunktion
• Darstellen einer Funktionenschar (Funktion mit 2 Variablen)
• Scrollen innerhalb der Grafik
• Angabe von Extrema und Wendepunkten (Annäherung oder Gleichung) und Markieren dieser
• Möglichkeit des Einzeichnens der Tangente an einen Punkt (samt Funktion?)

Zur Demoseite