Ric's Blog » drachenkurve http://blog.rki-home.de Interessantes oderso... Wed, 04 May 2011 08:42:41 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Drachenkurve revisited http://blog.rki-home.de/2011/05/04/drachenkurve-revisited/ http://blog.rki-home.de/2011/05/04/drachenkurve-revisited/#comments Wed, 04 May 2011 08:29:44 +0000 ric http://blog.rki-home.de/?p=419 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:
Drachenkurve mit 14 Iterationen

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…

]]> http://blog.rki-home.de/2011/05/04/drachenkurve-revisited/feed/ 0 Drachenkurve http://blog.rki-home.de/2008/04/09/drachenkurve/ http://blog.rki-home.de/2008/04/09/drachenkurve/#comments Wed, 09 Apr 2008 17:26:21 +0000 ric http://blogs.rki-home.de/ric/2008/04/09/drachenkurve/ So…noch ein bisschen rumgespielt und dabei die Drachenkurve reproduziert:

Drachenkurve


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

]]> http://blog.rki-home.de/2008/04/09/drachenkurve/feed/ 1