SVG/ Sternexkurs

Exkurs Sterne, Blüten und Bézierkurven[Bearbeiten]

Um etwas praktische Erfahrung mit Pfadkommandos zu bekommen, soll auf den 'Exkurs Polygone malen' zurückgegriffen werden, dieser wird Bézierkurven fortgesetzt.

Mit einem polygon-Element oder polyline-Element kann man nur einen Linienzug malen, beim path-Element können eine beliebige Anzahl von offenen und geschlossenen Linienzügen zu einem Pfad kombiniert werden. Dies läßt sich auch gut nutzen, um dekorativere und komplexere sternartige Strukturen zu malen als mit den Grundformen, selbst wenn nur gerade Linien verwendet werden:

Linienzug mit Unterpfaden:
Linienzüge können nicht nur offen oder geschlossen sein, sondern können auch aus Unterpfaden bestehen. Das Objekt hier besteht aus einem Pentagramm und einem komplizierteren Gebilde aus fünf gleichen, offenen Linienzügen, die gegeneinander um das Zentrum gedreht sind. Insgesamt ergibt sich so eine fünfzählige Drehsymmetrie.

Zwischen mehreren dieser Objekte wird in einer einfachen Animation des Pfadattributes d interpoliert.

Die Konstruktion beruht im Wesentlichen auf den Formeln für reguläre Polygone. Bei den offenen Unterpfaden wird lediglich jede dritte Linie des regulären Polygons ausgespart. Dafür werden an die verbleibenden Linienzüge ein paar Linien angehängt, deren Punkte haben einfach einen etwas anderen Radius und Winkel.

Reguläre Sterne mit quadratischen Bézierkurven:
Reguläre Sterne mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Kontrollpunkt wird vom Winkel her mittig zwischen den Punkten angeordnet, aber mit anderem Radius. Bei einigen sitzt der Kontrollpunkt auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für den Kontrollpunkt sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Sterne mit quadratischen Bézierkurven (1):
Sterne mit diskreter Drehsymmetrie und mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Kontrollpunkt wird vom Winkel her mittig zwischen den Punkten angeordnet, aber mit anderem Radius. Bei einigen sitzt der Kontrollpunkt auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für den Kontrollpunkt sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Sterne mit quadratischen Bézierkurven (2)

Aufgrund des zusätzlichen Punktes ist die Variationsbreite bei quadratischen Kurven natürlich viel größer als bei einfachen Polygonen:
Sterne mit quadratischen Bézierkurven (2):
Sterne mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Kontrollpunkt wird vom Winkel her mittig zwischen den Punkten angeordnet, aber mit anderem Radius. Bei jedem zweiten sitzt der Kontrollpunkt auf einem größeren Radius, bei den anderen auf einem kleineren. Die Krümmungen zeigen also bei einer Form abwechselnd nach innen und außen, was die Drehsymmetrie des Objektes entsprechend halbiert. Wird für den Kontrollpunkt sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Sterne mit quadratischen Bézierkurven (3):
Sterne mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Kontrollpunkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Punkt wird vom Winkel her mittig zwischen den Kontrollpunkten angeordnet, aber mit anderem Radius. Bei jedem zweiten sitzt der Punkt auf einem größeren Radius, bei den anderen auf einem kleineren. Die Spitzen zeigen also bei einer Form abwechselnd nach innen und außen, was die Drehsymmetrie des Objektes entsprechend halbiert.

Regulärer Stern mit quadratischen Bézierkurven

Auch hier lassen sich natürlich durch Verwendung ähnlicher Unterpfade wieder interessante Effekte erreichen:
Regulärer Stern mit quadratischen Bézierkurven
Das Objekt besteht aus symmetrischen fünfzähligen Sternen als Unterpfaden, deren Krümmung von außen nach innen immer größer wird. Zudem sind die aufeinanderfolgenden Unterpfade leicht gegeneinander verdreht und haben eine gegenläufige Umlaufrichtung. Dadurch entsteht der Eindruck eines Strudels.

Reguläre Sterne mit kubischen Bézierkurven

Mit kubischen Bézierkurven gibt es durch die zwei Kontrollpunkte natürlich noch deutlich mehr Möglichkeiten. Ausgehen kann man natürlich wieder von der Situation mit größter Symmetrie, wo also die Winkel zwischen Punkten und Kontrollpunkten alle gleich sind:
Reguläre Sterne mit kubischen Bézierkurven
Reguläre Sterne mit kubischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten kubischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Die zugehörige Kontrollpunkte werden vom Winkel her mit gleichem Abstand zwischen den Punkten angeordnet, aber mit anderem Radius. Bei einigen sitzen die Kontrollpunkte auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für die Kontrollpunkte sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Reguläre Sterne mit kubischen Bézierkurven (2)

