Sierpinski-Dreiecke mit Scalable Vector Graphics

Veröffentlicht am Montag, 24. März 2008, von 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

Achtung: die Seite funktioniert nicht im Internet Explorer. Nicht nur, dass die Vektorgraphiken nicht angezeigt werden, was schon enttäuschend genug ist, auch das Layout erlebt einen fulminanten Crash. Insbesondere die Navigation - die ist ganz weg.

Hier ist ein Link zurück zur Startseite von Alphane Moon für alle gestrandeten IE-Benutzer.

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