Sierpinski-Dreiecke mit Scalable Vector Graphics

Veröffentlicht am Montag, 24. März 2008, von infinity auf Alphane Moon

Das Sierpinksi-Dreieck ist nach dem polnischen Mathematiker Wacław Sierpiński (1882-1969) benannt, der es 1915 beschrieben hat. Es läßt sich folgendermaßen konstruieren:

  1. Man nimmt ein gleichseitiges Dreieck
  2. Dann verbindet man die Seitenmitten miteinander
  3. Es entstehen vier Dreiecke, das mittlere wird entfernt
  4. Das Verfahren wird für die verbleibenden Dreiecke wiederholt

Sechs Iterationen von Sierpinski-Dreiecken

Das Basisdreieck und die ersten sechs Iterationen mit SVG:

Level 0

Level 1

Level 2

Level 3

Level 4

Level 5

Level 6

Konstruktion mit Scalable Vector Graphics

Eine Konstruktion des Sierpinski-Dreiecks mit Scalable Vector Graphics (SVG) kann man auf folgende Weise erreichen:

<defs>
<path id="level_0" fill="#00DD99" d="M 0 0 L 2 0 L 1 1.732 Z" />
</defs>
<use xlink:href="#level_0" transform="translate(150,50) scale(100)" />

Hier erfolgt keine Iteration (Level 0). Mit einen <path> wird ein gleichseitiges Dreieck definiert und unter den <defs>-Definitionen abgelegt. Mit <use> kann man dieses Dreieck zeichnen.

Für die erste Iteration (Level 1) wird das Dreieck dreimal transformiert. Das resultierende Gebilde wird in einer <g>-Gruppe zusammengefasst, mit einem id-Attribut versehen, und unter den Definitionen gespeichert:

<defs>
<path id="level_0" fill="#00DD99" d="M 0 0 L 2 0 L 1 1.732 Z" />
<g id="level_1">
<use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5 0 0)" />
<use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5 1 0)" />
<use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5 0.5 0.866)" />
</g>
</defs>

Mit <use> kann man das Ergebnis der ersten Iteration zeichnen:

<use xlink:href="#level_1" transform="translate(150,50) scale(100)" />

Bei jeder Iteration werden die drei Transformationen auf das Ergebnis der vorherigen Iteration angewendet. Und bei jeder Wiederholung kommt in den <defs>-Definitionen eine weitere <g>-Gruppe hinzu, die mit <use> gezeichnet werden kann. Sierpinski-Dreiecke mit einer höheren Rekursionstiefe lassen sich über ein Skript generieren, z.B. mit PHP.

Ressourcen

Kommentare

Default Avatar.

#1 Olaf hat geschrieben:

Am 9. April 2009 um 10:53

Für IFS mit SVG kann ich mich auch schon seit längerem begeistern. Derzeit gucke ich mir Penrose-Parkettierungen an, zwar nicht direkt Fraktale, haben aber bezüglich der Umsetzung per Rechner+SVG interessante Gemeinsamkeiten ;o)

Zumindest bei IFS kommt man schnell zu den Grenzen der Möglichkeiten derzeitiger Darstellungsprogramme und CPUs. Da dauert es schnell mal eine Minute, bis eine kleine SVG-Datei dargestellt wird - oder eben im Falle von WebKit auch gerne mal gar nicht, weil dem das zu lange dauert. In der Goggle-Chrome-Variante wird dem Autor sogar ein Fehler unterstellt, wenn es dem Teil zu schwierig wird ;o)
KSVG stellt hingegegen Zwischenergebnisse dar, das hat dann gewissen Unterhaltungscharakter, bis das Endergebnis vorliegt.

Die grüne Fee.

#2 York hat geschrieben:

Am 9. April 2009 um 13:42

Hallo Olaf,

