Vieleck-Sehnen:  Objektgrafik + Animation

Ecken: 12     Sehnen: 66
Radius: 100 Bildpunkte (Pixel)
Verzögerung: 75 ms
Algorithmus 1 2


Kommentar zu diesem Beispiel


Alleinstehende Grafik

Es ist möglich, die Grafik alleinstehend ohne Bedienungs-Elemente anzuzeigen und selbst zu programmieren. Ein Beispiel wird mit Klick auf diesen ↗ Link angezeigt und im Kapitel ↓ Steuerung erklärt.


Animation

Alle Sehnen-Linien werden mit einer geringen zeitlichen Verzögerung gezeichnet und danach wieder gelöscht. Das ergibt wechselnde geometrische Figuren, die oft als schön oder interessant empfunden werden.
Mit der Auswahl des Algorithmus (1 oder 2) kann man die Reihenfolge der gezeichneten Sehnen ändern.


Programmierung

Die animierte Grafik ist in einer Mini-(HTML)-Webseite enthalten. Diese ist hier eingebettet, man kann sie jedoch auch ↗ alleinstehend laden.
Die Grafik ist als Objekt-(SVG)-Grafik programmiert, die im ↓ Quelltext der Mini-Webseite enthalten ist.
Die Steuerung und Animation erfolgt durch Programme der Programmiersprache → Javascript, die ebenfalls im Quelltext enthalten sind.
Die hier verwendete Methode ist sparsam und effizient. Eine vergleichbare GIF-Animation würde ein Vielfaches an Speichergröße und Übertragungs-Zeit erfordern und ließe sich nicht interaktiv steuern.

Steuerung (User-Interface)


Mit der HTTP‑GET-Methode wird das Dokument angefordert und geladen. Man kann alle gewünschten Eigenschaften im Text der Browser-Adresszeile (URL) angeben.

Man kann die Mini-Webseite der Grafik in andere Dokumente einbetten (so wie oben in diese Seite). In diesem Fall kann man die Grafik mit Fern-Steuerung verändern. Dazu werden auf dieser Seite die Steuer-Elemente verwendet, die in einem Formular links neben dem ↑ Live-Beispiel angebracht sind.



Mit dem QUERYSTRING werden an 2 Variablen diese Werte zugewiesen:
edges=13
radius=200
Die beiden Variablen werden durch ein & Zeichen voneinander getrennt.

Der QUERYSTRING-Text wird von den Javascript-Programmen der Datei ausgewertet und bewirkt die Erzeugung einer Grafik mit 13 Ecken und einem Radius von 200 Bildpunkten.

Mit dieser Methode werden alle gewünschten Eigenschaften berücksichtigt. Allerdings wird das Dokument bei jeder Anforderung neu geladen.


GET-Argumente

Die Programme der Grafik-Datei akzeptieren diese Argumente:
NameBereichStandardKommentar
algo0;11Auswahl der Zeichen-Regeln
bagra0;11Anzeige des Hintergrunds (Farb-Gradient)
delay50...100075Zeit-Verzögerung der Animation in ms (Millisekunden)
edges5...20012Anzahl der Eckpunkte
radius10...5000100Größe der Grafik in Bildpunkten (Pixeln)

Wenn eine GET-Variable nicht angegeben oder unverständlich ist, dann wird vom Programm der jeweilige Standard-(default)-Wert eingesetzt.

Wenn ein Wert außerhalb des erlaubten Bereichs liegt, dann wird er auf diesen begrenzt.


Mit Funktionen der Programmiersprache → Javascript kann man auf alle Variablen und Funktionen des eingebetteten Dokuments zugreifen. Dazu setzt man den Namen (hier poly) des <iframe>-Dokuments voran:
poly.radius=50;
Diese Anweisung setzt die Variable radius des eingebetteten Grafik-Dokuments auf den Wert 50, und zwar ohne es erneut zu laden.
Im Abschnitt Default values des ↓ Quelltextes finden sie die Namen aller Variablen, die zur Fernsteuerung vorgesehen sind.

Mit der Funktion draw() des eingebetteten Dokuments wird die Grafik nach den aktuellen Vorgaben neu gezeichnet:
poly.draw();

Die Programmierung der Fernsteuerung erfordert mindestens grundlegende Kenntnisse von → Javascript.



Die Programmierung der Steuer-Elemente kombiniert HTML<form>-(Formular)-Elemente mit → Javascript-Funktionen.
Jedes <input>-Eingabe-Element enthält ein onchange-Attribut. Daher wird bei jeder Änderung eines Steuer-Elements die dazu angegebene Javascript-Funktion (onchange-Event-Handler) aufgerufen.

Jede onchange-Handler-Funktionen liest den aktuellen Eingabe-Wert und gibt ihn an das eingebettete Grafik-Dokument weiter. Danach wird dessen Funktion draw() aufgerufen: Diese Funktion zeichnet eine neue Grafik.



Beide Algorithmen führen zum gleichen Ergebnis, ergeben dazwischen jedoch unterschiedliche Figuren.
Es ist nicht sinnvoll, den Algorithmus während eines Animations-Zyklus zu ändern. Daher wird eine Änderung erst mit Beginn des nächsten Zyklus berücksichtigt.

HTML + SVG + Javascript Quelltext

◀   Aus diesem Quelltext hat ihr Browser-Programm die animierte Grafik erzeugt.

Der Text ist nach dem → HTML-Standard abgefasst und veranlasst den Browser, eine (Mini)-Webseite mit Grafik darzustellen.

Der HTML-Quelltext besteht - wie üblich - aus einem <head> und einem <body>-Element.
Das <head>-Element enthält 2 wesentliche Elemente:
  • Ein <style>-Element enthält die → CSS-Regeln zur Formatierung
  • Ein umfangreiches <script>-Element enthält die → Javascript-Programme zum Zeichnen der Grafik und zur Animation

Das HTML <body>-Element enthält nur 2 Sub-(Child)-Elemente:
  • Ein <div>-Element ohne Inhalt: Wenn die Grafik alleinstehend verwendet wird, dann wird darin eine Überschrift eingetragen und angezeigt.
  • Ein <svg>-Element enthält die gesamte Objekt-Grafik. Die Linien der Grafik sind darin noch nicht enthalten, sie werden Live mit Javascript-Programmen erzeugt.
Das <body>-Element enthält ein onload-Attribut:  Damit wird nach dem vollständigen Laden die angegebene Javascript-Funktion do_onload() ausgeführt: Sie erzeugt alle Linien der Grafik und startet die Animation.

Das Beispiel ist portabel und braucht keine zusätzlichen Resourcen: Sie können den Quelltext als einfache Text-Datei *.html am eigenen PC speichern. Die Datei wird von jedem modernen Browser angezeigt und die Grafik lässt sich mit den oben angegebenen ↑ Methoden steuern.

Das Verständnis der Details erfordert fortgeschrittene Kenntnisse von Javascript. Man kann die Aufgabe jedoch bei Verzicht auf Komfort wesentlich einfacher programmieren (Kapitel ↓ Anregungen)

Mit diesem Link wird die ↗ Mini-Webseite mit der interaktiven Grafik in einem eigenen Browser-Tab geladen.
Mit diesem Link wird der ↗ Quelltext der Mini-Webseite angezeigt. Schalten sie die Zeilen-Nummern mit MausKlick ab, wenn sie den Text als Text-Datei *.html speichern.

Anregungen


Man kann die gleiche Aufgabe bei Verzicht auf Komfort auch wesentlich einfacher lösen.
In diesem Kapitel werden dazu einige Anregungen vorgestellt.


Statische SVG Objekt-Grafik

Diese Aufgabe ist am einfachsten. Sie sollten damit beginnen - insbesondere dann, wenn sie wenig Erfahrung mit → SVG Objekt-Grafik haben.
Programmieren sie ein Polygon mit fix vorgegebenem Radius und fixer Anzahl von Ecken. Verwenden sie dazu nur HTML und SVG und verzichten sie vorerst auf andere Technologien.
Beginnen sie mit einem 4eck (Quadrat) und seinen beiden Sehnen. Die 6 Linien sollten so ähnlich aussehen wie das rechts gezeigte Beispiel.
Beachten sie: Der Ursprung des Koordinaten-Systems liegt in der linken oberen Ecke, die Y-Koordinaten wird von dort nach unten gemessen.
Mit RechtsKlick in die Grafik oder mit diesem Link kann man den ↗ Quelltext (Source) anzeigen. Damit ein SVG <line>-Element angezeigt wird, muss man die Attribute stroke und stroke-width angeben.
Details zu SVG bei W3Schools und zum SVG <line>-Element bei W3Schools und MDN (Mozilla)
Programmieren sie danach ein Polygon mit einer größeren Zahl (5..12) von Ecken. Dazu muss man die ↓ XY-Koordinaten der Eckpunkte berechnen.

Regelmäßiges 4eck mit allen Sehnen:



Die Koordinaten der Objekt-Grafik werden ohne besondere Maßnahmen von der linken oberen Ecke (!) nach rechts und nach unten (!) gemessen. Wenn man das nicht berücksichtigt, wird nur ein Viertel jedes Polygons angezeigt.

Zur Korrektur wird das Vorzeichen jeder Y-Koordinate umgekehrt.
Zur Verschiebung des Ursprungs sind mehrere Alternativen möglich:
  • Man kann bei der Berechnung (links) zu jeder der beiden Koordinaten den Wert von radius/2 addieren.
  • Man kann die gesamte Grafik in ein SVG <g>-Element (Gruppe) einschließen und mit einem transform-Attribut den Ursprung aller darin eingeschlossenen Elemente in die Mitte der Grafik verlegen, z.B.
    <g transform="translate(100,100)">
    <line .../> <line .../> <line .../>
    </g>

