Cardioid aus Polygon-Sehnen

Radius
Wert: 100 Bildpunkte (Pixel)
Algorithmus-Faktor (grob, fein)
Wert:  2.000
In diesem Sonderfall fallen alle Sehnen mit dem Umfang des Polygons zusammen.


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.



Ein ↓ Algorithmus (Rechen-Vorschrift, Programm) bestimmt, welche Sehnen gezeichnet werden. In einem anderen → Beispiel werden alle Sehnen eingezeichnet.
Details zum hier verwendeten ↓ Algorithmus


Programmierung

Die 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 erfolgt durch Programme der Programmiersprache → Javascript, die ebenfalls im Quelltext enthalten sind.

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:
radius=150
mul=2
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 einem Radius von 150 Bildpunkten, wobei der Algorithmus-Faktor mul=2 verwendet wird..

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


GET-Argumente

Die Programme der Grafik-Datei akzeptieren diese Argumente:
Name Standard BereichKommentar
radius20010...5000Größe der Grafik in Bildpunkten (Pixeln)
edges1003...500Anzahl der Eckpunkte
mul20.1...10.0Algorithmus-Faktor
bagra0 0; 1 Anzeige des Hintergrunds (Farb-Gradient)

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

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


Mit 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=150;
Diese Anweisung setzt die Variable radius des Grafik-Dokuments auf den Wert 150
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 des 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.

Algorithmus



In einfachen Fällen gelingt es, die Regeln zur Lösung einer Aufgabe in einer einzigen Formel anzugeben (→ Beispiele).
Die Grafik-Aufgabe dieser Seite erfordert mehrere Regeln, die man zusammengefasst als Algorithmus (in der Informatik als Programm) bezeichnet.



Wenn die beiden Kreise eines Epizykloids den gleichen Radius haben, dann entsteht der Sonderfall einer Cardioid-Kurve. Ein Cardioid tritt u.a. auch bei seitlicher Beleuchtung ( Kaustik) eines Hohl-Zylinders auf, oder als Begrenzung der Mandelbrot-Figur.
Zur Darstellung eines Cardioids verwenden sie den Sehnen-Algorithmus mit dem Faktor mul=2



Die Eckpunkte des Polygons werden fortlaufend nummeriert, und zwar - wie in der Informatik üblich - mit 0 (Null) beginnend: Ein 10eck umfasst daher die Ecken (edges) mit den Index-Nummern [0]...[9]

Anfang und Richtung der Nummerierung sind beliebig. Hier wird der oberste Eckpunkt mit [0] bezeichnet, die weiteren Ecken in Richtung des Uhrzeigers.



Ergebnis:
Die erste Sehne vom Index i=0 nach j=0 (hier beschrieben als 0 ↦ 0) kann man nicht zeichnen, weil Start- und Zielpunkt identisch sind.
Die nächste Sehne 1 ↦ 2 liegt am Umriss des Polygons und überlagert daher genau die Verbindungs-Linie der beider Eckpunkte.
Die nächsten Sehnen 2 ↦ 4, 3 ↦ 6, 4 ↦ 8 werden gezeichnet.
Der Endpunkt der nächsten Sehne j=10 existiert in einem 10eck nicht. Man setzt die Zählung der Ecken nach jedem Umlauf einfach fort. Der Eckpunkt [10] ist dann identisch mit [0], Ecke [11] identisch mit [1] usw.
So kann man auch die Sehnen 5 ↦ 10, 6 ↦ 12 usw. bis 9 ↦ 18 zeichnen.
Die Grafik ist vollständig, wenn von jedem Startpunkt 0..i..9 eine Sehne ausgeht. Jede weitere Sehne (z.B. 10 ↦ 20) würde lediglich eine schon gezeichnete überlagern. Jede vollständige Grafik ist auch symmetrisch.



Der Algorithmus mit ganzzahligem Multiplikations-Faktor erzeugt näherungsweise Bilder, die man mit exakten Formeln als Epizykloide beschreiben kann.
Der Sonderfall mul=2 liefert das Bild einer Cardioide.
Die Näherung wird allerdings erst mit einer größeren Anzahl an Sehnen erkennbar, z.B.
 10    30    60  



Wenn man die Verallgemeinerung konsequent fortsetzt, gelangt man zu folgender Beschreibung des Algorithmus:

Man legt den Radius eines Kreises fest.
Ein Punkt am Umfang wird als Anfangs-Punkt festgelegt.
Ein beliebiger Winkel-Abstand wird festgelegt, z.B. Δw=15°
Als Anfangspunkte der Sehnen werden beliebig viele Punkte am Umfang festgelegt, die um Vielfache von Δw vom Startpunkt entfernt sind. Die Startpunkte werden forlaufend mit einem ganzzahligen Index i=0,1,2,... bezeichnet. Die ersten Startpunkte sind durch diese Zentralwinkel festgelegt:
w[0]=0; w[1]=Δw; w[2]=2*Δw; ...
Ein beliebiger Multiplikations-Faktor (ungleich 0 oder 1) wird festgelegt, z.B. mul=1.5
Die Zentralwinkel der Endpunkte werden aus jenen der Startpunkte berechnet:
w[j] = w[i] * mul
Dieser Algorithmus ergibt bei allgemeinen Annahmen komplexe sowie unsymmetrische Bilder. Diese sind je nach Anzahl der verwendeten Sehnen mehr oder weniger unvollständig.

