Ich hatte über die Feiertage ein bisschen Zeit zum experimentieren, also habe ich mir Javascript und das "neue" Canvas-Element vorgenommen. Eins führt zum Anderen und am Ende kann ich FavoGraph präsentieren, ein Javascript, das das Favicon einer Website ständig dynamisch neu mit Spirographen bemalt.
Wer's selbst mal ausprobieren will, lädt sich das Skript aus dem Anhang herunter und notiert in seiner HTML Datei
<script src="favograph.js"></script>
wobei evtl natürlich der Pfad angepasst werden muss. Das Skript erzeugt selbsttätig ein Link-Element des richtigen Typs für das Favicon und startet die notwendigen Funktionen.
Wie das aber mit neuen Technologien allgemein und bei Javascript im Besonderen ist, funktioniert es nicht gleich überall. Man benötigt hier einen Browser, der nicht nur das Canvas-Element samt der Methode getContext("2d") kennt, sondern auch noch toDataURL(), um den Inhalt des Canvas per DataURL übergeben zu können. Dazu zählen unter anderem Firefox in Version 2 und 3 und Opera ab V9.2. Safari unterstützt kein toDataURL, daher leider keine Unterstützung. Der InternetExplorer kann's natürlich gar nicht, jedenfalls nicht in irgendwelchen aktuell öffentlich zu testenden Versionen. Macht aber nichts, in den nicht unterstützten Browsern sieht man eben kein FavIcon und ggf eine Fehlermeldung, ansonsten bleibt alles beim Alten.
Inspiriert wurde FavoGraph durch
Defender of the favicon, dessen Autor übrigens auch
3D Tomb II geschrieben hat, einen Shooter in weniger als 4K Javascript für den Browser im Stile von Wolfenstein 3D.
Eigentlich wollte ich mir Canvas ansehen, um meine
langsame Umsetzung von Langton's Ameise mal ordentlich zu beschleunigen. Langton's Ameise beschreibt einen einfachen Algorithmus, der trotz seiner Einfachheit komplexe Muster zeichnet. Eine Ameise sieht sich die Farbe des Feldes an auf dem sie steht. Hat das Feld die normale Hintergrundfarbe, dann malt die Ameise ihre eigene Farbe dorthin und dreht sich nach links. Ansonsten malt sie die Hintergrundfarbe auf ihr Feld und dreht sich nach rechts. Zum Schluss geht sie immer einen Schritt vor. Nachdem anfänglich erst ein nahezu chaotisches Muster gezeichnet wird, verfällt die Ameise nach einer gewissen Anzahl von Schritten in den Bau einer 45° geneigten "Straße". Die Zeichenfläche ist dabei als Torus zu betrachten, um der Anforderung einer unendlichen Fläche näher zu kommen und die Sache doch etwas interessanter zu gestalten. Denn es muss ja nicht nur eine Ameise in der weiten Welt herumlaufen...
Umgesetzt mit Canvas geht es schon deutlich flotter zur Sache, so dass ich sogar Spielereien einbauen konnte, wie etwa den
Fade-Effekt, mit dem die Spuren der Ameisen mit der Zeit verblassen. So wirkt die Zeichnung von Langton's Ameise fast schon wie ein Screensaver
Über die Ameisen bin ich dann wieder zu
Spirographen gekommen. Der Code hinter dem letzten Link enthält schon alles nötige, für die ganz oben erwähnte und unten angehangene Version, die die Spirographen in das FavIcon malt. Neben der einfachen Punktzeichnung beherrscht das Skript auch Linienzeichnungen, einfarbig und mit Farbverläufen, sowohl radial als auch linear. Ausserdem habe ich ein paar Blendeffekte eingebaut, etwa das bei Langton's Ameise verwendete Fade, das die komplette Zeichenfläche mit einem fast transparent schwarzen Rechteck überzieht und auch einige andere Varianten, die die komplette Fläche wirklich mit einem deckenden Schwarz einfärben, da die transparente Version schwache Schatten hinterlässt. Die Größe des Canvas Elementes und damit auch die darin zu zeichnenden Spirographen wird immer auf die maximal verfügbare Abmessung gesetzt, auch wenn das Anzeigefenster in der Größe verändert wird.
Der Quelltext steht jedem interessierten offen, hier wird nichts obfuscated oder gar verschlüsselt.
Andere Foren
