Mandelbrotmenge   Re:...   Im:...   Imax:   t=?.???s   V=?.??×10?
××px       Anz:   Umk:   Wdh:   Zykl:   Imax:
    Zoom:   Verschieben: %  
  Beispiele:

Hinweise zur Bedienung des Fraktalgrafik-Generators

Nach dem ersten Aufruf erscheint zunächt ein "Apfelmännchen" in vollständiger Ansicht und zweifarbiger Darstellung. (Sollte dies nicht der Fall sein, ist vielleicht JavaScript im Browser deaktiviert.) Von hier ausgehend können durch Ausschnittsvergrößerungen 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ößerungen 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. Schließlich 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. Anschließend folgen noch einige zusätzliche Tips und Hinweise.

Wird der Mauszeiger über ein Eingabefeld oder einen Button bewegt, dann erscheint ein kurzer Hinweistext ("Tooltip") hierzu.

Fraktal-Parameter

Mit den folgenden Parametern wird der dargestellte Ausschnitt und der Detailreichtum der Mandelbrotmenge bestimmt.

Re:-0.7956823317837173...-0.79068056677067     = Von- und Bis-Wert des Realteils (x-Achse).

Im:0.1590018671553155 ...0.16275319091510096 = 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:

Außerdem 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:200    = 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ößerung durch "Hineinzoomen" fest, dass größere "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ößerungen 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.

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ößerungsfaktors in exponentieller Schreibweise (in grüner Schrift). Bei der vollständigen Ansicht der Mandelbrotmenge (Größe 4×4) beträgt der Vergrößerungsfaktor 1 (angegeben als 1.00×100). Je weiter in die Grafik "hineingezoomt" wurde, umso größer ist der hier angezeigte Wert. Ab einer Vergrößerung von ca. 33 Billionen (33×1012) stößt 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ößerung erscheinen die einzelnen Bildpunkte dann zunehmend als Linien bzw. Rechtecke.

Grafik-Parameter

Die folgenden Parameter bestimmen vor allem das farbliche Erscheinungsbild der zu erzeugenden Fraktalgrafik.

1200   ×900    ×1  px = a) Horizontale und vertikale Größe der zu erzeugenden Fraktalgrafik in Pixeln, b) Pixel-Interpolation.

a) Die ersten beiden Werte legen die horizontale und vertikale Größe 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öße 1200 × 900 werden also intern 3600 × 2700 Pixel berechnet. Dementsprechend erhöht sich auch die Berechnungszeit auf das 9-fache.

7 Farben   V                                                                  = Zu verwendende Farbpalette

Hier erfolgt die Auswahl der zu verwendenden Farben, mit denen die Fraktalgrafik gezeichnet werden soll. Es kann zwischen folgenden Paletten gewählt werden:

Anz:0       = 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 "Bildrauschenauschen" 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".

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:1     = 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".

Zykl: = Farbpalette zyklisch wiederholen. Dieser Einstellung bewirkt, dass sich bei Wiederholungen der Farbpaletten die Reihenfolge der Farben alternierend ä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.

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äßig ist diese Farbe auf Schwarz gesetzt, aber durch Anklicken dieses Farbwahlfeldes kann hierfür auch eine beliebige andere Farbe gewählt werden.

Funktionen

Ausschnittsbestimmung per Maus: Hierzu einfach mit gedrückter gehaltener linker Maustaste einen rechteckigen Bildausschnitt markieren. 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.

<< (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.

Zeichnen: 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: + 3     = Zoom-Funktion: Mit Hilfe dieser Buttons kann der dargestellte Ausschnitt aus der Mandelbrotmenge verkleinert oder vergrößert 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ößert wird. Voreingestellt ist 3, d.h. beim Herauszoomen wird der Ausschnitt um den Faktor 3 verkleinert, beim Hineinzoomen um den Faktor 3 vergrößert. 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: 10    % = 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 Aussschnitt bei einem Wert von 10% und einer Bildbreite von 1200 Pixeln um 120 Pixel nach links oder rechts verschoben.

Link = 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] schließt das Fenster wieder.

> png = Grafik als PNG-Datei abspeichern. Nach Anklicken dieses Buttons öffnet sich ein Download-Dialog zum Abspeichern der Bilddatei (falls nicht, siehe "Tips 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.

> txt = 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 "Tips und Hinweise" unten). Leider wird hierbei keine Dateiendung vorgegeben, daher bitte darauf achten, an den eingegebenen Dateinamen die Endung ".txt" anzuhängen!

< txt = Textdatei mit Parametern einlesen. Hier kann eine zuvor abgespeicherte Parameter-Textdatei wieder eingelesen werden. Die Eingabefelder werden daraufhin mit den in dieser Datei enthaltenen Werten ausgefüllt. Nach Klick auf "Zeichnen" wird dann die Fraktalgrafik mit ebendiesen Parametern erzeugt.

Beispiele: (bitte auswählen)V = 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. Nach Klick auf "Zeichnen" wird die Beispiel-Fraktalgrafik erzeugt.

Tips und Hinweise

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.

Versionsgeschichte

20.03.2017

21.03.2017

24.03.2017

06.04.2017


Zum Hauptartikel:
[Das »Apfelmännchen« in JavaScript]