2D-Modell mit SVG+Javascript

Die Grafik zeigt ein Gitter von 60x40=2400 einzelnen Zellen. Auf die Zellen werden einige einfache Regeln angewendet, die man hier einstellen kann:
Farb-Tropfen:
Aus Einige Viele
Animation:
Langsam Normal
Drift:
Zerfall:
Aus Langsam Schnell
Diffusion:
Aus Gering Stark
Mit gedrückter Maustaste kann man auf der Grafik einen Farbfleck erzeugen.
Die Wirkung von Zerfall und Diffusion kann man am besten bei abgeschalteter Drift beobachten.

In diesem Beispiel werden mehrere moderne Web-Technologien kombiniert. Es ist relativ komplex und erfordert fortgeschrittene Kenntnisse zum Verständnis.

Verwandte Themen


HTML


Es gibt mehrere Möglichkeiten, um eine Objekt-Grafik in eine Webseite einzubetten. Hier wird dazu ein <iframe>-Element verwendet.

Alternativ (jedoch nicht von allen Browsern unterstützt) kann man dazu auch ein <img>-Element verwenden, genauso wie für eine → Pixel-Grafik.

Es ist wichtig, ein eindeutiges name-Attribut anzugeben. Damit ist eine ↓ Fern-Steuerung der Grafik mit Formular-Elementen möglich.



• Diese SVG-Objektgrafik bietet 2 verschiedene Methoden zur Steuerung.

• Mit der ↓ HTTP-GET-Methode kann man alle zur Steuerung des Modells verwendeten Daten bereits beim Laden angeben. Damit wird vor allem die Größe des Modells vorgegeben.

• Mit ↓ Formular-Elementen kann man alle Daten mit Ausnahme der Modell-Größe Live ändern, d.h. bei laufender Animation.


SmartPhones

beherrschen alle für dieses Beispiel verwendeten Technologien, insbesondere SVG. Der Bildschirm bietet jedoch nur sehr wenig Platz.

▶ Link zu einer SmartPhone-Version des Beispiels: Das Beispiel wird mit einem kleinen Gitter aus 25x25 Zellen geladen.
Die Seite wird von Google als 'Nicht-Mobil-geeignet' eingestuft, weil die 'Links zu eng beieinander liegen'.

Tatsächlich wirkt jede einzelne Zelle wie ein Link, weil man beim Anklicken das onmousedown-Ereignis auslöst, mit dem man Farb-Flecken erzeugen kann. Es ist nicht geplant, diesen 'Fehler' zu korrigieren.

SVG-Quelltext

◀   Ihr Browser hat diesen Text in der 'Programmiersprache' → SVG erhalten und daraus die Grafik erzeugt.

• Die Datei enthält 8 Zeilen → CSS-Code in einem <style>-Element, ca. 560 Zeilen Javascript-Code in einem <script>-Element.
Am Ende ist nur 1 SVG-Grafik-Objekt enthalten:
Das <rect id="mymargin"> Rechteck dient zur Umrandung der Grafik.
Das <g id="grid"> Gruppen-Element dient zur Zusammenfassung aller Zellen, enthält jedoch anfangs keine Elemente.

• Die Grafik kann beliebig viele Zellen enthalten. Sie sind daher nicht fix im SVG-Quelltext vorgegeben, sondern werden Live von der Javascript-Funktion draw_grid() erzeugt.

• Jede Zelle wird von der Javascript-Funktion draw_cell() als SVG <rect>-Rechteck-Element mit einem eindeutigen id-Attribut erzeugt.

• Man kann den ↗ SVG Quelltext der Objekt-Grafik in einer einfachen Text-Datei *.svg am eigenen PC speichern und mit jedem modernen Browser öffnen und verwenden (Entfernen sie vorher die Zeilen-Nummern mit Mausklick).
Ohne weitere Maßnahmen wird die ↗ Grafik mit Standard-Vorgaben angezeigt: 25x25 Zellen, langsam sinkende Farbtropfen.

• Im nächsten Kapitel ↓ GET-Argumente wird gezeigt, wie man die Grafik durch Änderung der Browser-Adresszeile steuern kann.

