Ric's Blog » fraktale

Drachenkurve revisited

ric — Wed, 04 May 2011 08:29:44 +0000

In einem früheren Blogartikel (Drachenkurve, 9.April 2008) schrieb ich, dass ich die Drachenkurve per PHP nachgezeichnet hatte.
Der Nachteil mit dieser Methode war, dass das Erzeugen der Fraktal-Grafik selbst auf einem starken Server recht lange dauert, was zur Folge haben kann, dass der Browser oder der Server nach einer gewissen Zeit einfach abbricht, ohne dass man irgendetwas zu Gesicht bekommt.

Deshalb habe ich die ganze Erstellung der Grafik einfach auf die Client-Seite verschoben. HTML5 bietet nämlich mit dem Canvas-Element und etwas Javascript eine hervorragende Möglichkeit dafür.

Ich habe kurzerhand die ursprüngliche Vorgensweise mehr oder weniger neu mit Javascript gecoded jetzt kann man kann dabei zusehen, wie das Fraktal gemalt wird.
Hier direkt ein Ergebnis:

Wer tatsächlich live zusehen will, wie eine Drachenkurve mit 16 Iterationen gemalt wird, kann hier drauf klicken: Drachenkurve, 16 Iterationen, Live-Beispiel (es wird ein aktueller Browser mit Canvas-Unterstützung benötigt, z.B. Firefox, Chrome, Safari undso).
Da die Berechnung und das Zeichnen auf dem Client-Computer ablaufen, kann es schonmal ein paar Sekunden dauern, bis es anfängt zu zeichnen – abhängig von der Rechen-Leistung des Computers.
Für diejenigen, denen es zu lange dauert, weil mein Code vermutlich keinen Geschwindigkeits-Preis gewinnen würde, hier das fertige Bild.

Nachtrag: Ich hab grad mal versucht, die Seite mit dem Script im Standard-Browser von meinem Android Handy (Milestone, übertaktet auf 1GHz) zu starten… nunja, es funktioniert, aber es dauert laaaaaange…

Flocken ohne Ende

ric — Thu, 10 Apr 2008 17:07:20 +0000

Ich bin jetzt alle Beispiele durchgegangen, die auf der deutschen Wikipedia-Seite zu Fraktalen aufgeführt wurden, welche sich geometrisch konstruieren lassen. Hiermit ist quasi bewiesen, dass die dort angegebenen Regeln (auch “L-Systeme” genannt) zur Konstruktion alle korrekt sind, wobei nicht alle Fälle selbsterklärend sind. Speziell die Hilbert und die Peano Kurve wichen plötlich von der Notation ab: zuerst gab es die Strecken-Variablen L und R und hier auf einmal X, Y UND F. Desweiteren ging man vorher von gleichen Seitenlängen für R/L aus, wobei X/Y plötzlich gar keine Länge mehr hatte und dafür nur noch F abgetragen wurde.

Aber schliesslich habe ich alle Systeme anwenden können. Hier sind die Ergebnisse:

Hilbert Kurve:

Streckenlänge: 4 Pixel
Iterationstiefe: 6
Winkel: 90°

Gosper Kurve:

Streckenlänge: 5 Pixel
Iterationstiefe: 4
Winkel: 60°

Peano Kurve:

Streckenlänge: 3 Pixel
Iterationstiefe: 4
Winkel: 90°

Koch Kurve:

Streckenlänge: 3 Pixel
Iterationstiefe: 4
Winkel: 60°

Penta Plexity:

Streckenlänge: 10 Pixel
Iterationstiefe: 3
Winkel: 36°

Pfeilspitze:

Streckenlänge: 5 Pixel
Iterationstiefe: 6
Winkel: 60°

Sierpinskidreieck:

Streckenlänge: 5 Pixel
Iterationstiefe: 5
Winkel: 60°

Sierpinskiteppich:

Streckenlänge: 3 Pixel
Iterationstiefe: 4
Winkel: 90°

Lévy C Kurve:

Streckenlänge: 3 Pixel
Iterationstiefe: 12
Winkel: 45°

Drachenkurve

ric — Wed, 09 Apr 2008 17:26:21 +0000

So…noch ein bisschen rumgespielt und dabei die Drachenkurve reproduziert:

Dafür bin ich von einem String ausgegangen, in dem anfangs nur “R” steht.
Den habe ich dann in eine (rekursive) Funktion gesteckt, die in jedem Durchlauf folgende Textersetzung durchführt:

“R” -> “+R––L+”
“L” -> “–R++L–”

Das bedeutet, dass nach einem Durchlauf “+R––L+” im String steht und im nächsten dann “++R––L+–––R++L–+“. Nach 14 Durchläufen hat man dann einen kilometerlangen String aus lauter Plussen, Minussen, Ls und Rs. Diesen String habe ich dann als Anweisung zum Malen verwendet, bei dem die Zeichen folgendermassen interpretiert wurden:

“–”: Zeichenrichtung um 45° nach links drehen,
“+”: Zeichenrichtung um 45° nach rechts drehen,
“L”, “R”: eine Linie einer bestimmten Länge (hier: 2 Pixel) in die aktuelle Zeichenrichtung ziehen.

Das ist eigentlich schon alles. Simpler gehts eigentlich kaum, und trotzdem kommt dann so eine mehr oder weniger interessante Grafik heraus.

Mehr dazu gibts in Wikipedia: Fraktal

Fraktale Spielereien

ric — Wed, 09 Apr 2008 15:29:19 +0000

Ich habe mich das erste Mal seit der Schulzeit wieder mit Fraktalen Spielereien beschäftigt und ein paar (trivialere) Beispiele nachgebastelt.

Dafür musste ich aber glatt ein kleines bisschen Schul-Mathematik wiederholen, was eigentlich doch immer wieder Spass machen kann.
Konkret habe ich den Computer simple Farne malen lassen. Die auzufrischenden mathematischen Grundlagen waren hierbei Vektoren (z.B. Berechnung von Betrag/Länge und Winkel) oder auch Schlagworte wie Polarkoordinaten bzw Kartesisches Koordinatensystem.

Jedenfalls ist das alles ganz und gar nichts Neues, aber es kann nicht schaden, auch mal mit sowas rumzuspielen

Links ist ein sehr simpler Farn, der dadurch entsteht, dass an eine Linie quasi eine leicht skalierte Kopie eben jener Linie in einem bestimmten Winkel angelegt wird. Dann legt man an die neue Linie wieder eine im gleichen Maße skalierte Version der zweiten Linie an und wiederholt das so lange, bis die Linie nur noch ein Punkt ist und sich kaum noch eine Veränderung im Bild dadurch ergeben kann.
Rechts ist ein etwas komplexerer Farn, bei dem eben immer zwei verschiedene, skalierte Kopien in verschiedenen Winkeln an die Ursprungslinie angelegt werden.

Während ich mit dem simplen Farn noch keine rekursive Funktion benötigt habe, sondern einfach nur eine begrenzte Schleife benutzt habe, musste ich für den zweiten Farn schon eine sich selbst aufrufende Funktion verwenden, was bei einer Tiefe von zwölf Iterationen durchaus einen merklichen Verbrauch an Sytemressourcen zur Folge hat. Dabei ist die Wahl der Skriptsprache PHP vielleicht auch nicht gerade das Optimum für solche Spielereien…