Zufalls-Objekt-Grafik

Browser-Ansicht

  Größe: 400x400 Pixel


Programmierung

Kapitel dieser Seite


Die in diesen Kapiteln gezeigten Quelltext-Beispiele sind stark gekürzt, damit die wesentlichen Elemente deutlich erkennbar sind. Entnehmen sie die Details dem jeweiligen Original Quelltext.

parent-HTML


Formular

Der SchiebeRegler ist als <input>-Element vom Typ range in einem Formular enthalten:
<form name="f1">
<input type="range" name="rng1" onchange="do_f1rng1()"/>
</form>
Sowohl das Formular als auch das Regler-Element müssen eindeutige name-Attribute erhalten.
Das Regler-Element muss ein onchange-Attribut erhalten, welches den Namen jener Javascript-Funktion angibt, die bei einer Änderung (Bewegung des Reglers) gestartet wird (hier: do_f1rng1() )
Details zum Thema → SchiebeRegler


InnenRahmen

Die Grafik ist mit einem HTML <iframe>-(InnenRahmen)-Element eingebettet:
<iframe name="rsvg" src="random_art.html">
</iframe>
Das Regler-Element muss ein eindeutiges name-Attribut enthalten.
Das src-Attribut gibt den Pfad zur child-(Grafik)-Datei an.


Die ungekürzten Details finden sie im Quelltext dieser Webseite

parent-Javascript


SchiebeRegler onchange Event-Handler

Wenn das <input>-Element des Reglers ein passendes onchange-Attribut enthält, dann wird bei jeder Bewegung (Änderung) diese Funktion gestartet:
function do_f1rng1() {
var s = document.f1.rng1.value;
s = parseInt(s);
rsvg.my_size = s;
rsvg.draw();
}

Der aktuelle Wert des Reglers wird (als Text !) gelesen und an die Variable s zugewiesen. Der Text (String) wird mit der Standard-Funktion parseInt() in eine ganze Zahl umgewandelt und an die Javascript-Variable my_size des ↓ child-Dokuments zugewiesen.
Zuletzt wird die Grafik mit der Funktion draw() des ↓ child-Dokuments neu gezeichnet.
Das child-Dokument wird adressiert, indem man den Namen jenes <iframe>-Elements voransetzt, mit dem es eingebettet wurde (hier rsvg).


Die ungekürzten Details finden sie im Quelltext dieser Webseite

child-HTML


Das Beispiel verwendet keine externen Resourcen und ist daher unbeschränkt portabel.
Sie können den ↗ Quelltext anzeigen, die Zeilen-Nummern mit MausKlick löschen und in einer einfachen Text-Datei *.html am eigenen Arbeits-PC speichern: Sie lässt sich mit jedem modernen Browser anzeigen oder in eigene Webseiten einbetten.


Dieses <meta>-Element bewirkt die → automatische Skalierung für Mobil-Geräte:
<meta name="viewport" content="width=device-width/>

Das <body>-Element enthält lediglich ein leeres <svg>-Element:
<body onload="do_onload()">
<svg></svg>
</body>
Das <body>-Element muss ein onload-Attribut enthalten: Die damit angegebene Javascript-Funktion wird nach dem vollständigen Laden aller Elemente (hier: des einzigen und darüber hinaus auch leeren <svg>-Elements) ausgeführt.

child-SVG


Im Original ↗ Quelltext enthält das <svg>-Element lediglich dieses leere Gruppen-Element
<g id="g1"></g>
In diesem Kapitel wird ein Quelltext-Muster gezeigt, damit man eine realistische Vorstellung davon erhält, welche Grafik-Elemente mit den ↓ Javascript-Funktionen Live erzeugt werden.


Muster-Datei

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g id="g1" transform="translate(100,100)">
<path d="M5 -43 T14 -10 T-17 -45 T35 -22" fill="#F00"/>
<path d="M29 -13 T16 46 T-30 -39" fill="#0F0"/>
<path d="M-39 26 T24 39 T18 39 T-3 -27 T47 -39" fill="#00F"/>
<path d="M-7 14 T46 -29 T-50 12 T-33 -29 T24 -23" fill="#F0F"/>
<path d="M-25 7 T30 22 T31 26 T33 -6 T-45 50 T43 13" fill="#0FF"/>
</g>
</svg>

◀   Wenn ihr Browser-Programm diesen Text in der 'Programmiersprache' → SVG erhält, dann erzeugt er daraus eine Objekt-Grafik, die ähnlich aussieht wie das oben gezeigte ↑ Live-Beispiel.

Sie können den Text in einer Datei *.svg am eigenen PC speichern und mit jedem modernen Browser öffnen. Diese Grafik bleibt allerdings statisch (unverändert).



Alle weiteren Grafik-Objekte sind innerhalb dieser Gruppe angeordnet. Ihre Koordinaten werden daher sinnvoll aus dem Bereich -100...x...+100 sowie -100...y...+100 gewählt.


Das M-Element (MoveTo) definiert den Anfang des jeweiligen Pfades.

Jedes T-Element erzeugt eine quadratische Bezier-Kurve zu den angegebenen Koordinaten.
Der Text des d-Attributs kann beliebig viele weitere T-Elemente enthalten.

