Simulationen ( mathematische Berechnungen, Statistik, Festigkeitslehre, Statik, CAD, usw. ) liefern vielfach zahlreiche Werte und Abhängigkeiten, die einer übersichtlicheren Visualisierung bedürfen. Beispiele: Statistik-Visualisierung, technischen Diagrammen, Balkendiagramme, Tortendiagramme, schiefer Wurf, Simulation der Gartengestaltung, usw.
Es ist mind. eine Bibliothek zu schreiben, die ( möglichst univeresll, erweiterbar ) Simulationen in der realen 2D-Welt und deren grafischen Darstellungen unterstützt. Zu Simulationen gehören i.a. ( sehr ) viele Parametern. Die Simulation, insbesondere auch die Parametern-Übergabe und Initialisierungen sollen auch durch ungschultes Personal möglich sein. Beispiel: Wie kann auf einfache Weise die Eingabe von Mathe-Funktionen und die grafische Darstellung von Funktionen erfolgen?
Zu den 2D-Weltkoordinaten (x,y) gehören die Bereiche xMin <= x <=; xMax und yMin <= y <= yMax Reine grafische Transformationen ( Matrizen ) scheiden aus, weil in der 2D-Welt i.a. Berechnungen, wie z.B. tatsächliche Polygon-Fläche, erforderlich sind.
y-Achse
|
yMax | . . . . . . . . . . . . . . . . .
| .
| .
| yMin <= y <= yMax .
| .
| xMin <= x <= xMax .
| .
| .
yMin |---------------------------------|--- x-Achse
xMin xMax
Beispiel: Zu y = sin(x) gehört
*xMin_yMin_xMax_yMax: -10 10 -2 2 anisotop
Eine Welt-Viewport-Abbildung macht aus (x, y) ein (i, j). Zu einer Welt gehört "isotrop" bzw. "anisotrop".
*iMin_jMin_iMax_jMax: 0 0 600 400
Zu den 2D-Gerätekoordinaten (i, j) gehören die Bereiche iMin <= i <= iMax und jMin <= j <= jMax
iMin=0 iMax = cxt.canvas.width;
jMin=0 |-------------------------|------- i-Achse
| jMin <= j <= jMax .
| .
| iMin <= i <= iMax .
| .
jMax | . . . . . . . . . . .. . jMax = cxt.canvas.height;
|
|
j-Achse
Ist el das Canvas-Tag-Element, so kann die Canvas-Breite/Höhe mit el.width, el.height oder mit cxt.canvas.width, cxt.canvas.height gelesen/gesetzt werden. Die äußere Canvas-Positionierung kann mit CSS erfolgen.
Beim Programmieren werden typischer Weise die Funktionsquelltexte übersetzt / gelinkt. Bei praktischen Aufgaben kann ein "Laufzeitparser" nützlich sein. Soll z.B. ein Zeichenprogramm den Graph von Funktionen zeichen, die der Benutzer sich ausdenkt, so soll aus der mathematisch geschriebenen Text ( "Funktionseingabe" ) eine nativ Funktion werden, die dann für die grafisch Darstellung verwendet wird.
// Beispiel für lediglich ein Argument t:
var fn_str = "function (t) { return Math.sin(t); }";
var fn_func = new Function("t", fn_str);
Zu einer mathematischen Funktion gehören i.a. "anisotrope" Intervalle, wie z.B.
Beispiel: Zu y = sin(x) gehört *xMin_yMin_xMax_yMax: -10 10 -2 2 anisotop Eine Welt-Viewport-Abbildung macht aus (x,y) ein (i,j). Zu einer Welt gehört "isotrop" bzw. "anisotrop". *iMin_jMin_iMax_jMax: 0 0 600 400 Prinzip der Umrechnung von (x,y) nach (i,j): i = iMin + (iMax-iMin)/(xMax-xMin)*(x-xMin); j = jMin + (jMax-jMin)/(yMax-yMin)*(y-yMin); entsprechend x = ( ... berechnet mit i ) y = ( ... berechnet mit j )
Siehe z.B. Mathematische Funktionen .
Hier sind einfache, unfertige, fehlerhaftes, einführende Beispiele, die fuer die eigene Lösung hilfreich sein können. Siehe z.B. Flächenberechnung ( geschlossener Polygonzug ) und Canvas-Lehrbeispiele und Splines ( Einfuehrung ).
Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr