Dr. O. Hoffmann
Was im Leben uns verdrießt,
man im Bilde gern genießt.
Johann Wolfgang von Goethe
Maldienste (englisch: paint server) dienen dazu, Flächen und Ränder mit
komplizierteren Strukturen als direkten Farbangaben zu füllen, dies sind vor allem Farbverläufe und Muster.
Obgleich dafür einige Elemente verfügbar
sind, gibt es etwa auch andere als periodische Muster, die manuell erstellt werden müssen, wobei PHP
ausgezeichnet helfen kann, dazu gibt es ebenfalls Beispiele.
Bei komplizierteren Farbverläufen bieten die Versionen 1.1 und 1.2 von SVG hingegen nicht viel Hilfe.
Hier ist zwangsläufig viel Handarbeit gefragt und die Dateien können recht umfangreich werden.
Der jeweilige Maldienst wird mit speziellen Elementen konstruiert und mit einem Fragmentidentifizierer versehen.
Über letzteren wird dann der Dienst vom betroffenen fill oder stroke referenziert.
Ist der Fragmentidentifizierer des Maldienstes etwa
id = "bsp", so wird referenziert mit zum Beispiel
fill = "url(#bsp)".
SVG tiny 1.2 bietet die Möglichkeit, feste Farben zu definieren, was deutlich über die
Möglichkeiten von der Eigenschaft color hinausgeht, die mit dem Farbwert
currentColor referenziert werden kann, und die bereits in SVG 1.1 verfügbar ist.
Mittels des Elementes solidColor können in SVG tiny 1.2 Farbangaben
Namen zugeordnet werden. Das ist vor allem nützlich, wenn die Farbangaben einer großen Zahl von
Elementen verändert oder animiert werden soll, die mit anderen Elementen gemischt sind.
Mittels der Eigenschaft solid-color wird der Farbwert festgelegt, mittels der
Eigenschaft solid-opacity zusätzlich der Wert für die Teiltransparenz.
Dazu ein Beispiel entsprechend dem für Klassen und CSS.
Beispiel solidColor
(Quelltext zum Beispiel solidColor).
Und ein Beispiel mit Animation:
Beispiel solidColor mit Animation
(Quelltext zum Beispiel solidColor mit Animation).
Nachvollziehbar ist dieser einfache neue Maldienst zum Beispiel mit Opera ab Version 9.50.
SVG stellt zwei Typen von Farbverläufen als Alternativen
zu Farben für fill und
stroke zur Verfügung. Bei dem einen handelt es sich
um einen linearen Farbverlauf linearGradient,
beim anderen um einen radialen radialGradient.
Einheiten werden entweder in relativen Koordinaten
angegeben, bezogen auf das zu füllende Element
(gradientUnits="objectBoundingBox")
oder bezogen auf das umgebende Koordinatensystem
(gradientUnits="userSpaceOnUse").
Das Attribut spreadMethod entscheidet, ob der Farbverlauf am Ende des
definierten Bereiches auf einem Randwert verbleibt (Voreinstellung, pad),
sich in gleicher Weise wiederholt (repeat) oder
in umgekehrter Reihenfolge wiederholt wird (reflect).
spreadMethod ist in SVG tiny 1.2 nicht
verfügbar. In SVG tiny 1.1 sind Farbverläufe gar nicht verfügbar.
Ähnlich bei den Angaben zu einer Linie wird beim linearen Verlauf Anfangs- und
Endpunkt angegeben, um die Richtung des Verlaufes festzulegen. Dazu dienen die Attribute
x1, y1,
x2, y2.
Beim radialen Verlauf entsprechen die Angaben eher denen eines
Kreises - Mittelpunkt cx, cy, Radius
r, dazu kommen fx und
fy
für den sogenannten fokalen Punkt des Verlaufes - der Startpunkt des Verlaufes,
das Ende des Verlaufes liegt
hingegen auf einem Kreis mit dem Radius r um den Mittelpunkt
(cx, cy).
Liegt (fx, fy)
außerhalb des Kreises, so soll dies vom Darstellungsprogramm so korrigiert werden,
daß der neue fokale Punkt auf dem Schnittpunkt des Kreises mit der
Verbindungslinie von (cx, cy) und
(fx, fy) liegt.
Opera 8 hat da einen kleinen Fehler, der ab Version 9 behoben ist. fx und fy sind in SVG tiny 1.2 nicht
verfügbar.
Ähnlich den Transformationen können mit dem Attribut gradientTransform
die gleichen Transformationen auf einen Farbverlauf angewendet werden. Auch das ist in SVG tiny 1.2 nicht
verfügbar.
Der eigentliche Farbverlauf wird definiert mit dem umschlossenen stop-Element.
Mit dem Attribut offset wird die relative Position angegeben, für
die eine Angabe gemacht werden soll. Mittels der Attribute stop-color
und stop-opacity
wiederum werden für diese offset-Position Farbe und Transparenz festgelegt.
Die Position muß monoton von stop zu stop steigen.
Haben zwei aufeinanderfolgende den gleichen Wert, aber andere Angaben für die die Farbe, so gibt
es offenbar an der Stelle einen diskreten Sprung.
Linearer Farbverlauf
(Quelltext zum linearen Farbverlauf),
radialer Farbverlauf
(Quelltext zum radialen Farbverlauf).
Gucken wir uns die Anordnung der jeweiligen Radien bei einem radialem Verlauf nochmal genauer an:
radialer Farbverlauf - Positionen
(Quelltext zum radialen Farbverlauf - Positionen).
Sei r der Radius, c = (cx,cy) das Zentrum des Kreises, f=(fx,fy) der fokale Punkt.
Falls r > |c - f| so gilt:
Der Radius beim offset o (in Anteilen von 1) ist R = o * r.
Der Mittelpunkt liegt bei P = (1 - o) f + o c .
Sonst findet eine Korrektur statt, statt f wird f' verwendet
mit
f' = c + (f - c) r / |f - c|
P = (1 - o) f' + o c.
Spannender wird die Angelegenheit, wenn man mehrere Rechtecke mit teiltransparenten Farbverläufen
übereinanderlegt. Durch geschickte Kombination kann man so auch nicht triviale Verläufe zwischen
verschiedenen Farben in der Ebene hinbekommen, das klappt bereits mit den relativ einfachen
linearen Verläufen:
Mehrfarbiger linearer Farbverlauf
(Quelltext zum mehrfarbigen linearen Farbverlauf).
Mehrfarbiger linearer Farbverlauf (2) (Quelltext zum mehrfarbigen linearen Farbverlauf (2)).
Mit radialen und transformierten Verläufen lassen sich noch kompliziertere Strukturen erzeugen.
Mehrfarbige radiale Farbverläufe (Quelltext zu mehrfarbigen radialen
Farbverläufen).
Allerdings braucht es einige Rechnerei, um so einen vorgegebenen nicht trivialen Farbverlauf zu erzeugen.
Da zwischen zwei Werten von stop-color affin interpoliert wird, kann es
sinnvoll sein, für einen Verlauf viele berechnete stop-color
anzugeben. Leider gibt es nicht wie für Kurven oder Animationen spline-Interpolation, das muß
also explizit berechnet und genähert werden.
An der Stelle kommt dann also wieder für diverse Probleme PHP zum Einsatz, etwa
um Wellen darzustellen: ebene Welle
(Quelltext zu ebener Welle).
Interessanter ist natürlich eine
klassische Überlagerung ebener Wellen
(Quelltext zu klassischen Überlagerung ebener Wellen).
Radiale Wellen lassen sich ebenso erzeugen und überlagern:
radiale Welle
(Quelltext zur radialen Wellen)
klassische Überlagerung radialer Wellen
(Quelltext zu klassischen Überlagerung radialer Wellen)
klassische Überlagerung radialer Wellen (2)
(Quelltext zu klassischen Überlagerung radialer Wellen (2)).
Ein recht einfache Anwendung ist auch die Überlagerung über ein Bild, um einen Verlauf zu einer einfachen Farbe
hinzubekommen. Bei einem Verlauf zwischen zwei Bildern wird der Verlauf hingegen als Maske verwendet, welche dann auf
ein Bild angewendet wird.
radialer Farbverlauf und Bild - weicher Übergang
(Quelltext zum radialen Farbverlauf und Bild - weicher Übergang).
Farbverläufe werden manchmal auch genutzt, um die diffuse Beleuchtung von dreidimensionalen Objekten zu simulieren,
um die Illusion eines dreidimensionalen Objektes realistischer erscheinen zu lassen. Da die Projektionsmethoden zur
perspektivischen Darstellung mehrdeutig sind, lassen sich so selbst Objekte realistisch darstellen, die es als reale
dreidimensionale Objekte gar nicht geben kann:
Farbverlauf als Beleuchtungseffektillusion
(Quelltext zum Farbverlauf als Beleuchtungseffektillusion).
Ist der Farbverlauf deutlich komplizierter als eine Kombination einiger linearer oder radialer Farbverläufe, so muß in den Versionen 1.1 und 1.2 von SVG improvisiert werden. Ähnlich wie bei den Parkettierungen der nächsten Abschnitte empfiehlt es sich, die Fläche mit vielen Vielecken mit unterschiedlicher Farbe zu füllen. Unter den regulären Polygonen kommen vor allem Dreieck, Quadrat und Hexagon in Frage. Beim Quadrat hat man eine einfache Parametrisierung der Positionen der Quadrate, Dreiecke eignen sich besonders für ungleiche Aufteilungen, die sich an der Struktur orientieren. Der Vorteil von Sechsecken liegt darin, daß zum einen die Winkel flacher sind, für eine gleichmäßige Parkettierung die beste Auflösung erreicht wird, was auch der Grund für Bienenwaben ist, wo es hinsichtlich der Effizienz die beste Materialausnutzung ermöglicht.
Es gibt unterschiedliche Möglichkeiten, wie man die einzelnen Elemente einer hexagonalen Parkettierung adressieren kann. Bleibt man bei einer ähnlichen Adressierung mit Spalten und Zeilen wie bei Quadraten, so ist in einer Richtung jeweils eine Verschiebung vorzunehmen, zum Beispiel bei jeder zweiten Spalte der um den halben Punktabstand, in der anderen Richtung, also der Zeile ist dafür der Punktabstand um den Faktor Wurzel aus 3/4 zu stauchen. So bekommt man die Mittelpunkte der Kacheln. Der Abstand oder Radius vom Mittelpunkt zu jeder Ecke einer hexagonalen Kachel ist eigentlich der Punktabstand. Aufgrund von Rundungsartefakten von Darstellungsprogrammen empfiehlt es sich allerdings, die Kachel etwas größer zu machen.
Um zu vermeiden, daß Kanten und Ecken deutlich sichtbar werden, empfiehlt es sich, einen Gaußfilter über die komplette Parkettierung zu legen. Dabei reicht es aus, die Standardabweichung etwa auf die halbe Kachelgröße zu setzen.
Die so erstellte SVG-Datei enthält natürlich hochgradig redundanten Inhalt als Quelltext, daher ist es immer sehr effizient, die Datei zu komprimieren, wie für SVG als Möglichkeit bereits vorgesehen (gzip). Typisch kann so die Datei um mehr als eine Größenordnung verkleinert werden.
Das folgende Beispiel zeigt ein zufälliges Farbfeld, zum Beispiel eine Landschaft oder ein Potential repräsentierend.
Zusätzlich kann der Gradient des Potentials angezeigt werden, also die Richtung des stärksten Anstiegs, welcher
näherungsweise grob aus den benachbarten Kacheln berechnet wird.
Die zufällige Landschaft entsteht aus einer anfänglich kompletten Zufallsverteilung. Im Rahmen einer Iteration wird
dann allerdings für jeden Punkt in jedem Iterationsschritt eine Mittlung über die sechs benachbarten Punkte durchgeführt.
Der Gradient wird nach dem letzten Iterationsschritt bestimmt. Je mehr Iterationsschritte durchgeführt werden, desto glatter
wird natürlich die Zufallslandschaft, es bleiben also nur wenige Extrema übrig, wenn viele Iterationen durchgeführt werden.
Der gewählte Farbverlauf folgt etwa dem sichtbaren Spektrum des Lichtes, wobei die Ränder mit violett und dunkelbraun sicher etwas karikiert sind. Violett steht für die tiefsten Stellen oder Senken, dunkelbraun für die höchsten Stellen oder Hügel.
Farbfeld
(Quelltext zum
Farbfeld).
Parameter:
title: Titelinformation pro Kachel anzeigen? (0: nein, sonst ja)
qtyp: Typ Gradientendarstellung (0-5 oder -1: ohne)
kr: Kachelradius (nicht so relevant, weil sich die Größe des Bildes ohnehin an den verfügbaren Darstellungsbereich anpaßt), typisch 10
ds: Skalierungsfaktor Gradientensymbol, typisch kr/30
dw: Zusätzlicher Drehwinkel in Grad für das Gradientensymbol
gauss: Standardabweichung Gaußfilter, typisch kr, bei 0 abgeschaltet
ftyp: Typ der Farbskala (1 bis 15 oder -15 bis -1 für umgedrehte Skala)
fmin, fmax: Farbwert für Potential kleiner als das Minimum, beziehungsweise Maximum (bei diesem Zufallsfeld sollte dies nicht auftreten, weil es auf den zulässigen Bereich skaliert ist)
iter: Anzahl der Iterationen der Zufallslandschaft. typisch 20 (nicht mehr als 200)
selbst: Gewichtung gegenüber den sechs Nachbarn, die jeweils mit 1 berücksichtigt werden, Voreinstellung ist 1
xv,xb,yv,yb: Bereich von bis für x, beziehungsweise y, ganze Zahlen, aus dem Kachelradius ergibt sich der Abstand der Punkte.
Die Werte sind nach oben und unten vom Betrag her auf maximal 200 begrenzt
Farbfeld mit Parametern
Eine weitere Lücke von Farbverläufen in SVG liegt darin, daß dieser immer in der Fläche erfolgt, also insbesondere nicht senkrecht zum Strich angegeben werden kann.
Hier können Autoren nur improvisieren, dafür wird der betreffende Pfad mittels des Elementes use mehrfach verwendet, jedoch mit unterschiedlichen Werten für stroke-width und stroke.
So kann näherungsweise eine Farbverlauf erreicht werden.
Um auffällige sichtbare Stufen zu vermeiden, werden die Werte entweder nur geringfügig mit kleinen Änderungen pro Schritt angegeben oder aber es wird ein Gaußfilter über das Paket von use-Elementen gelegt.
Liniengradient, einfach
(Quelltext zum Liniengradient, einfach).
Liniengradient, mit Gaußfilter
(Quelltext zum Liniengradient, mit Gaußfilter).
Liniengradient, mit Gaußfilter, gestrichelter Pfad
(Quelltext zum Liniengradient, mit Gaußfilter, gestrichelter Pfad).
Mit entsprechendem Aufwand kann also auch das Muster der Strichelung entlang eines Pfades so gewählt werden, daß mit der Methode ein Farbverlauf entlang eines Pfades angenähert werden kann.
Symmetrischer Liniengradient, mit Gaußfilter, gestrichelter Pfad
(Quelltext zum symmetrischen Liniengradient, mit Gaußfilter, gestrichelter Pfad).
Mittels des Elementes pattern werden Muster definiert.
Die Notation schließt weitgehend an die des Farbverlaufes an, die
Attribute x, y,
width und height
verstehen sich von selbst.
patternUnits = "userSpaceOnUse" oder
"objectBoundingBox" steht für das Koordinatensystem,
bei letzterem also in Anteilen von 1, ansonsten in dem Koordinatensystem,
in dem das Muster eingesetzt wird.
patternContentUnits = "userSpaceOnUse" oder
"objectBoundingBox" steht für den Inhalt.
Ähnlich den Transformationen können mit dem Attribut patternTransform
die gleichen Transformationen auf ein Muster angewendet werden.
Bei pattern wird die Periodizität des Musters erreicht, indem das Grundrechteck
(die viewBox) periodisch in die x- und y-Richtung kopiert wird.
Sicherlich können damit keine aperiodischen Flächenfüllungen oder Parkettierungen wie die vom Typ
Penrose (siehe unten) realisiert werden, letztlich können damit aber alle periodischen Typen von
Flächenfüllungen realisiert werden, weil die periodischen Typen letztlich alle auf Translation, Rotation und
Spiegelung zurückzuführen sind.
Die Flächenfüllungen, beziehungsweise die zugehörige viewBox
müssen aber nicht zwangsläufig trivial zu bestimmen sein.
Muster sind nicht Bestandteil von SVG tiny und werden auch von Opera 8 nicht
dargestellt, von Opera 9 schon.
Gucken wir uns erst einmal ein einfaches Beispiel an:
Muster
(Quelltext zum Muster).
Und noch ein Muster mit Animation
(Quelltext zum Muster mit Animation).
Eine Strategie der Mustererstellung sei an folgendem Beispiel erläutert:
Mustererstellung
(Quelltext zur Mustererstellung)
Zunächst wird die Basisstruktur erstellt - hier ein Sechseck oder eine Bienenwabe links oben in magenta.
Das beabsichtigte Grundmuster wird mit ausreichend manuell angeordneten Kopien (hier rot) erstellt. In diesem
Grundmuster wird ein rechteckiger Ausschnitt gesucht, beziehungsweise berechnet, der sich als periodische
Fortsetzung eignet (schwarz). Dies Rechteck wird sodann als Muster verwendet (große Fläche).
Mittels patternTransform kann zudem das Grundmuster noch transformiert
werden. Das Grundmuster kann nach erfolgreicher Erstellung natürlich einfach ins Element defs
oder pattern verschoben werden, damit es nicht direkt angezeigt wird.
Variation zur Mustererstellung
(Quelltext zur Variation zur
Mustererstellung)
und ein weitere
Muster mit gleichseitigen Drei-, Vier- und Sechsecken
(Quelltext zum
Muster mit gleichseitigen Drei-, Vier- und Sechsecken);
Muster mit gleichseitigen Drei- und Sechsecken
(Quelltext zum
Muster mit gleichseitigen Drei- und Sechsecken);
Muster mit Rauten
(Quelltext zum
Muster mit Rauten);
Muster mit gleichseitigen Vier- und Dreiecken
(Quelltext zum
Muster mit gleichseitigen Vier- und Dreiecken);
Muster mit gleichseitigen Vier- und Achtecken
(Quelltext zum
Muster mit gleichseitigen Vier- und Achtecken).
Die Muster können anhand vorhandener Symmetrien in Gruppen eingeteilt werden. Es gibt insgesamt siebzehn verschiedene Gruppen, diese werden ebene kristallographische Gruppen genannt. Die verfügbaren Operationen sind Translation, Drehung und Gleitspiegelung.
Die einfachste Gruppe p1 liegt vor, wenn nur eine Translationssymmetrie vorliegt: p1-Gruppe.
Mittels einer einfachen Rotation der (asymmetrischen) Grundfigur um 180 Grad und eine Translation bekommt man die
p2-Gruppe.
Mittels einer einfachen Achsenspiegelung der (asymmetrischen) Grundfigur und eine Translation bekommt man die
pm-Gruppe.
Mittels zweier Gleitspiegelungen der (asymmetrischen) Grundfigur bekommt man die
pg-Gruppe.
Abwechselnd Spiegelachsen und Gleitspiegelachsen führen zur
cm-Gruppe.
Zwei Spiegelachsen senkrecht zueinander und vier zweizählige Rotationszentren führen zur
pmm-Gruppe.
Demgegenüber ergibt nur eine Spiegelachse senkrecht mit Gleitspiegelungen senkrecht dazu und zwei zweizählige Rotationszentren die
pmg-Gruppe.
Mit zwei zweizähligen Rotationszentren und Gleitspiegelungen senkrecht zueinander entsteht die
pgg-Gruppe.
Mit zwei Spiegelachsen senkrecht zueinander und ein zweizähliges Rotationszentrum (nicht auf einer Spiegelachse) entsteht die
cmm-Gruppe.
Mit einem vierzähligen und einem zweizähligen Rotationszentrum entsteht die
p4-Gruppe.
Mit zwei vierzähligen Rotationszentren und Spiegelachsen (wagerecht, senkrecht, beide Diagonalen) entsteht die
p4m-Gruppe.
Eine weitere Gruppe hat zwei vierzählige Rotationszentren, die Spiegelbilder voneinander sind,
aber nur Spiegelachsen in zwei Richtungen, die senkrecht zueinander sind.
Es gibt zwei zweizählige Rotationszentren in den Schnittpunkten der Spiegelachsen.
Ferner gibt es Gleitspiegelachsen parallel zu den Spiegelachsen und zwischen ihnen und auch in einem Winkel von
45 Grad dazu: p4g-Gruppe.
Mit drei verschiedenen dreizähligen Rotationszentren, aber ohne Spiegel- oder Gleitspiegelachse ergibt sich die
p3-Gruppe.
Eine weitere Gruppe hat drei verschiedene dreizählige Rotationszentren, Spiegelachsen sind drei Seiten eines gleichseitigen Dreiecks.
Jedes Rotationszentrum liegt auf einer Spiegelachse, zusätzlich gibt es Gleitspiegelachsen in drei verschiedene
Richtungen, welche mittig zwischen zwei parallelen Spiegelachsen lokalisiert sind:
p3m1-Gruppe.
Folgende Gruppe hat drei verschiedene dreizählige Rotationszentren, wobei zwei Spiegelbilder voneinander sind.
Die Spiegelachsen liegen in drei unterschiedlichen Richtungen. Wenigstens ein Rotationszentrum liegt nicht auf
einer Spiegelachse. Zusätzlich gibt es Gleitspiegelachsen in drei verschiedene
Richtungen, welche mittig zwischen zwei parallelen Spiegelachsen lokalisiert sind:
p31m-Gruppe.
Bei der nächsten Gruppe gibt es ein sechszähliges Rotationszentrum und zwei dreizählige Rotationszentren und
drei zweizählige Rotationszentren. Spiegel- oder Gleitspiegelachsen gibt es nicht:
p6-Gruppe.
Eine hochsymmetrische Gruppe ist die folgende mit einem sechszähligen Rotationszentrum und zwei dreizähligen
Rotationszentren und drei zweizählige Rotationszentren.
Zudem gibt es sechs Spiegelachsen und sechs Gleitspiegelachsen:
p6m-Gruppe oder p6m-Gruppe (mit simplen Kreisen).
Deutlich zu sehen sind mit dem adobe-plugin und Opera (besonders ab Version 9.50) etwa deutlich Mängel in der
Darstellung von Mustern, die vom Autor auch nicht immer kaschiert werden können. Die Implementierung im
Batik/Squiggle scheint hingegen sorgfältiger und vertrauenerweckend zu sein...
Die relativ schwammigen Muster in allen Opera-Versionen kann man umgehen, indem man die Grundfigur sehr groß
auslegt und dann etwa mittels patternTransform erst passend verkleinert. Man
vergleiche etwa obiges Beispiel der Gruppe p31m mit folgender für Opera optimierter Version:
p31m-Gruppe (Alternative).
Mit Farbverläufen fällt der Unterschied weniger deutlich aus, dazu eine andere Version zur
p6m-Gruppe (mit simplen Kreisen).
Damit umgeht man allerdings auch nicht die Mängel vom adobe-plugin, die darauf zurückzuführen
sind, daß einerseits wie auch bei Opera die Eigenschaft overflow ignoriert wird,
andererseits aber das Muster auch nicht präzise positioniert wird oder aber die
viewBox mangelhaft erfaßt wird.
Firefox zeigt hingegen einige der Beispiele falsch an, wohl eine falsche Interpretation der viewBox.
Reale Darstellungen von Parkettierungen sind aufgrund der Endlichkeit des darstellbaren Bereiches zwangsläufig nicht streng periodisch, können aber periodisch fortgesetzt werden. Triviale nichtperiodische Strukturen kann man recht einfach erhalten, indem man eine 'Translationsgruppe' gegenüber der nächsten willkürlich verschiebt. Hinzufügen zufälliger einzelner Elemente mit anderer Ausrichtung zerstört natürlich auch die Periodizität. Andererseits kann ein gegebener Ausschnitt immer selbst als p1-Gruppe aufgefaßt werden, was etwa passiert, wenn Hintergrundgraphiken in CSS wiederholt werden.
Es gibt ferner auch nichtperiodische Parkettierungen mit Grundstrukturen, mit denen auch periodische Parkettierungen möglich sind. Davon zu unterscheiden sind die aperiodischen Parkettierungen, bei deren Grundstrukturen es prinzipiell nicht möglich ist, eine periodische Parkettierung vorzunehmen. Der Versuch, damit Periodizität zu erreichen, führt zwangsläufig dazu, daß die Ebene nicht mehr lückenlos parkettierbar ist. Die entstehenden Strukturen können allerdings eine diskrete Rotationssymmetrie oder Spiegelsymmetrie aufweisen.
Einfache aperiodische Parkettierungen sind die Vorschläge von Penrose, etwa die mit Drachen und Pfeil oder die mit dicker und dünner Raute, die zudem ineinander transformierbar sind. Neben einer lokalen Selbstähnlichkeit haben diese Parkettierungen eine Reihe weiterer interessanter Eigenschaften.
Drachen und Pfeil (englisch: kite and dart) sind Formen, mit denen eine aperiodische Parkettierung der Ebene durchgeführt werden kann. Wie das Paar aus dünner und dicker Raute geht diese Parkettierung auf Penrose zurück. Bei Drachen und Pfeil handelt es sich um Vierecke mit exakt einer Spiegelachse. Drachenformen sind beides, denn das jeweilige Viereck hat jeweils zwei Paare von gleichlangen Seiten. Das Verhältnis von langer zu kurzer Seite entspricht dem Goldenen Schnitt mit der Goldenen Zahl (1+51/2)/2 = 1.618033988... . Beim Drachen handelt es sich um die konvexe Form, beim Pfeil sind demgegenüber die kurzen Seiten nach Innen geklappt. Beim Drachen sind drei Innenwinkel 72 Grad und einer 144 Grad (zwischen den beiden kurzen Seiten). Beim Pfeil ist der Winkel zwischen den langen Seiten 72 Grad, der Außenwinkel zwischen den beiden kurzen Seiten 144 Grad und die beiden übrigen Innenwinkel 36 Grad.
Dazu eine Abbildung mit den beiden Grundformen mit Dekoration zur Vermeidung von verbotenen Kombinationen,
von denen auch zwei durchgestrichen dargestellt sind. Ferner sind einige immer wiederkehrende Strukturen dargestellt:
Drachen und Pfeil - Grundformen
(Quelltext zu Drachen und Pfeil - Grundformen).
PHP ist hier vor allem nützlich, um die Grundform zu berechnen und die Translationen der
Grundformen zur Parkettierung einfacher zu machen. Zur Parkettierung selbst wird vorrangig das Element use
wie schon bei den Fraktalen verwendet. Sofern man an dem Muster nicht weiterarbeiten will, kann das Resultat
dann einfach statisch abgespeichert werden.
Je nachdem, mit welcher Form man beginnt, ergeben sich unterschiedliche Strukturen. Es muß nicht immer einfach
sein, eine Fortsetzung des Musters per Hand zu finden, insbesondere, wenn man eine Rotations- oder Spiegelsymmetrie erhalten
will. Ansonsten gibt es Verfahren, Inflation und Deflation genannt, mit dem man die Parkettierung auch berechnen lassen
kann, siehe weiter unten.
Die verbotenen Kombinationen können zu einer periodischen Parkettierung führen, besonders einfach ist jene,
die sich ergibt, wenn man Drache und Pfeil zu einem Parallelogramm zusammenfügt. Durch einfache Translation
entlang der kombinierten Form bekommt man eine periodische Parkettierung. Das ist nur bei diesen symmetrischen
Grundformen möglich. Es wird noch ein Beispiel angegeben, wie man komplett asymmetrische Formen erzeugt, die
man gar nicht mehr falsch zusammenlegen kann - für diese komplett asymmetrischen Formen gibt es keine
periodische Parkettierung und es sind auch keine besonderen Regeln oder Verbote mehr notwendig, um eine periodische
Parkettierung zu verhindern.
Zwei handgefertigte Beispiele mit obigen Grundformen, eine konstruktive Methode verwendend:
Drachen und Pfeil (1)
(Quelltext zu Drachen und Pfeil - (2))
Drachen und Pfeil (2)
(Quelltext zu Drachen und Pfeil - (3)).
Dazu eine Variation mit modifizierten Grundformen, welche die Spiegelsymmetrien aufheben, aber nicht die
fünfzählige Rotationssymmetrie bei den Beispielen, wo sie vorhanden ist:
Drachen und Pfeil - modifizierte Grundformen
(Quelltext zu Drachen und Pfeil - modifizierte Grundformen)
Drachen und Pfeil modifizierte Grundformen (1)
(Quelltext zu Drachen und Pfeil modifizierte Grundformen (1))
Drachen und Pfeil modifizierte Grundformen (2)
(Quelltext zu Drachen und Pfeil modifizierte Grundformen (2)).
Solche Deformationen sind recht unproblematisch, solange sich die Kurven nicht selbst überschneiden, dann gibt es Probleme
mit der Zeichenreihenfolge in SVG. Das trifft auch zu, wenn die Deformation über den direkten Nachbarn im
Muster hinausgeht. Mittels fill-rule="evenodd"
ist das Problem vermeidbar, wenn es sich um eine Überschneidung bei derselben Seite handelt.
Ansonsten muß man nur beachten, daß benachbarte Stücke die gleiche Kurvenform haben -
man kennt das ja von den Parkettierungen von Maurits Cornelis Escher.
Drachen und Pfeil - modifizierte Grundformen (3)
(Quelltext zu Drachen und Pfeil - modifizierte Grundformen (3))
Die Deformation ist sogar animierbar:
Drachen und Pfeil animierte Grundformen
(Quelltext zu Drachen und Pfeil animierte Grundformen).
Um eine Deformation systematisch zu erzielen, kann man einfach mit einer Strecke in x-Richtung beginnen, diese durch eine kubische
Kurve ersetzen und dann die Kurven zu den Grundformen zusammensetzen, wobei man auf die richtige Orientierung achten muß,
damit nachher alles zusammenpaßt:
Drachen und Pfeil - komplett asymmetrische Grundformen
(Quelltext zu Drachen und Pfeil - komplett asymmetrische Grundformen).
Oder:
Drachen und Pfeil - komplett asymmetrische Grundformen (2)
(Quelltext zu Drachen und Pfeil - komplett asymmetrische Grundformen (2)).
Der Vorteil von asymmetrischen Grundformen liegt auch darin, daß es keine Möglichkeit mehr
gibt, sie falsch zusammenzufügen, wie an den Beispielen deutlich zu sehen ist.
Drachen und Pfeil - komplett asymmetrische Grundformen mit Überschneidung
(Quelltext zu Drachen und Pfeil - komplett asymmetrische
Grundformen mit Überschneidung).
Hier wurde das Problem der Zeichenreihenfolge mittels fill-rule="evenodd"
vermieden. Bei Überschneidung von zwei Seiten wird man manuell reparieren müssen, um das gewünschte
Muster zu realisieren.
Neben der Variation der Form kann natürlich auch innerhalb der Form ein Linienmuster untergebracht werden, zusätzlich oder alternativ zur Füllung, einige Beispiele:
Drachen und Pfeil - Linien-Grundformen
(Quelltext zu Drachen und Pfeil - Linien-Grundformen).
Drachen und Pfeil - Linien-Grundformen (2)
(Quelltext zu Drachen und Pfeil - Linien-Grundformen (2)).
Drachen und Pfeil - Linien-Grundformen (3)
(Quelltext zu Drachen und Pfeil - Linien-Grundformen (3)).
Hilfsskript - asymmetrische Grundformen
(Quelltext zum Hilfsskript - asymmetrische Grundformen).
Im Quelltext können jeweils andere Kontrollpunkte angegeben werden.
Das Ergebnis kann dann verwendet werden, um als Ausgangspunktform für die Deflation zu dienen.
Eine Methode, um eine asymmetrische Form zu erhalten, besteht darin,
im ersten Schritt die lange und die kurze Seite durch einen (nahezu
beliebigen) Pfad zu ersetzen.
Entspricht zum Beispiel die lange Seite dem Pfad "M0 0 100 0",
so können dazwischen Kontrollpunkte eingefügt werden, um eine
kubische Kurve zu erhalten oder auch etwas komplizierteres. Eine kurze
Seite ist dann wegen des festliegenden Seitenverhältnisses ein
Pfad "M0 0 61.803398875 0".
Durch entsprechende Drehungen und Verschiebungen können jeweils zwei lange
und zwei kurze Pfade zu Drachen und Pfeil zusammengesetzt werden. Dies
ist mit den blauen Einzelpfaden angedeutet.
Statt nun die Einzelpfade direkt malen zu lassen, sind die Transformationen
mit einem Skript oder manuell auf die Punkte und Kontrollpunkte anzuwenden.
Anschließend sind die so transformierten Pfade passend zu den Formen
zusammenzusetzen. Zu beachten ist, daß sich die Reihenfolge der Notation
bei der Zusammensetzung ändern kann. Das Endergebnis, hier die roten Pfade,
müssen dann jedenfalls mit den Einzelpfaden übereinstimmen.
Einfache Selbstüberschneidungen können verwendet werden, wenn fill-rule="evenodd" gesetzt ist.
Komplexere Überschneidungen über die nächste Grundform
hinaus können jedoch problematisch sein.
Auch die Ecken können verschoben werden, was jedoch Auswirkungen auf zwei
Seiten gleichzeitig hat und daher etwas schwieriger zu berücksichtigen ist.
Eine Idee für komplexere Formen ist zum Beispiel eine Änderung des Konzeptes. Statt die Grundform als Pfad im Muster immer wieder zu referenzieren, ist es natürlich auch möglich, per Skript die Punkte jedes Mustersegmentes einzeln zu transformieren und dann jeweils alle Drachen-Segmente in einen Pfad zu packen, alle Pfeil-Segmente in einen anderen und dann eben nur diese als Endergebnis auszugeben. Nachteil ist natürlich die erheblich größere Dateigröße der Ausgabe, vermutlich fällt es dafür Programmen etwas leichter, diese komplexen Formen zu präsentieren, also die vielen rekursiven Referenzierungen aufzulösen und dann zu präsentieren.
Folgendes Beispiel zur Veranschaulichung der Deflationsmethode:
Drachen und Pfeil aufgeteilt
(Quelltext zu Drachen und Pfeil aufgeteilt).
Im Hintergrund in blau-violett sind die Grundformen Drachen und Pfeil
dargestellt. Die Grundform wird in verkleinerte Duplikate zerteilt, hier
wieder Drachen und Pfeil, blau, grün und rot gerandet. Diese ersetzen
letztlich die Grundform und sind hier so angeordnet, daß sie erst korrekt
zusammengesetzt eine Parkettierung ergeben.
Bei der Deflationsmethode werden die kleineren Duplikate abermals durch
verkleinerte Duplikate ersetzt, und so fort, bis das Muster fein genug
erscheint.
Prinzipiell ist es egal, auf welche Figur die Deflation letztlich angewendet
wird. Um die endliche Fläche des Anzeigebereiches aber komplett und effektiv
zu parkettieren, bietet es sich an, eine Figur zu wählen, die keine Teile
hat, die allzu weit über den Anzeigebereich hinausragen, um Rechenleistung
und Arbeitsspeicher des Darstellungsprogrammes nicht zu vergeuden, zum Beispiel
eine Sonne.
Statt Drachen und Pfeil selbst zu verwenden, können auch die Rauten verwendet
werden, um die Grundformen zu ersetzen und dann im nächsten Deflationsschritt
wieder verkleinerte Drachen und Pfeile, um diese zu ersetzen.
Andere Variante der Deflationsmethode:
Drachen und Pfeil in Dreiecke aufgeteilt
(Quelltext zu Drachen und Pfeil in Dreiecke aufgeteilt).
Im Hintergrund in blau und orange sind die Grundformen Drachen und Pfeil
dargestellt. Die Grundform wird in verkleinerte Duplikate zerteilt, hier
offene Dreiecke, Strich in blau, grün, rot und magenta. Diese ersetzen
letztlich die Grundform und sind hier so angeordnet, daß sie korrekt
zusammengesetzt eine Parkettierung ergeben.
Je nachdem, wie die Dreiecke zusammengesetzt (oder eingefärbt) werden,
ergibt sich eine Parkettierung mit Dreiecken, Rauten oder mit Drachen und Pfeil.
Hier ein Beispiel für die Deflationsmethode:
Drachen und Pfeil (3)
(Quelltext zu Drachen und Pfeil (3)).
Alle dreißig Sekunden werden dann noch ein paar weitere Grundformen per Animation vorgegeben.
Hier werden jeweils halbe Grundelemente verwendet, diese werden wiederum in einer bestimmten Weise durch ganze oder
halbe Grundelementen ersetzt, die um das Reziproke der goldenen Zahl verkleinert wurden. Das Ganze passiert rekursiv.
Aufgrund der massiven Anwendung von use-Elementen kann das Darstellungsprogramm ein paar Sekunden
brauchen, bis das eigentlich recht kleine Bild dargestellt wird. Bei alten Prozessoren kann es zu Problemen kommen, wenn
die Rekursion zu oft wiederholt wird, letztlich also zuviele Kopien vom Programm verwaltet werden. Bei der Deflationsmethode
zeigt sich auch wieder die Analogie zu Fraktalen. Allerdings wird bei der Deflation nur der letzte Rekursionsschritt wirklich
dargestellt.
Der Ansatz verwendet jeweils halbe Drachen und Pfeile, es geht auch mit ganzen:
Drachen und Pfeil (4)
(Quelltext zu Drachen und Pfeil (4)).
Und es geht auch mit einer asymmetrischen Grundform:
Drachen und Pfeil (5)
(Quelltext zu Drachen und Pfeil (5)).
Hier wird dann auch noch der sichtbare Ausschnitt animiert, damit man sich die Struktur besser im Detail ansehen kann.
Dies ist die Variante mit Überschneidungen:
Drachen und Pfeil (6)
(Quelltext zu Drachen und Pfeil (6))
Weitere Variationen:
Drachen und Pfeil (7)
(Quelltext zu Drachen und Pfeil (7))
Drachen und Pfeil (8)
(Quelltext zu Drachen und Pfeil (8)).
Es ist somit auch recht einfach möglich, bei der Deflationsmethode zu dem Typ mit den Rauten zu wechseln:
Rauten-Typ
(Quelltext zum Rauten-Typ),
oder wenn man so will, beides zu mischen:
Rauten-Typ (2)
(Quelltext zum Rauten-Typ (2)).
Eine andere Interpretation besteht darin, daß man es eigentlich nur mit zwei verschiedenen Dreiecken zu tun
hat und nicht mit Vierecken:
Dreiecks-Typ
(Quelltext zum Dreiecks-Typ).
Eine interessante und öfter diskutierte Konstellation von Drachen und Pfeil ist der sogenannte
Zehnfüßler (oder Dekapus oder lateinisch/englisch auch
decapod). Das Muster bildet ein gleichseitiges Zehneck und hat nur genau eine Spiegelachse
(hier in x-Richtung).
Zehnfüßler
(Quelltext zum Zehnfüßler).
In der Mitte kann man mit etwas Phantasie den Körper des Zehnfüßlers erkennen - ein Käfer oder
eine Fledermaus.
Warum der Zehnfüßler seinen Namen trägt, kann man in der Fortsetzung zu einem sogenannten
Wagenrad (englisch: cartwheel) erkennen.
Bei der Fortsetzung gibt es Bereiche, Strahlen genannt, die eine zehnzählige
Rotationssymmetrie aufweisen und sogenannte Speichen, die dazwischen liegen und im Mittel
immer gleiche Breite ausweisen. Es gibt zwei Arten von Speichen, die zueinander Spiegelbilder sind.
Die Strahlen sind ihr eigenes Spiegelbild. Die Speichen bilden dann gewissermaßen die Füße oder
Gliedmaßen des Zehnfüßler.
Wagenrad
(Quelltext zum Wagenrad).
Die Muster sind in den verschiedenen Bereichen leicht aufgehellt, um die Strukturen besser kenntlich zu machen.
Das Muster kann natürlich leicht weiter fortgesetzt werden:
Wagenrad - Fortsetzung
(Quelltext zur Wagenrad - Fortsetzung).
Auf den Zehnfüßler kann auch die Deflationsmethode angewendet werden und mit jedem
Schritt dreht sich der zentrale Zehnfüßler um 180 Grad, um ihn herum entsteht das Wagenrad, beziehungsweise
die Fortsetzung davon:
Wagenrad - Deflation animiert
(Quelltext zur Wagenrad - Deflation animiert).
Die Mitte der Struktur ist mit einem weißen Kreis zur Hilfe gekennzeichnet, die Animation zeigt jeden
Deflationsschritt, kehrt dann allerdings wieder in eine Inflation um. Opera verweigert bei dieser Animation die
Mitarbeit, die ist jedoch mit dem adobe-plugin oder mit Batik/Squiggle nachvollziehbar, Batik/Squiggle friert allerdings
bei einem großen Deflationsgrad ein.
Wagenrad nach Deflation
(Quelltext zum Wagenrad nach Deflation).
Interessant ist beim Wagenrad, daß auch eine falsche Anordnung der Speichen zu einer aperiodischen
Parkettierung führt:
falsches Wagenrad - 'Quallenballet'
(Quelltext zum falschen Wagenrad - 'Quallenballet').
Eine Deflation ist allerdings nur mit dem Dreieckstyp möglich, was man bei genauem Hinsehen bei den falsch
eingesetzten ehemaligen Speichen erkennen kann, wo sie auf den ehemaligen Zehnfüßler treffen:
falsches Wagenrad - Deflationsproblem
(Quelltext zum falschen Wagenrad - Deflationsproblem).
Um das Problem für eine Teilung mit Drachen und Pfeil auszubügeln, müßte der gesamte
ehemalige Zehnfüßler ersetzt werden, offenbar mit einer Fortsetzung nach innen, die dann wiederum bei einem
Zehnfüßler enden wird, der nur mit einer leicht falschen Anordnung - allerdings immer noch wieder
lückenlos - eingepaßt werden kann.
Wird ein ungerader Deflationsgrad verwendet, ist das Muster im Übergangsbereich zwischen den falschen
Speichen und dem Zehnfüßler zwar immer noch nicht korrekt, es gibt aber wieder eine Parkettierung mit
Drachen und Pfeil:
falsches Wagenrad - Deflationsproblem (2)
(Quelltext zum falschen Wagenrad - Deflationsproblem (2)).
