Nach dem ersten Aufruf erscheint zunächt ein "Apfelmännchen" in vollständiger Ansicht. (Sollte dies nicht der Fall sein, ist vielleicht JavaScript im Browser deaktiviert.) Von hier ausgehend können durch Ausschnittsvergrösserungen oder "Hineinzoomen" die tieferen Strukturen der Fraktalgrafik erkundet werden. Dabei können die Farben nach Belieben angepasst werden. Auch der Wert Imax sollte bei Bedarf erhöht werden, um bei starken Vergrösserungen mehr Details sichtbar zu machen. Wenn das Ergebnis gefällt, kann das Bild als PNG-Datei abgespeichert werden. Zusätzlich können die Parameter zur Erstellung der Grafik in einer Textdatei gespeichert werden, um diese zu einem späteren Zeitpunkt erneut einlesen und die Grafik zeichnen zu können. Schliesslich kann auch noch ein Link erstellt werden, nach dessen Aufruf die Grafik ebenfalls neu gezeichnet wird.
Nachfolgend werden die einzelnen Parameter und Funktionen erklärt. Anschliessend folgen noch einige zusätzliche Tipps und Hinweise.
Wird der Mauszeiger über ein Eingabefeld oder einen Button bewegt, dann erscheint ein kurzer Hinweistext ("Tooltip") hierzu.
Mit den Parametern in der obersten Reihe des Eingabeformulars wird der dargestellte Ausschnitt und der Detailreichtum der Mandelbrotmenge bestimmt.
Re:... = Von- und Bis-Wert des Realteils (x-Achse).
Im:... = Von- und Bis-Wert des Imaginärteils (y-Achse).
Zur Eingabe der Werte für Real- und Imaginärteil in diese 4 Felder bestehen folgende Möglichkeiten:
Ausserdem werden diese Werte noch durch die Funktionen "Zoom" und "Verschieben" verändert, sowie durch Vor- und Zurückspringen in der History (dazu unten mehr).
Imax: = Maximale Anzahl von Iterationen (wiederholten Berechnungen) pro Bildpunkt (Pixel), auch Iterationstiefe genannt. Je höher dieser Wert ist, umso mehr farbliche Abstufungen werden dargestellt. Wird dieser Wert erreicht, dann wird das entsprechende Pixel mit der Farbe für Imax (s.u.) dargestellt (dies ist z.B. im Innern des "Apfelmännchens" der Fall).
Je weiter man in die Fraktalgrafik hineinzoomt, umso höher sollte der hier angegebene Wert sein. Stellt man z.B. mit zunehmender Ausschnittsvergrösserung durch "Hineinzoomen" fest, dass grössere "schwarze Flecken" sichtbar werden, kann man die Iterationstiefe z.B. in Schritten von 100 oder 1000 erhöhen, um wieder mehr Details zu sehen. Bei sehr hohen Vergrösserungen kann der Wert auch durchaus schonmal bei 50000 oder sogar 100000 liegen. Allerdings kann sich dadurch auch die Berechnungszeit für die Fraktalgrafik auf z.B. über 1 Minute erhöhen.
Wird der Mauszeiger über das Eingabefeld gehalten, dann werden in einem Tooltip folgende Informationen angezeigt:
Diese Angaben sind nützlich, wenn die Option "Kmp" (Farbpalette komprimieren) aktiviert ist. ändert man nämlich die Bildgrösse oder die Anzahl der Subpixel (s.u.), kann sich die Zahl der im Bild vorkommenden Iterationswerte und somit der Farbverlauf ändern. Um das zu vermeiden, kann Imax auf die hier angezeigte grösste vorkommende Iterationszahl gesetzt werden. Ist die Mandelbrotmenge im Bild enthalten, sollte dieser Wert noch um 1 erhöht werden.
Rad: = Fluchtradius. Dies ist der Radius des Kreises um den Mittelpunkt der Gausschen Zahlenebene, der darüber bestimmt, ob ein Punkt zur Mandelbrotmenge gehört oder nicht. Normalerweise ist dieser Wert 2. Bei aktivierter Glättung sollte er jedoch mindestens 4 oder 5 betragen.
DeBanding: = Farbübergänge glätten. Zur Vermeidung sichtbarer Stufen zwischen den einzelnen Farben eines Farbverlaufs kann der Farbverlauf optional geglättet werden. Hierzu wird der bei der Mandelbrot-Iteration Z=Z²+C ermittelte Iteratorwert mit Hilfe der Formel "it = it + 2 - log(log(a²+b²)) / log(2)" von einem ganzzahligen in einen gebrochenen Wert umgerechnet, der abhängig ist von der "Fluchtdistanz" bei Erreichen der Divergenz (nähere Erläuterungen dazu unter Smooth Shading for the Mandelbrot Exterior by Linas Vepstas). Für einen guten Glättungs-Effekt sollte der Fluchtradius statt des üblichen Wertes von 2 mindestens 4, besser 5 betragen.
t=4.464s (Beispielwert) = Anzeige der für die Berechnung und das Zeichnen der Fraktalgrafik benötigten Zeitdauer in Sekunden (in blauer Schrift).
V=1.00×100 (Beispielwert) = Anzeige des Vergrösserungsfaktors in exponentieller Schreibweise (in grüner Schrift). Bei der vollständigen Ansicht der Mandelbrotmenge (Grösse 4×4) beträgt der Vergrösserungsfaktor 1 (angegeben als 1.00×100). Je weiter in die Grafik "hineingezoomt" wurde, umso grösser ist der hier angezeigte Wert. Ab einer Vergrösserung von ca. 33 Billionen (33×1012) stösst dieses einfache Programm allerdings an seine Grenzen, da die maximale Genauigkeit der Gleitkommazahlen in JavaScript bei etwa 16 Stellen hinter dem Komma (bzw. dem Dezimalpunkt) liegt. Bei weiterer Vergrösserung erscheinen die einzelnen Bildpunkte dann zunehmend als Linien bzw. Rechtecke.
Die Parameter in der mittleren Reihe des Eingabeformulars bestimmen vor allem das farbliche Erscheinungsbild der zu erzeugenden Fraktalgrafik.
××px = a) Horizontale und vertikale Grösse der zu erzeugenden Fraktalgrafik in Pixeln, b) Pixel-Interpolation.
a) Die ersten beiden Werte legen die horizontale und vertikale Grösse der erzeugten Fraktalgrafik fest. Die Angabe erfolgt in in Pixeln. Voreingestellt sind 1200 × 900 Pixel. Um z.B. ein Hintergrundbild für Bildschirme im HD-Format zu erzeugen, kann man hier 1920 × 1080 angeben (manche Computermonitore haben auch 1920 × 1200 Pixel).
b) Der dritte Wert ist die Anzahl der "Subpixel" zur Berechnung eines Bildschirmpixels. Dies dient der "Kantenglättung" der erzeugten Fraktalgrafik. Hierzu wird jeder Bildpunkt in mehrere neben- und übereinander liegende "Subpixel" unterteilt. Für jedes dieser "Subpixel" wird ein eigener Farbwert berechnet. Die resultierende Farbe des Bildschirmpixels ergibt sich dann aus dem Durschschnittswert der Farben aller "Subpixel". Bei dem hier einzugebenden Wert handelt es sich somit um die Seitenlänge eines virtuellen Quadrates, dessen Pixel zu einem Pixel interpoliert werden. Ein Wert von 3 bedeutet z.B., dass jeder Bildpunkt in 3 × 3 = 9 Unterpunkte aufgeteilt wird. Für eine Grafik der Grösse 1200 × 900 werden also intern 3600 × 2700 Pixel berechnet. Dementsprechend erhöht sich auch die Berechnungszeit auf das 9-fache.
= Zu verwendende Farbpalette
Hier erfolgt die Auswahl der zu verwendenden Farben, mit denen die Umgebung der Mandelbrotmenge gezeichnet werden soll. Es kann zwischen folgenden Paletten gewählt werden:
= Linearität des Farbverlaufs
über diese Dropdown-Box kann die Linearität des Farbverlaufs bestimmt werden. Normalerweise "drängen" sich die Farben in der Nähe des Randes der Mandelbrot-Menge stärker als weiter weg davon, was zur Folge hat, dass die Umgebung der Mandelbrot-Menge etwas "einfarbig" erscheint. Je nach Auswahl einer Linearität wird der Farbverlauf mehr oder weniger stark "entzerrt" und der untere Bereich der Iteratorwerte – also die Bereiche, die sich weiter von der Mandelbrot-Menge entfernt befinden – farblich differenzierter dargestellt. Bei Auswahl von "log" (logarithmisch), "gam" (Gamma) und "tanh" (Tangens Hyperbolicus) kann über den Schieberegler die Stärke der Entzerrung eingestellt werden. Dessen Wert wird rechts daneben auch als Zahl angezeigt.
Einige Beispielbilder für die oben aufgeführten Methoden zur Entzerrung des Farbverlaufs befinden sich auf der Seite Color Mapping (englischsprachig).
Anz: = Anzahl der darzustellenden unterschiedlichen Farben. Hiermit kann die Anzahl der verschiedenen auszugebenden Farben auf einen bestimmten Wert begrenzt werden. Der Wert 0 bedeutet: Keine Beschränkung, es werden alle möglichen Farben der gewählten Palette dargestellt. Dadurch ergeben sich sanfte Farbübergänge und feine Details werden sichtbar. Ein Wert ab 2 bedeutet, dass aus der gewählten Palette nur diese Anzahl von Farben benutzt werden, um das Bild zu zeichnen. Je kleiner dieser Wert ist, umso "stufiger" wird der Farbverlauf und umso mehr treten die "Höhenlinien" hervor, allerdings gehen dann auch die feinen Details im "Bildrauschen" zunehmend unter. Bei dem kleinsten erlaubten Wert von 2 wird beispielsweise nur die erste und die letzte Farbe der gewählten Palette verwendet. Diese Angabe gilt nicht für die Farbpalette "Zufall" und auch nicht bei Auswahl der Linearität "Automatisch".
Kmp: = Farbpalette komprimieren. Ein Setzen dieses Häkchens bewirkt, dass alle Farben der gewählten Palette im Bild erscheinen. Normalerweise wird die Farbpalette gleichmässig auf den gesamten Iterationsbereich aufgeteilt, d.h. die Bildpunkte mit 1 Iteration bekommen die 1. Farbe und die Bildpunkte mit 199 Iterationen (bei Imax = 200) die letzte Farbe. Ist nun bei tieferem Hineinzoomen in die Fraktalgrafik nicht mehr der gesamte Iterationsbereich im Bild sichtbar, weil z.B. die Bildpunkte mit 1 bis 50 Iterationen nicht mehr im Bild erscheinen, dann fehlen die unteren 25% der Farben im Bild. Durch Setzen dieser Option wird bewirkt, dass die Farbpalette immer auf alle im Bild vorkommenden Iterationszahlen aufgeteilt wird – in diesem Beispiel also auf die Bildpunkte mit den Iterationszahlen 51 bis 199. Diese Angabe gilt nicht für die Farbpalette "Zufall" und auch nicht bei Auswahl der Linearität "Automatisch".
Umk: = Reihenfolge der Farben der gewählten Palette umkehren. Ist z.B. die erste Farbe der Palette Rot und die letzte Grün, dann bewirkt ein Setzen dieses Häkchens, dass im Bild Grün zuerst und Rot zuletzt kommt. Diese Angabe gilt nicht für die Farbpalette "Zufall".
Wdh: = Anzahl der Wiederholungen der Farbpalette. Gibt an, wie oft die Farben der gewählten Palette über den gesamten Itertationsbereich hinweg wiederholt werden. Der Wert muss mindestens 1 betragen. Je höher der Wert, umso öfter kommt die Farbfolge im Bild vor. Beispiel: Bei einer dreifarbigen Palette mit den Farben Rot, Gelb und Grün und 2 Wiederholungen erscheint im Bild die Farbfolge "Rot, Gelb, Grün, Rot, Gelb, Grün". Diese Angabe gilt nur für die Farbpaletten "2 Farben" bis "7 Farben".
Alt: = Richtung der Farbpalette alternieren. Diese Einstellung bewirkt, dass sich bei Wiederholungen der Farbpaletten (Wdh > 1) die Reihenfolge der Farben abwechselnd ändert. Beispiel: Bei einer dreifarbigen Palette mit den Farben Rot, Gelb und Grün und 3 Wiederholungen erscheint im Bild die Farbfolge "Rot, Gelb, Grün, Gelb, Rot, Gelb, Grün". Diese Option ist vor allem für Farbpaletten sinnvoll, deren erste und letzte Farbe verschiedenen sind. Bei nicht aktivierter Option würde es an den Stellen zwischen den Wiederholungen zu harten "Farbsprüngen" kommen. Diese Option gilt nur für die Farbpaletten "2 Farben" bis "7 Farben" und wenn die Anzahl der Wiederholungen mindestens 2 beträgt.
DeHalo: = Farbsäume reduzieren. Manchmal kommt es bei Farbverläufen zu sichbaren Farbsäumen zwischen zwei benachbarten Farben. Dies kann ein erwünschter Effekt sein, es kann jedoch auch störend wirken. Bei aktivierter Option wird statt des linearen übergangs zwischen zwei Farben ein sinusförmiger übergang verwendet. Hierdurch werden die übergänge zwischen zwei benachbarten Farben etwas fliessender, wodurch der Farbsaum verschwindet. Insgesamt wird das Bild dadurch "weicher". (Mehr Hintergrundinformationen zu diesem Thema auf dieser Seite.) Diese Angabe gilt nur für die Farbpaletten "2 Farben" bis "7 Farben".
Imax: = Farbe für Iterationsgrenze. Hier kann die Farbe für die Pixel gewählt werden, deren Anzahl Iterationen dem Wert Imax entspricht, was z.B. beim "Inneren" des "Apfels" der Fall ist. Standardmässig ist diese Farbe auf Schwarz gesetzt, aber durch Anklicken dieses Farbwahlfeldes kann hierfür auch eine beliebige andere Farbe gewählt werden.
Ausschnittsbestimmung per Maus: Hierzu einfach mit gedrückter gehaltener linker Maustaste einen rechteckigen Bildausschnitt
markieren. Wird dabei die Strg-Taste gedrückt, dann entspricht der erste Mausklick dem Mittelpunkt des Ausschnitts.
Die dem gewählten Ausschnitt entsprechenden Werte für Real- und Imaginärteil werden danach in den Eingabefeldern gelb hinterlegt
angezeigt. Nach Betätigung des Buttons [Zeichnen] wird dann eine neue Grafik mit dem gewählten Ausschnitt gezeichnet. Um die Markierung
zu entfernen, genügt ein einfacher Klick in das Bild.
Diese Funktion ist leider bei Touch-Screens (ohne Maus) zumindest bei Android nicht möglich.
In der untersten Reihe des Eingabeformulars befinden sich verschiedene Buttons zur Steuerung des Fraktalgrafik-Generators:
(Zurück) und (Vorwärts) = History (Verlauf): Mit Hilfe dieser Buttons kann – ähnlich wie bei einem Web-Browser – durch die "History" (Verlauf) der gezeichneten Grafiken gesprungen werden. Nach Anklicken eines dieser Buttons werden die Parameter der zuvor bzw. danach gezeichneten Bilder in die Eingabefelder geladen. Das Bild wird noch nicht sofort gezeichnet; hierzu muss der Button [Zeichnen] angeklickt werden. Jedes Zeichnen mit veränderten Parametern erzeugt einen neuen History-Eintrag ab der aktuell ausgewählten Verlaufsposition. Ggf. vorhandene nachfolgende Einträge werden dabei gelöscht.
: Zeichnet die Grafik mit den angegebenen Parametern. Während des Bild gezeichnet wird, lautet die Bezeichnung dieses Buttons "Stop". Durch eine Klick darauf kann eine länger dauernde Grafikerstellung abgebrochen werden. Falls seit dem letzten Zeichnen nur die Farbeinstellungen geändert wurden, aber nicht die übrigen Parameter, dann wird die Fraktalgrafik nicht erneut berechnet, sondern nur neu gezeichnet, was wesentlich schneller geht als eine komplette Neuberechnung. So kann man nach Belieben mit den Farben herumexperimentieren, ohne jedesmal lange auf das Ergebnis warten zu müssen.
Zoom: = Zoom-Funktion: Mit Hilfe dieser Buttons kann der dargestellte Ausschnitt aus der Mandelbrotmenge verkleinert oder vergrössert werden, was einem "Herauszoomen" aus dem Bild bzw. einem "Hineinzoomen" in das Bild entspricht. Die Zahl im Eingabefeld rechts neben diesen beiden Buttons gibt den "Zoom-Faktor" an, also den Faktor, um den der Ausschnitt verkleinert oder vergrössert wird. Voreingestellt ist 3, d.h. beim Herauszoomen wird der Ausschnitt um den Faktor 3 verkleinert, beim Hineinzoomen um den Faktor 3 vergrössert. Es können beliebige Werte angegeben werden, also z.B. auch 10 oder 100, aber auch "krumme" Werte wie 1.5 (wichtig ist hierbei, als Dezimaltrennzeichen einen Punkt statt eines Kommas einzugeben).
Verschieben: % = Verschiebe-Funktion: Mit diesen vier Buttons kann der dargestellte Bildausschnitt nach links, rechts, oben oder unten verschoben werden. Die Prozenzzahl im Eingabefeld rechts neben diesen vier Buttons gibt an, um welche Betrag der Ausschnitt verschoben werden soll. Der Wert bezieht sich auf die Abmessungen des Bildes. Beispielsweise wird der Ausschnitt bei einem Wert von 10% und einer Bildbreite von 1200 Pixeln um 120 Pixel nach links oder rechts verschoben.
= Link zu dieser Grafik erzeugen. Nach Anklicken dieses Buttons öffnet sich ein Fenster mit einer URL zum Fraktalgrafik-Generator mit den aktuellen Parametern zum Zeichnen der Fraktalgrafik. Wird diese URL in einem Web-Browser aufgerufen, dann wird die Grafik mit den enthaltenen Parametern sofort gezeichnt. Mittels der Tastenkombination <Strg><C> kann die URL aus dem Eingabefeld des Fensters in die Zwischenablage kopiert werden, um sie z.B. in einer E-Mail zu versenden, in einem Forum zu posten oder auf einer Webseite zu verlinken. Der Button [OK] öffnet die URL zu Testzwecken in einem neuen Browser-Tab. Der Button [Abbrechen] schliesst das Fenster wieder.
= Grafik als PNG-Datei abspeichern. Nach Anklicken dieses Buttons öffnet sich ein Download-Dialog zum Abspeichern der Bilddatei (falls nicht, siehe "Tipps und Hinweise" unten). Leider wird hierbei keine Dateiendung vorgegeben, daher bitte darauf achten, an den eingegebenen Dateinamen die Endung ".png" anzuhängen! Alternativ kann das Bild auch duch Rechtsklick und Auswahl von "Grafik speichern unter..." abgespeichert werden. Hierbei schlägt Firefox den Namen "canvas.png" vor.
= Parameter als Textdatei abspeichern. Diese Datei enthält die zum Zeichnen der Mandelbrot-Bildes verwendeten Fraktal- und Grafik-Parameter. Hat man z.B. einen schönen Ausschnitt gefunden, kann man sich die Parameterdatei zur späteren Verwendung abspeichern oder einem anderen Benutzer dieses Programms schicken. Nach Anklicken dieses Buttons öffnet sich ein Download-Dialog zum Abspeichern der Textdatei (falls nicht, siehe "Tipps und Hinweise" unten). Leider wird hierbei keine Dateiendung vorgegeben, daher bitte darauf achten, an den eingegebenen Dateinamen die Endung ".txt" anzuhängen!
= Textdatei mit Parametern einlesen. Hier kann eine zuvor abgespeicherte Parameter-Textdatei wieder eingelesen werden. Nach Anklicken dieses Buttons öffnet sich zuerst ein Dialog zur Auswahl der einzulesenden Parameter. Es können alle Parameter oder auch nur ein Teil der Parameter eingelesen werden (z.B. nur die Farben). Nach Klick auf [OK] wird die Textdatei eingelesen und die Eingabefelder mit den ausgewählten Werten aus der Datei ausgefüllt. Nach Klick auf [Zeichnen] wird dann die Fraktalgrafik mit den aktuell gesetzten Parametern erzeugt.
(Tipp: Die Parameter "Real", "Imaginary" und "Magnification" in der Textdatei sind alternative Angaben zur Bestimmung des Ausschnitts aus der Fraktalgrafik zur Verwendung mit anderen Fraktalgrafik-Programmen wie "Fractal eXtreme" oder "Ultra Fractal". Sie werden vom JavaScript-Fraktalgrafik-Generator nur interpretiert, wenn die Parameter "reMin", "reMax", "imMin" und "imMax" in der Textdatei fehlen. Dies ermöglicht den Austausch dieser Parameter zwischen dem JavaScript-Fraktalgrafik-Generator und anderen Programmen, die diese alternative Schreibweise zur Bestimmung des Ausschnitts verwenden.)
Beispiele: = Auswahl einiger Beispiele. Hier stehen einige Beispiel-Fraktale zum Ausprobieren bereit. Nach Auswahl eines Eintrages aus der Dropdown-Box werden die dazugehörigen Parameter in die Eingabefelder geladen und die Beispiel-Fraktalgrafik erzeugt.
Diese JavaScript-Anwendung erfordert einen modernen Browser mit HTML5-Unterstützung. Getestet wurde sie in Firefox 46, Chrome 49, Opera 36 und Internet Explorer 11. Letzterer Browser zeigt statt der Farbwahlfelder leider nur normale Eingabefelder mit dem Hexcode der Farbe (z.B. "#FF0000").
JavaScript muss natürlich in den Browser-Einstellungen aktiviert bzw. über entsprechende Add-ons wie "NoScript" zugelasen sein.
Falls beim Speichern der PNG- oder TXT-Dateien kein Download-Dialog ("Speichern unter" etc.) zur Angabe des Speicherortes und des Dateinamens erscheint, sondern die Datei stattdessen automatisch in einem vorgegebenen Download-Ordner landet, dann kann dies in den Browser-Einstellungen wie folgt geändert werden (hier Beispiele für 3 Browser - bei den anderen wird es ähnlich sein):
Dieses Script kann frei verwendet werden. Der gesamte Quellcode ist in der vorliegenden HTML-Datei enthalten und kann auch lokal abgespeichert und "offline" in einem Browser geöffnet und benutzt werden.
The English translation of the operating instructions is in progress! Until I have finished it, you can use the tooltips which appear when you hold the mouse cursor over the UI elements (input fields, check boxes, dropdown boxes, buttons).
Click here to display the German instructions.
Zum Hauptartikel:
[Das »Apfelmännchen« in JavaScript bei Stefam Boin]