Vieleck-Sehnen als SVG Objektgrafik

6 Ecken,  28 Sehnen
Radius = 100 Bildpunkte (Pixel)

Hintergrund




Kommentar zu diesem Beispiel


Geometrie

Das Beispiel verwendet ein Regelmäßiges Vieleck (Polygon) und zeichnet darin alle Sehnen ein, d.h. alle Verbindungs-Linien zwischen den Eckpunkten.


Programmierung

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: Die Grafik-Datei wird nur 1mal vom Webserver angefordert und danach Live am eigenen Arbeits-PC verändert.

Steuerung (User-Interface)


Mit der HTTP‑GET-Methode wird das Dokument angefordert und geladen. Alle gewünschten Eigenschaften werden bereits für die erste Ansicht berücksichtigt.

Alternativ kann man die bereits geladene Grafik mit Fern-Steuerung verändern. Dazu werden auf dieser Seite die Steuer-Elemente verwendet, die links neben dem ↑ Live-Beispiel angebracht sind.



Im QUERYSTRING werden diese Werte an 2 Variablen zugewiesen:
edges = 5
radius = 150
Die beiden Variablen werden durch ein & Zeichen getrennt.

Dieser Text wird von den Javascript-Programmen der Datei ausgewertet und bewirkt die Erzeugung einer Grafik mit 5 Ecken und einem Radius von 150 Bildpunkten.

Sie können die beiden Zahlenwerte manuell ändern und mit der return-Taste eine neue Grafik anfordern.

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



Die Programme akzeptieren diese Argumente zur Angabe von Farben:
NameElement
color_lineLinien
color_backHintergrund
color_centerMittelpunkt
Der Wert wird nach → CSS-Syntax angegeben.

Beispiel: Die Anweisung
color_center=rgb(256,0,0)&color_back=#FF0
zeichnet eine Grafik mit einem Farb-Gradienten von Rot nach Gelb.


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 vom HTML <input>-Element und gibt ihn an das eingebettete Grafik-Dokument weiter. Danach wird dessen Funktion re_draw() aufgerufen: Diese Funktion zeichnet eine neue Grafik.

Diese Methode der interaktiven Steuerung setzt das bereits geladene Grafik-Dokument voraus. Sie arbeitet jedoch (je nach Geschwindigkeit von Server und Netzwerk) um Größenordnungen (!) schneller als ein Server-(PHP)-Programm und beansprucht den Server überhaupt nicht.

HTML + SVG + Javascript Quelltext

◀   Aus diesem Quelltext hat ihr Browser-Programm das Bild der Objekt-Grafik erzeugt.

In einem Regelmäßigen Vieleck werden alle Eckpunkte durch Linien verbunden. Die Anzahl der Linien (Sehnen) eines n-Eckes beträgt n*(n‑1)/2

Der Quelltext ist nach dem → HTML-Standard abgefasst und veranlasst daher den Browser, eine (Mini)-Webseite herzustellen: Diese enthält jedoch nur wenige HTML-Elemente und dient lediglich dazu, das Beispiel auch auf mobilen Geräten (Smartphones) korrekt anzuzeigen.

Der HTML-Quelltext enthält nur 3 wesentliche Elemente: Ein <style>-Element dient der Formatierung nach → CSS-Regeln, ein <script>-Element enthält die → Javascript-Programme zum Zeichnen der Grafik, ein <svg>-Element enthält die gesamte Grafik.

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.

Das Beispiel ist portabel und braucht keine zusätzlichen Resourcen: Man kann die Zeilen-Nummern mit Mausklick abschalten und 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 vorgestellten ↑ Methoden steuern.

Javascript-Programme


Fernsteuerung

Wenn das Grafik-Dokument in ein anderes eingebettet wurde (z.B. in diese Webseite), dann kann man vom übergeordneten parent-Dokument auf alle Variablen und Funktionen des eingebetteten child-Dokuments zugreifen.

Die Fernsteuerung ist besonders gut geeignet, um wiederholt auf ein bereits geladenes Dokument einzuwirken. Jede interaktive Änderung erfolgt in diesem Beispiel in 2 Schritten:
Zuerst ändert man die Werte aller gewünschten Variablen.
Danach wird die Funktion re_draw() aufgerufen: Sie löscht alle vorhandenen Linien und zeichnet die Grafik neu.

Vergleich Javascript-PHP

Das gleiche Beispiel lässt sich leicht auf ein Programm der Programmiersprache → PHP übertragen. Der wesentliche Unterschied liegt am Ort der Ausführung:

PHP-Programme werden am Server ausgeführt. Das kostet wertvolle Server-Zeit und ist nur dann sinnvoll, wenn dabei Resourcen verwendet werden, die nur am Server verfügbar sind. In diesem Fall müsste der Server bei jeder einzelnen Änderung jedes einzelnen Users den SVG-Quelltext neu erzeugen und an den jeweiligen Client senden - eine höchst unwirtschaftliche Lösung.

Javascript-Programme werden vom Browser ausgeführt, d.h. individuell an jedem Arbeits-(Client)-PC. Damit wird die ansonsten wenig genutzte Leistung vieler einzelner Client-PC herangezogen und der Server bestmöglich entlastet. Die Vorteile kommen in erster Linie den Anwendern des jeweiligen Beispiels zugute (die Änderungen erfolgen sehr viel rascher), jedoch wegen der Entlastung des Servers auch allen anderen Clients.

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



Einige Anregungen zu vergleichsweise einfachen Animationen:
  • Langsame Rotation oder Skalierung (Vergrößern, Verkleinern) der gesamten Grafik
  • Kontinuierliche Änderung der Farben
  • Schrittweises Zeichnen der Linien (→ Beispiel)



Ergänzen sie eine Möglichkeit, um die alleinstehende Grafik mit → HTTP-GET-Argumenten zu steuern.
Ändern sie Inhalt und Aussehen, je nachdem ob die Grafik in eine Webseite eingebettet oder alleinstehend angezeigt wurde.