Das fill-Attribut gibt die Farbe der Füllung in → CSS-Syntax an.

SVG Pfad-Elemente bei W3Schools, MDN, W3C

child-Javascript


Tipp: Laden sie den Quelltext mit RechtsKlick in einem neuen Browser-Fenster:
So können den Original Quelltext bequem neben den Kommentaren dieser Seite anzeigen.



Zuerst werden mit Funktion get_arguments() allfällige HTTP-GET-Argumente isoliert und mit Funktion check_arguments() verarbeitet.

Danach wird die Grafik mit Funktion draw() (erstmalig) gezeichnet.



Die Funktion get_arguments() isoliert allfällige GET-Argumente im Array geta. Sie ist allgemein programmiert und lässt sich auf jedes Dokument anwenden.

Die Funktion check_arguments() ist speziell für dieses Dokument programmiert. Wenn ein GET['size'] Argument vorliegt, dann wird sein Wert an die globale Variable my_size zugewiesen. Diese Variable bestimmt die Größe der nächsten Zeichnung.

Details zur Verwendung der → HTTP-GET-Methode mit → Javascript oder → PHP.



Teil-Aufgabe SVG-Size
Das <svg>-Element wird mit seinem eindeutigen id-Attribut adressiert. Die aktuelle Größe wird von der Variablen my_size gelesen und an die CSS-style-Eigenschaften des Elements zugewiesen.

Teil-Aufgabe Center
Das Koordinaten-System wird in den Mittelpunkt der neuen Grafik verschoben. Dazu wird das transform-Attribut des Gruppen-Elements <g id="g1"> geändert. Das Element wird mit seinem eindeutigen id-Attribut adressiert, danach wird mit der Standard-Methode setAttribute() der neue Wert des Attributs zugewiesen.

Teil-Aufgabe Clear
Alle aktuell vorhandenen <path>-Elemente werden gelöscht. Dazu wird das gleiche Gruppen-Element adressiert. In einer Schleife werden alle darin enthaltenen child-Elemente mit der Standard-Methode removeChild() gelöscht.

Teil-Aufgabe Complexity
Die Variablen my_npath bzw. my_pathlength bestimmen Anzahl und mittlere Länge der zu erzeugenden <path>-Elemente. Ihre Werte werden abhängig von der Größe mit Zufalls-Methoden festgelegt.

Teil-Aufgabe Create Drawing
In einer Schleife werden mit der Funktion create_path() so viele neue <path>-Elemente erzeugt, wie die Variable my_npath angibt.



Die Zuweisung von Attributen erfolgt - genauso wie bei HTML-Objekten - mit der Standard-Methode setAttribute()
Die Details der Attribute werden mit 3 ausgelagerten Hilfs-Funktionen berechnet:

Funktion random_coordinate() erzeugt eine zufällige XY-Koordinate innerhalb der durch die Größe gesetzten Grenzen.

Funktion random_pathlength() berechnet die (zufällige) Anzahl von Stützpunten für den jeweiligen Pfad.

Funktion random_color() erzeugt die → CSS-Beschreibung einer zufälligen Farbe.

Strategie



Die meisten für das Web verwendeten Programmiersprachen werden am Webserver-PC ausgeführt, z.B. → PHP. In diesem Fall sind häufige Wiederholungen besonders ungünstig: Die Programme binden wertvolle Server-Resourcen und belasten das Netzwerk, weil jedesmal der gesamte SVG-Quelltext transportiert wird. Das macht den Server auch für solche Clients langsamer, welche diese Seite gar nicht verwenden.

Javascript ist besonders günstig, weil die Programme dezentral auf den Clients (Arbeits-PC) ausgeführt werden. Der gesamte Quelltext ist in einer statischen Text-Datei enthalten, die vom Server mit geringem Aufwand und nur 1mal an jeden Client versendet wird. Alle weiteren Änderungen brauchen weder Server noch Netzwerk und werden daher am eigenen Arbeits-PC ca. 100...1000mal schneller ausgeführt.



Server-Programme sind (nur dann) sinnvoll, wenn vertrauliche Daten behandelt werden, oder wenn man Server-Resourcen (z.B. eine → Datenbank) verwendet.

Auch in diesen Fällen kann man → Javascript + AJAX einsetzen und die Server-Programme auf das notwendige Minimum beschränken.

Diagramm einer HTTP-Client-Server Architektur, Live → HTTP-Experimente und Details zur → HTTP-GET-Methode mit Javascript und mit PHP.



Nach der Herstellung wird die Grafik nicht mehr geändert (abgesehen von der nächsten komplett neuen Herstellung). Es werden jedenfalls keine Teile bewegt oder abgedeckt. Daher könnte man die Aufgabe theoretisch auch mit Pixel-Grafik lösen.

Die Programmierung einer Pixel-Grafik mit → Javascript wird im Kapitel → Canvas-Grafik mit Beispielen beschrieben. Javascript + Canvas wird ebenfalls mit großer Geschwindigkeit am Client-PC hergestellt.

Im Kapitel → Rechteck wird eine einfache Aufgabe zum Vergleich mit mehreren unterschiedlichen Methoden gelöst.