OpArt mit Objekt-Grafik

Rotorelief

Dieses 'Rotorelief' wurde von Marcel Duchamp (1887‑1968) entwickelt.
Das Beispiel ist eine Objekt-Grafik, in welcher 14 Kreise auf eindrucksvolle Weise kombiniert sind. Die Original-Farben Schwarz+Weiß wurden hier durch Schwarz+Gelb ersetzt.

Geschwindigkeit und Richtung:


  Automatik
• Grafik und Animations-Programm sind in einer (statischen) Datei opart.svg enthalten, die man herunterladen und an jedem PC mit dem Browser ansehen kann.

• Steuerung und Animation werden mit kleinen Programmem in der Programmiersprache → Javascript ausgeführt.
Die Programme werden am eigenen Arbeits-PC ausgeführt. Zur Anzeige werden die Grafik-Objekte laufend in Bildpunkte (Pixel) umgewandelt. Dieses Beispiel mit rascher Änderung großer Flächen stellt hohe Anforderungen an die PC-Leistung. Wenn die PC-Resourcen nicht ausreichen oder durch andere Programme besetzt sind, dann wird die Darstellung ruckartig.

Mit diesem Link wird die ↗ Objekt-Grafik in einem eigenen Browser-Tab angezeigt.

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.


• Jedes Formular sollte je ein id- und name-Attribut mit gleichen Werten enthalten.

• Die Methode get gibt die verwendete → HTTP-Methode zur Übertragung der Formular-Daten (Argumente, Parameter) an.

• Das Attribut oninput definiert, was während einer Änderung der Eingabe-Daten passieren soll: In diesem Fall wird die Javascript-Funktion opart_set() aufgerufen.

• Das Attribut onchange definiert, was nach einer Änderung der Eingabe-Daten passieren soll: In diesem Fall wird die Javascript-Funktion opart_auto() aufgerufen.

Details zu → Formular-Ereignissen (Events) und zu den hier verwendeten ↓ Javascript-Funktionen.

Parent-Javascript


◀   Das links gezeigte Javascript-Programm ist im Quelltext dieser Webseite enthalten. Es dient zur 'Fernsteuerung' der Objekt-Grafik.

• Mit dem Ausdruck document.f1.rb1.value wird der aktuelle Wert aus dem ↑ HTML-Formular gelesen. Diese Formulierung ist 'Objekt-orientiert': Man gibt alle Objekte in der Reihenfolge ihrer Hierarchie an, zuletzt die gewünschte Eigenschaft (Property).

• Mit der Standard-Funktion parseFloat() wird der aus dem Formular gelesene Text in eine Gleitkomma-Zahl umgewandelt und an die Variable dw zugewiesen..

• Die ↓ Javascript-Funktion opart_set_dw(dw) der eingebetteten Objekt-Grafik wird aufgerufen. Diese Funktion steuert Richtung und Geschwindigkeit der Animation. Vor den Namen der Funktion wird der Name jenes Elements gesetzt, in dem sich das Child-Dokument befindet (hier: graframe).


◀   Das links gezeigte Javascript-Programm ist im Quelltext dieser Webseite enthalten. Es dient zur 'Fernsteuerung' der Objekt-Grafik.

• Mit dem Ausdruck document.f1.cb1.checked wird der aktuelle Zusrtand des CheckBox-Element aus dem ↑ HTML-Formular gelesen. Diese Formulierung ist 'Objekt-orientiert': Man gibt alle Objekte in der Reihenfolge ihrer Hierarchie an, zuletzt die gewünschte Eigenschaft (Property).

Wenn das Kästchen markiert ist, dann wird die Javascript-Funktion opart_set_auto() der eingebetteten Objekt-Grafik aufgerufen, andernfalls wird die Funktion opart_set() des eigenen Dokuments aufgerufen, welche die Automatik abschaltet.

SVG-Quelltext


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

• Das <desc>-Element enthält beschreibenden Text (Meta-Daten).
Man kann daher in SVG-Dateien nach Stichworten suchen.

• Das <style>-Element enthält → CSS-Anweisungen. An dieser Stelle werden die beiden verwendeten Farben in den CSS-Klassen c1,c2 zentral festgelegt.

• Das <script>-Element enthält Daten und Funktionen in der Programmiersprache ↓ Javascript. Sie dienen zur Animation = zum Drehen des SVG Gruppen-Elements <g id="opart">

• Zuletzt folgen die 14 verwendeten Kreise als <circle>-Elemente.

• Sie sind in ein Gruppen-Element <g id="opart"> eingeschlossen, welches mit der ↓ Javascript-Funktion rotate() gedreht wird.

• Alle SVG-Elemente sind nochmals in eine Gruppe <g> eingeschlossen, welche um je 300 Pixel in X- und Y-Richtung verschoben wird. Damit wird der Nullpunkt des Koordinaten-Systems in den Mittelpunkt der Grafik verschoben. Das erleichtert die Konstruktion.

• Man kann den SVG Quelltext in einer Datei am eigenen PC speichern, mit jedem modernen Browser öffnen und damit die Grafik anzeigen. Allerdings fehlen in diesem Fall die hier angebotenen interaktiven Bedienungs-Elemente.

Grafik-Javascript


Die Animations-Funktion rotate() umfasst nur 5 Zeilen. Die übrigen Funktionen dienen hauptsächlich zur interaktiven Fernsteuerung.


• Die Variable n bezeichnet als Objekt die gesamte Grafik, die im SVG-Code als Gruppen-Element <g id="opart"> enthalten ist.
• Die Variable do_auto steuert die automatische Änderung des Winkel-Inkrements (= die Funktion do_auto() )
• Die Variable delay_1_ms steuert die Wartezeit zwischen 2 aufeinander folgenden Animations-Schritten.
• Die Variable delay_2_ms steuert die Wartezeit zwischen 2 aufeinander folgenden Schritten zur automatischen Änderung des Winkel-Inkrementss.



Das onload-Ereignis tritt ein, wenn alle (SVG)-Elemente des Dokuments vollständig geladen sind. Erst danach kann man (mit DOM-Methoden) auf die Elemente zugreifen.

• Das SVG-Element <g id="opart"> (d.h. die gesamte Grafik) wird als Objekt an die globale Variable n zugewiesen.

• Die Funktion rotate() und mit ihr die endlose Animation wird gestartet.



Der aktuelle Dreh-Winkel w wird um das Winkel-Inkrement dw vergrößert.
Wenn der Winkel den Wert w>=360° übersteigt, dann wird er um 360° vermindert.
Der Winkel w wird in das transform-Attribut des Objekts n (= der gesamten SVG-Gruppe opart) eingetragen.

Zuletzt ruft sich die Funktion mit einer Verzögerung von delay_rot_ms Millisekunden selbst auf: Damit wird der nächste Schritt der endlosen Animation beauftragt.


• Die Funktion opart_set_auto() steuert die automatische Änderung des Winkel-Inkrements dw
Wenn sie mit Fernsteuerung eingeschaltet wird, dann dreht sich die Grafik abwechselnd und mit variabler Geschwindigkeit nach rechts und links. Die eigentliche Arbeit wird in diesem Fall von der Hilfs-Funktion auto() durchgeführt.