Das »Apfelmännchen« in JavaScript

Faszinierende Fraktalbilder im Browser erzeugt

[Zum Fraktalgrafik-Generator] [Die schöne Julia] [Retro-Apfel]

Die Mandelbrot-Menge

Bilder der sogenannten "Mandelbrot-Menge" sind deshalb so faszinierend, weil die komplexen und schönen Bilder auf äußerst simplen Rechenoperationen beruhen: Der Farbwert jedes Bildpunktes ist lediglich das Ergebnis dieser einfachen Berechnung.

Die genauen theoretischen Hintergründe spare ich mir an dieser Stelle − hierüber kann man im WWW, z.B. auf Wikipedia (Deutsch, Englisch), alles im Detail nachlesen. Auch Jürgen Köller hat diesem Thema eine eigene Seite auf seiner Homepage "Mathematische Basteleien" gewidmet.

Ich selbst habe erstmals Ende der 1980er-Jahre auf dem Homecomputer C64 mit Fraktalgrafiken experimentiert. Für ein Bild von gerade mal 320×200 Pixeln benötigte ein in BASIC geschriebenes Programm geschlagene 24 Stunden! Ein später in Assembler geschriebenes Programm namens "TURBO-APFEL" (nomen est omen!) erledigte dieselbe Aufgabe dann in sagenhaften 4-5 Stunden. ;-)

An diesem Poster aus 9 zusammengeklebten und mit einem 8-Nadel-Drucker bedruckten DIN-A4-Blättern hat der arme C64 mehrere Nächte lang gerechnet:



1992 in meinem damaligen Zimmer mit "Apfelmännchen"-Poster an der Wand
 

Mehr zur "Historie" meiner frühen Versuche mit Fraktalgrafiken auf dem C64 und später dem DOS-PC findet sich an dieser Stelle.

Einen eigenen Artikel habe ich den Julia-Mengen gewidmet – jenen punktsymmetrischen Gebilden, die einem beim Erkunden der Mandelbrot-Menge immer wieder begegnen.

Der JavaScript-Fraktalgrafik-Generator

Nachdem ich 1989 meinen C64 und 1997 auch den DOS-PC ausgemustert hatte, habe ich mich nicht mehr weiter mit Fraktalgrafiken befasst. Letzte Woche (Mitte März 2017) bekam ich dann auf einmal Lust, wieder an meine damaligen Versuche anzuknüpfen. Angefangen habe ich mit einem in C++ geschriebenen Programm , bin dann aber schnell zu JavaScript übergegangen, was auch den Vorteil hat, dass das Programm nicht erst umständlich auf dem Rechner installiert werden muss, da es in jedem Web-Browser und zudem auch unter jedem gängigen Betriebssystem läuft.

Ich war richtig erstaunt, wie schnell die Berechnung einer Mandelbrot-Menge in JavaScript vonstatten ging! Ursprünglich hatte ich mit mindestens einer Verzehnfachung der Rechenzeit gegenüber dem C++-Programm gerechnet, da ich davon ausgegangen war, dass ein JavaScript-Programm, das ja nur als Quellcode vorliegt und erst zur Laufzeit von einem Interpreter (ähnlich wie bei BASIC) gelesen und ausgeführt wird, viel langsamer sein müsste als ein Programm, das von einem Compiler in direkt von der CPU ausführbaren Maschinencode umgesetzt wurde. Aber offenbar wurde JavaScript sehr auf Geschwindigkeit hin optimiert (wahrscheinlich wird als Zwischenschritt ein schneller Bytecode erzeugt) – bei den scriptlastigen Webseiten heutzutage ist das sicher auch angebracht... Das Ergebnis: Wo der C64 damals für ein winziges 320×200-Pixel-Bildchen (das entspricht von der Größe her ungefähr den unten gezeigten Vorschaubildern) noch mehrere Stunden gebraucht hat, benötigt das in JavaScript geschriebene Programm selbst auf meinem mittlerweile über 8 Jahre alten PC für ein 17-mal so großes Bild nur Sekundenbruchteile. – Wenn es sogar möglich ist, einen kompletten PC inklusive lauffähigem Linux-System in JavaScript zu implementieren und im Web-Browser laufen zu lassen (siehe jslinux), dann stellt ein "Apfelmännchen" für heutige Browser wohl keine besondere Herausforderung mehr dar... ;-)

Mein JavaScript-Fraktalgrafik-Generator weist noch einige besondere Features auf: Neben der standardmäßigen Zoom- und Ausschnittsvergrößerungs-Funktion gibt es auch eine History (ähnlich wie bei einem Web-Browser), Funktionen zum Verschieben des Ausschnitts sowie zum Speichern des erzeugten Bildes und zum Speichern und Laden der für die Bilderzeugung benutzten Parameter in einer Textdatei. Außerdem können Links erzeugt (und dann – wie das auf Neudeutsch so schön heißt – "geteilt") werden. Bei Aufruf eines solchen Links im Web-Browser wird der Fraktalgrafik-Generator dann mit den in der URL hinterlegten Fraktal- und Grafikparametern initialisiert und das Bild direkt im Browser gezeichnet.

Hier geht es zum Fraktalgrafik-Generator in JavaScript (der Link öffnet ein neues Browser-Tab).

Alle Erklärungen zur Bedienung (falls überhaupt erforderlich) befinden sich ebenfalls dort.

Die »Apfelmännchen«-Galerie

Hier einige mit dem JavaScript-Fraktalgrafik-Generator erzeugte Bilder. Durch Klick auf ein Vorschaubild öffnet sich der Fraktalgrafik-Generator in einem neuen Browser-Tab und zeichnet das Bild im Format 1200×900.

Solltest Du (der Leser dieser Seite) selbst ein schönes Bild im unendlich großen »Apfelmännchen-Universum« entdeckt haben, dann würde ich mich über einen entsprechenden Link freuen (hierzu einfach den Button "Link" im Generator anklicken und mir die URL mittels "Kopieren und Einfügen" per E-Mail schicken). Ich werde das Bild dann ggf. hier in die Galerie mit aufnehmen (und auf Wunsch Deinen Namen dazuschreiben und/oder Deine Webseite verlinken).

Das »Apfelmännchen« in der Gesamtansicht »Spirale« Dieselbe »Spirale« in Schwarzweiß-Darstellung
     
»Stern« »Baum« (erinnert das nicht an eine Birke?) »Gewitter«
     
»Miniapfel« »Tal der Seepferdchen« »Satellit«
     
»Julia in the Sky« (Julia-Menge) »Furry Julia Island« (lange Berechnungszeit!) »Feuerspinne« (lange Berechnungszeit!)
     
   
Maile mir einfach Deinen Fraktalgrafik-Generator-Link!    


(Stand: 26.03.2017)


Homepage > Apfelmännchen in JavaScript