• Im Kapitel ↓ Formular-Steuerung wird gezeigt, wie man die Grafik mit Formularen (fern)-steuern kann.


Für die Anwendung genügen diese Feststellungen:
Man kann eine SVG-Objektgrafik mit ↓ HTTP-GET-Argumenten steuern. Mit Javascript kann man die Argument-Daten empfangen und decodieren.
Man kann Live beliebig viele Objektgrafik-Elemente erzeugen und ihre Eigenschaften (z.B. Farbe) ändern.
Man kann eine SVG-Objektgrafik mit ↓ Formular-Elementen steuern.

Steuerung mit GET-Argumenten


Die HTTP-GET Methode bietet die Möglichkeit, Daten (Argumente, Parameter) an das Ziel-Dokument zu senden. Mit diesen Daten kann man die Vorgaben ersetzen und Modelle 'nach Bedarf' erzeugen.

Dazu wird an die Adress-Zeile ein ? Zeichen angefügt, danach folgen die Argumente in der Form name=wert die voneinander durch & Zeichen getrennt werden.

Beispiele:
▶ Modell mit 70x30 Zellen
▶ Modell mit 50x50 Zellen und rascher Folge von Farb-Tropfen.
▶ Modell ohne Transport, Zerfall oder Diffusion.



Manuelle Änderung:
Man kann die Grafik in einem eigenen Browser-Tab oder -Fenster laden und die Adress-Zeile des Browsers manuell ändern. Mit der Return- oder Enter-Taste wird die Grafik mit den jeweils angegebenen Argumenten erneut geladen.

HyperLinks:
Bequemer anwendbar sind vor-programmierte HTML-Hyperlinks.
Mit diesem Link wird ein Modell mit 70x30 Zeilen angefordert:
<a href="model_color.svg?x=70&y=30" target="_blank"> </a>
Man kann mehrere dieser vor-programmierten Links in eine Webseite einsetzen und damit die jeweiligen Modelle anfordern.



Bei Web-EntwicklerInnen ist meist nur die Auswertung der GET-Argumente mit → PHP-Programmen bekannt.

Sie kann jedoch alternativ auch mit → Javascript erfolgen. Das hat u.a. diese Vorteile:
Der Webserver wird entlastet, weil dort keine Programme gestartet werden sondern lediglich eine (statische) Text-Datei zu liefern ist.
Die zahlreichen SVG-Elemente der Zellen sind im transportierten Quelltext nicht enthalten, sondern werden erst Live beim Client erzeugt. Das erspart z.B. bei einem Modell von 60x40 Zellen einen Quelltext von 2400 Zeilen !

Steuerung mit Formularen


Für dieses Beispiel wird das Formular etwas abweichend programmiert:

Weder die aktuelle Webseite noch die Grafik sollen nicht ersetzt werden.

Die Formular-Daten sollen an das Grafik-Dokument gesendet werden. Dieses soll jedoch nicht (so wie bei Anwendung der ↑ HTTP-GET-Methode) neu geladen werden, sondern bei laufendem Betrieb seine Eigenschaften ändern.

Die Formular-Daten sollen (ohne eigenen Absende-Button) automatisch nach jeder Änderung an das Grafik-Dokument gesendet werden.


<form>-Element

• Jedes Formular sollte je ein id- und name-Attribut mit dem gleichen Wert (hier: fdx) enthalten.

• Das Attribut action definiert, was beim 'Absenden' (submit() ) des Formulars passieren soll. Diese Methode wird hier jedoch nicht verwendet.

• Die Methode get gibt die verwendete → HTTP-Methode zur Übertragung der Formular-Daten an: Sie ist für eine Javascript-Funktion belanglos.

• Das Attribut onchange definiert, was bei einer Änderung der Formular-Daten passieren soll: In diesem Fall wird die Javascript-Funktion fdx_submit() gestartet (nächster ↓ Absatz).

<input>-Elemente