was das Erzeugen von Fraktalen mit SVG und die Darstellung in den verschiedenen Browsern betrifft, habe ich schon einige herbe Enttäuschungen erlebt. Webkit/Safari stürzt oft komplett ab. Und bei Goggle-Chrome gibt es die „So’n Mist!“-Seite zu sehen, das war bei meinem letzten Test bei genau dieser Seite der Fall. Es kann natürlich immer sein, daß ich Fehler im Quelltext mache, aber das Problem tritt manchmal auch bei ziemlich einfachen Grafiken auf. Da kann ich dann nichts dafür, wenn Chrome die Puste ausgeht. Kompliziert ist nicht immer falsch :)

Der aktuelle Firefox braucht manchmal wirklich halbe Ewigkeiten bis eine Seite angezeigt wird, wenn sie etwas mehr SVG benutzt. Die besten Erfahrungen habe ich bisher mit Opera gemacht, der ist schnell und kann viel. Leider ist er nicht so weit verbreitet.

Auf dem Weblog von Sam Ruby habe ich eine schöne Umsetzung der Penrose-Parkettierung gefunden: Penrose-Tiling mit SVG. Das finde ich sehr schön.

Deine Website ist unheimlich gut, da war ich schon öfters zu Besuch. Ich habe mich über deinen Kommentar sehr gefreut :)

Default Avatar.

#3 Olaf hat geschrieben:

Am 10. April 2009 um 14:45

Jaja, der Goggle-Chrome - die unsinnige falsche Beschuldigung von Autoren habe ich da auch gleich bei meiner ersten Nutzung von dem Programm gesehen - in meiner Kunstgalerie, auch bei IFS, die bei anderen Programmen funktionieren und auch korrekt sind. WebKit allgemein steigt da ziemlich schnell aus, die anderen Browser, wo das eingebaut ist, beschuldigen aber zumindest nicht den Autor für die Defizite des Programmes ;o)

Faszinierend fand ich demgegenüber, wie schnell das alte Adobe-plugin solche rekursiven Brocken schluckt und darstellt, diesbezüglich können Opera und die Geckos noch was lernen. Naja, dafür hat das Teil wieder ein paar andere Macken.
Batik/Squiggle ist mir gestern auch bei einer Penrose-Parkettierung ausgestiegen, bei der gleichen hat KSVG nahezu die ganze graphische Oberfläche (KDE) einfrieren lassen.

Das angegebene Beispiel von Sam Ruby zeigt bei mir leider nur eine leere Seite (ich habe java-script auf unbekannten Seiten deaktiviert) - und was man ohne Skripte (oder CSS) sehen kann, ist ja bekanntlich der eigentliche Inhalt der Seite, demnach ist das eine ziemlich langweilige Parkettierung, wenn alles leer bleibt. Meine mit etwas PHP erzeugten Parkettierungen sind immerhin nicht leer, scheint mir eine bessere Umsetzung zu sein. Zudem brauche ich das PHP eigentlich nur, um die Längen zu addieren, wegen der Goldenen Zahl wäre da Kopfrechnen etwas unpraktisch, ansonsten ist das simples SVG, wenn das einmal fertiggestellt ist, da braucht man letztlich für das Ergebnis gar kein Skript. Braucht man für obige Graphiken ja auch nicht.

Die grüne Fee.

#4 York hat geschrieben:

Am 14. April 2009 um 17:09

Das stimmt, leere Seiten haben keinen hohen Unterhaltungswert. Ich hätte vielleicht dazuschreiben sollen, daß im Beispiel von Sam Ruby die Grafiken mit JavaScript erzeugt werden.

Für die Sierpinski-Dreiecke auf dieser Seite habe ich kein PHP benutzt, das bisschen Rechnen ging im Kopf :)

Ich habe jedenfalls dabei viel Spaß gehabt - im Gegensatz zu den Webkit-Browsern, die das rekursive Gerümpel rendern sollen. Und was das Chrömchen angeht: Schuld sind immer die anderen. Das kennt man :)

all content copyright © 2007-2010 Alphane Moon