Nur in Sonderfällen ergeben sich vollständige und symmetrische Bilder, und zwar dann, wenn Δw ein ganzzahliger Bruchteil eines vollen Kreises ist, z.B.
Δw= 360°/90 = 4°
Die Anzahl der für eine vollständige Grafik erforderlichen Sehnen beträgt in diesem Fall 90


Dieser Link erzeugt eine ↗ Grafik mit
edges=10 & mul=2
Vergrößern sie die Anzahl der Eckpunkte schrittweise auf edges=100: Ändern sie den Zahlenwert in der Adress-Zeile des Browsers und bestätigen sie mit der return-Taste. Die Form der Cardioide wird immer besser sichtbar.



Ändern sie den Multiplikations-Faktor um sehr kleine Differenzen, z.B.
mul=1.99; mul=2.00; mul=2.01
Damit entstehen Bilder, die gegenüber jenen mit ganzzahligen Faktoren gedreht und von größerer Komplexität sind. Je näher man den Faktor zu einer Ganzen Zahl wählt, umso klarer und symmetrischer erscheint das Bild.



Ändern sie den Multiplikations-Faktor um kleine Differenzen, z.B.
mul=0.9; mul=1.0; mul=1.1
Damit entstehen unvollständige Bilder, die näherungsweise wie spiralen aussehen.

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 erst Live mit Javascript-Programmen erzeugt.

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 im nächsten ↓ Kapitel 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.



Die Koordinaten jeder 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 des 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!).



 ABCD
1radius100 
2edges30 
3mul2 
4 
5w0=2*PI()/$A$2 
6 
7nwxy
80=$A8*$B$5=$B$1*SIN($B8)=$B$1*COS($B8)
9=A8+1=$A9*$B$5=$B$1*SIN($B9)=$B$1*COS($B9)
 ⇓⇓
38=A37+1=$A38*$B$5=$B$1*SIN($B38)=$B$1*COS($B38)


In Spalte I wird der Quelltext eines kompletten SVG <line>-Elements programmiert. Jede Linie verbindet 2 benachbarte Eckpunkte. Man kann daher erst in Zeile 9 beginnen und die beiden Ecken n=0 und n=1 verbinden:
I9 = "<line x1=""" & G8 & """ y1=""" & H8 & """ x2=""" & G9 & """ y2=""" & H9 & """/>"
Die Formel erzeugt einen String (Text) aus 9 verschiedenen Teilen, die jeweils mit dem Operator & verknüpft (verkettet) werden.
Jedes " Zeichen, welches im Text vorkommen soll, muss im Programm der Formel mit zwei (!) "" Zeichen angegeben werden. Diese Zeichen sind hier zur besseren Unterscheidung in anderer Farbe hervorgehoben.
Mit den hier verwendeten Vorgaben erzeugt die Formel diesen Text:
<line x1="0.0" y1="100.0" x2="20.8" y2="97.8"/>
Die Formel wird nach unten bis Zeile 38 ausgefüllt. Danach kann man den gesamten Bereich I9:I38 markieren, kopieren und als Quelltext in eine HTML- oder SVG- Text-Datei einfügen.


Alle benötigten Formeln und Methoden wurden bereits oben vorgestellt, daher sollte man den Quelltext der Sehnen-Linien selbst berechnen können.


Statische 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.
Programmieren sie den Umriss des Polygons.
Fügen sie danach die nach dem Algorithmus berechneten Sehnen ein.
Die Grafik sollte so ähnlich aussehen wie das rechts gezeigte Beispiel.
Mit RechtsKlick in die Grafik oder mit diesem Link kann man den ↗ Quelltext (Source) anzeigen.
Das Polygon ließe sich zwar mit einem SVG <path>-Element sparsamer programmieren, hier werden jedoch zur Vereinfachung nur Linien verwendet. 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)

Statische Grafik mit edges=30 und mul=2 :



Beispiel (Perl, PHP):  Erzeugung einer Linie von der Ecke $edge_from=1 zur Ecke $edge_to=3
$w0 = 2 * M_PI / $edges;
$edge_from = 1;
$edge_to = 3;
$x1 = $radius * sin($w0*$edge_from);
$y1 = $radius * cos($w0*$edge_from);
$x2 = $radius * sin($w0*$edge_to);
$y2 = $radius * cos($w0*$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 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 z.B. auch 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 ist die mit Abstand schnellste und effizienteste. Sie wird daher vom ↑ Live-Beispiel dieser Seite verwendet.



Machen sie die Anzahl der Polygon-Ecken von der aktuellen Größe (radius) der Grafik und vom Faktor mul des Algorithmus abhängig.

Ändern sie die Strich-Stärke (CSS-Eigenschaft stroke-width) je nach Größe der Grafik und des vom Client verwendeten Fensters.

Programmieren sie eine alternative Grafik mit der exakten Formel eines Epizykloids. Überlegen sie Möglichkeiten, die beiden Bilder miteinander zu kombinieren (z.B. Hintergrund - Vordergrund).