• Alle Options-Schalter einer Gruppe erhalten das gleiche name-Attribut.
• Das Attribut value gibt den jeweils gewählten Wert an. Der Wert ist immer ein Text (String) - in diesem Fall aus Ziffern - jedoch keine Zahl !



Die Funktion option_value_get() (nächster Absatz) liest den aktuellen Wert einer Gruppe von Options-Schaltern.
Das zu lesende Element wird in Objekt-Hierarchie formuliert:
document.[Formular-Name].[Element-Name]

Mit der Standard-Funktion parseInt() wird ein Text (String) aus Ziffern in eine Ganze Zahl umgewandelt.

Zuletzt wird eine zur Fernsteuerung vorgesehene Funktion des eingebetteten Grafik-Dokuments gestartet (hier grid_set_dx() )
Davor wird in Objekt-Hierarchie der Name jenes <iframe>-Elements angegeben, in welchem das Grafik-Dokument enthalten ist.


function option_value_get(obj) {
var s=-1; var v=null;
for(var i=0;i<obj.length;i++) {
if(obj[i].checked) {s=i; break;}
}
if(s>=0) {v=obj[i].value;}
return v;
}



Die Funktion erhält vom aufrufenden Programm den gewünschten Wert als Argument arg

Der Wert des Arguments arg wird in den gewünschten Typ umgewandelt. Für Ganze Zahlen wird dazu parseInt() verwendet, für Gleitkomma-Zahlen (so wie hier gezeigt) parseFloat()

Es kann vorkommen, dass eine Typ-Umwandlung keine Zahl (NaN) ergibt. In diesem Fall wird ein Vorgabe-Wert eingesetzt (hier v=0)

Der decodierte Zahlenwert wird auf den jeweils sinnvollen Bereich begrenzt (hier auf -2...v...+2)

Zuletzt wird der geprüfte Wert an jene Variable zugewiesen, welche das Modell steuert (hier an drift_x)
Die Animation verwendet stets die aktuellen Werte der zur Steuerung vorgesehenen Variablen. Jede Änderung wird daher ab dem nächsten Animations-Schritt berücksichtigst.


Die Entfernung aller Zwischen-Schritte und Prüfungen bringt allerdings in der Anwendung keinen merkbaren Vorteil, weil die dazu verwendete Zeit bei üblichen Anwendungen unmerkbar klein ist.

Bei der Programmierung von wieder-verwendbaren Dokumenten (wie dieser Grafik) sollte man umgekehrt damit rechnen, dass bei den steuernden Dokumenten Fehler auftreten, und diese im Programm nach Möglichkeit erkennen und korrigieren.



In beiden Versionen haben die Javascript-Funktionen Zugriff auf alle Elemente, d.h. sowohl auf die HTML-Formulare als auch auf die SVG Grafik-Elemente.

Details zur Inline-Einbettung von → SVG in HTML oder von → HTML in SVG

Fortgeschrittene EntwicklerInnen können versuchen, ein kombiniertes Inline-Beispiel (Formular + Grafik) aus dem frei zugänglichen Quelltext dieser Seite und der Objekt-Grafik herzustellen.

Zellen-Modelle


In der IT-Praxis werden meist wesentlich mehr Zellen und Algorithmen verwendet:

Das 2D-Beispiel dieser Seite verwendet 60x40=2400 Zellen und muss bei Berechnung jeder Zelle 8 Nachbarn berücksichtigen. Bei nur 1 Eigenschaft (Farbe), 2 Algorithmen und einer Wartezeit von 20ms ergibt das 2400x8x2x50≈2 Mio Rechnungen pro Sekunde. Dazu kommt die grafische Darstellung der Ergebnisse. Ein typischer PC wird damit bereits relativ stark belastet.

Ein einfaches 3D-Beispiel mit nur 1000x1000x1000=1 Milliarde Zellen muss zahlreiche Eigenschaften und für jede Zelle 26 Nachbarn berücksichtigen. Die rasch zunehmende Anzahl der Rechnungen und die in der Praxis wesentlich aufwändigeren Algorithmen lassen sich meist nur mit sehr leistungsstarken Computern bewältigen.