Vertauscht man lediglich die Winkel für zwei benachbarte Kontrollpunkte, gibt es schon wieder deutlich andere Formen:
Reguläre Sterne mit kubischen Bézierkurven (2)
Reguläre Sterne mit kubischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten kubischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Die zugehörige Kontrollpunkte werden vom Winkel her mit gleichem Abstand zwischen den Punkten angeordnet, aber mit anderem Radius und in der Reihenfolge vertauscht. Bei einigen sitzen die Kontrollpunkte auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für die Kontrollpunkte sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Die Symmetrie bleibt natürlich auch erhalten, wenn man beide Kontrollpunkte um den gleichen Winkel, nur mit anderem Vorzeichen verschiebt.

Reguläre Sterne mit kubischen Bézierkurven (3)
Reguläre Sterne mit kubischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten kubischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Die zugehörige Kontrollpunkte werden vom Winkel her mit gleichem Abstand zwischen den Punkten angeordnet, aber mit anderem Radius, zwischen einem Punktepaar innerhalb des Punkteradius, zwischen dem benachbarten Punktepaar außerhalb.

Blüten mit kubischen Bézierkurven
Blüten von Pflanzen haben oft eine diskrete Drehsymmetrie. Sechs kubische Bézierkurven in blütenartiger Form sind locker über den Anzeigebereich verteilt. Oft herrschen rundere Formen vor, die in der einfachsten Variante erreicht werden können, wenn man die Radien der Punkte auf 0 setzt und für die Kontrollpunkte unterschiedliche Radien und Winkel wählt, wobei dies mit der gewünschten Symmetrie wiederholt wird. Kleinere Unregelmäßigkeiten würden kleine Symmetriebrüche erzeugen, die alles etwas organischer, natürlicher aussehen ließe.

Sternexplosion
Eine unregelmäßige Kombination von kubischen Bézierkurven in Unterpfaden bildet ein komplizierteres Strahlenmuster, als ob ein regulärer Stern explodiert sei.

Knickloser symmetrischer Stern
Das Objekt besteht aus symmetrischen fünfzähligen Sternen als Unterpfaden, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon mit zehn Ecken, die ersten Kontrollpunkte sind jeweils automatisch mit dem Kommando S bestimmt, die zweiten liegen bei den gleichen Winkeln wie die Punkte, haben nur unterschiedliche Radien, die eine Hälfte außerhalb, die andere innerhalb des Ausgangspolgyons. So ergibt sich die fünfzählige Symmetrie einschließlich Spiegelachsen.

Knickloser Stern
Das Objekt besteht aus symmetrischen elfzähligen Sternen als Unterpfaden, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon mit zweiundzwanzig Ecken, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten liegen bei den gleichen Winkeln wie die Punkte, haben nur unterschiedliche Radien, die eine Hälfte außerhalb, die andere innerhalb des Ausgangspolgyons.

Blüte mit kubischen Bézierkurven
Das Objekt besteht aus mehreren symmetrischen Kurven, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon mit zehn Ecken, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten liegen bei den gleichen Winkeln wie die Punkte, haben nur unterschiedliche Radien, die eine Hälfte außerhalb, die andere innerhalb des Ausgangspolgyons. So ergibt sich die fünfzählige Symmetrie einschließlich Spiegelachsen.

Blüte mit kubischen Bézierkurven (2)
Das Objekt besteht aus mehreren symmetrischen Kurven, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten sind tangential angeordnet. So ergibt sich die siebenzählige Symmetrie einschließlich Spiegelachsen. Allerdings sind die verschiedenen Kurven um einen festen Winkel gegeneinander versetzt, die gesamte Blüte hat damit keine Spiegelachsen mehr.

Animierter Stern mit kubischen Bézierkurven
Die Animation besteht aus mehreren symmetrischen Kurven.

Basis ist jeweils ein reguläres Polygon, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten sind tangential angeordnet. So ergibt sich die diskrete Symmetrie einschließlich Spiegelachsen für die Einzelkurven. Während der Interpolation ergibt sich natürlich meist eine niedrigere Symmetrie.

Animierter Stern mit kubischen Bézierkurven (2)
Die Animation besteht aus mehreren symmetrischen Kurven.

Basis ist jeweils ein reguläres Polygon, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten sind tangential angeordnet. So ergibt sich die diskrete Symmetrie für die Einzelkurven.