Verwenden sie als Koordinaten entweder nur Ganze Zahlen oder Gleitkomma-Zahlen mit Komma-Punkt (nicht mit Komma-Beistrich!).


Beispiel (Perl, PHP):  Erzeugung einer Linie von der Ecke $edge_from=1 zur Ecke $edge_to=3
$w = 2 * M_PI / $edges;
$edge_from = 1;
$edge_to = 3;
$x1 = $radius * sin($w*$edge_from);
$y1 = $radius * cos($w*$edge_from);
$x2 = $radius * sin($w*$edge_to);
$y2 = $radius * cos($w*$edge_to);
$txt = '<line x1="' . $x1 . '" y1="' . $y1 . '" ';
$txt .= 'x2="' . $x2 . '" y2="' . $y2 . "\"/>\n";
print $txt;
Das Beispiel zeigt, wie man den SVG-Quelltext eines einzelnen <line>-Elements in der Variablen $txt zusammenstellt und mit print ausgibt.

Die Programmierung mit Perl oder PHP ist relativ einfach, das Beispiel wird jedoch für jede geänderte Vorgabe am Server-PC erneut berechnet und der erzeugte Quelltext an den Client-PC gesendet. Das belastet Server und Netzwerk bei oftmaliger Verwendung.
Die Programmierung einer Animation mit PHP ist daher in der Praxis aussichtslos.



Die verwendeten Javascript-Programme sind im ↑ Quelltext der Datei enthalten und werden erst am Arbeits-PC des jeweiligen Clients ausgeführt. Das bietet einige Vorteile:
Die Programme arbeiten besonders schnell. Damit ist eine Animation programmierbar.
Die Transport-Zeit (Internet, Netzwerk) fällt nur 1mal an. Danach kann man das Beispiel ohne weitere Lade-Zeit beliebig oft mit geänderten Vorgaben verwenden.
Server-PC und Netzwerk werden mit dieser Technologie nur minimal belastet.

Diese Methode wird daher vom ↑ Live-Beispiel verwendet.


Javascript-Beispiel

Im rechts gezeigten Beispiel wurden alle Linien Live mit Javascript-Funktionen erzeugt. Damit wird die Methode in einfacher Form (ohne Animation) demonstriert.

Mit RechtsKlick in die Grafik oder mit diesem Link kann man den ↗ Quelltext anzeigen:  Er enthält keine SVG <line>-Elemente. Diese werden erst nach dem Laden Live mit Javascript DOM-Methoden erzeugt.

Mit diesen vereinfachten Programmen kann man immerhin Polygone mit beliebig vielen Ecken und allen Sehnen erzeugen, z.B.
 3    4    5    6    8    9    12



In der Praxis wurden einige Merkmale ergänzt, um das Live-Beispiel anschaulicher zu machen:
  • Nach Abschluss jeder Animations-Phase wird eine Pause von 1 Sekunde eingelegt.
  • Ein Hintergrund mit Farb-Verlauf lässt die Grafik auch dann erkennen, wenn nur wenige Linien angezeigt werden.


TimeOut

Wenn man jeden Schritt einzeln darstellen will, dann sind Schleifen ungünstig. In diesem Fall wird eine Funktion verwendet, die nur 1 Sehne anzeigt bzw. löscht. Danach folgt der Algorithmus, welcher die nächste Sehne auswählt. Zuletzt wird eine Timeout-Ereignis gesetzt, mit dem die gleichen Funktion wieder aufgerufen wird, um die nächste Sehne anzuzeigen bzw. zu löschen.



Dazu wurden die beiden Algorithmen in getrennten Javascript-Funktion (33 Zeilen, 20 Zeilen) codiert. Damit ist es einfach, Live zwischen den beiden Versionen zu wählen. Eine allfällige Änderung wird lediglich bis zum Beginn des nächsten Animations-Zyklus verschoben.



Die Anzahl edges der Polygon-Ecken sollte sinnvoll begrenzt werden. Wenn edges<4 sind keine Sehnen mehr möglich. Machen sie die obere Grenze von der aktuellen Größe (radius) der Grafik abhängig.

Lassen sie die Grafik während der Animation langsam rotieren. Machen sie die Rotation abschaltbar, ihre Geschwindigkiet programmierbar, oder automatisch an die Größe der Grafik gekoppelt.

Berechnen sie die Radien der konzentrischen Kreise, welche sich durch die Überlagerung der Sehnen ergeben und färben sie den Hintergrund dieser Kreise abwechselnd in 2 oder 3 Farben.