Vektor-Wallpaper

Heute habe ich mal wieder ein bisschen mit Inkscape herum gespielt, wobei diese Interessanten Fraktal-artigen, (dreh)symmetrischen Figuren entstanden sind. Ich habe dann Details ausgewählt (und mit selektierten Farben versehen) aus diesem gesamten Set:

Da alles als SVG-Datei angelegt wurde ist es auch beliebig skalierbar. Irgendwie ruft der leicht kubistische Style nach einem Kantenfindungs-Algorithmus, der das Ganze mehr oder weniger automatisch mit Fotos macht... muss ich aber wohl vertagen.

order (custom-made) prints

Film ohne Frames

Ich hatte die Idee eine Animation zu kreieren, die nicht auf Frames basiert, sondern bei der ein Filmstreifen mit einer langen Graphik über einen Projektor läuft.

Eigentlich hat mich schon immer der Effekt interessiert wenn man im fahrenden Zug das Auf und Ab der Oberleitung bzw. früher der Telegraphenleitung beobachtet. Als Zugfenster habe ich jetzt einfach eine Projektionsfläche eingesetzt und als Telegraphendraht ein paar eher abstrakte Formen.

Da ich nicht Projektoren und Film zum Basteln da habe, und ich das auch gerne mit dem Computer ausgleiche, ist die Idee jetzt (vielleicht zunächst) am Computer entstanden.

Technische Umsetzung

Zunächst muss man dem Computer natürlich beibringen, welche Formen am Bildschirm vorbei ziehen sollen. Da die im Endeffekt vorbei laufende Bitmap eine Größe von 1280x191250=244M Pixel hat, was im RAM auf 2,1 GB hinaus läuft, habe ich in der Planungsphase das SVG-Format benutzt. Ich konnte also mit Inkscape schön die Formen konstruieren, während meine zurzeit 6 GB RAM nicht zu sehr belastet werden.

Als nächstes habe ich dann gleich die Einzelframes gerendert. Dazu habe ich mein altbewährtes SVG-Rendering-Script vom Bilder-Züchten in stark vereinfachter Form benutzt: Es hat nur die Aufgabe 6375 Mal den SVG-Viewport etwas nach unten zu rücken und den Frame von Inkscape rastern zu lassen.

Die Musik ist, wie man vielleicht hört, ziemlich experimentell. Sie ist komplett mit dieser Webseite gemacht. Das ganze habe ich dann noch mit MPlayer zusammengefügt:

mencoder "mf://frames/*.png" -mf fps=25 -o output.avi -ovc xvid -xvidencopts bitrate=5000 -oac mp3lame -audiofile musik.wav

Und so ist dann die oben zu sehende Animation entstanden.

Bilder züchten

Der neueste Trend ist es ja anscheinend genetisch zu Programmieren (bzw. programmieren zu lassen). Der Webcomic xkcd greift das Thema auf und Roger Alsing zeigt wie es geht. Mir geht es natürlich nicht darum Algorithmen genetisch zu basteln, oder Bilder nach zu stellen, sondern ich wollte einfach mal den Computer etwas herumprobieren lassen. Da wir in Kunst zurzeit kubistische Bilder malen müssen, habe ich mir gedacht, so etwas könnte doch auch ein Computer hin bekommen. Der Computer malt also Rechtecke, und versucht sie so hin zu bekommen, dass es ungefähr aussieht, wie das Originalbild.

Da das Vorgehen ja ein bisschen an die Biologie angelehnt sein sollte, benutzte ich so etwas, wie einen genetischen Algorithmus. (Es ist also nicht der Algorithmus, der „genetisch“ erzeugt wurde). Im ersten Versuch habe ich dem Computer fünfhundert, zunächst gleiche, weiße Rechtecke auf schwarzem Hintergrund vorgesetzt. Der Computer hat dann immer ein zufälliges Rechteck genommen und zufällig platziert. Die neuen Bilder waren also so etwas wie Kinder. Dann hat eine Fitting-Funktion überprüft, ob sich die Ähnlichkeit zur Vorlage verbessert hat. Wenn ja, hat er dieses neue zufällige Rechteck gespeichert (also in die „DNA“) aufgenommen und dieses Kind als neues Mutterelement verwendet. Hat sich nichts verbessert, hat er einfach ein weiteres Kind erzeugt.

Die Fitting-Funktion

Ich habe ein kleines Python-Script gebastelt, dass die Übereinstimmung zweier Bilder ausrechnen kann. Da alles in schwarz-weiß passiert, geht es jeden Pixel durch und addiert jeweils die Differenz der Rotwerte. Je größer die Zahl ist, desto schlechter passt das Bild. Der Computer favorisiert also Kinder mit kleineren Werten.

Zweiter Algorithmus

Da der erste Algorithmus zwar mit nur 500 Rechtecken immer bessere Näherungen erreicht hat, aber zum Ende hin sehr viele Versuche brauchte um wieder ein besser angepasstes Kind zu finden habe ich einen zweiten Algorithmus gebastelt, der diese Probleme vermeiden soll:

Er züchtet aus einem Elternelement zunächst 500 Kinder. Die Zucht-Funktion fügt allerdings jetzt jeweils ein schwarzes oder weißes Rechteck hinzu, wodurch Fehler schneller korrigiert werden können. Beim alten Algorithmus konnte ein fehlerhaftes Rechteck ja nur verschoben werden, wenn es zufällig gewählt und zufällig richtiger platziert wurde. Die Zahl der Rechtecke entspricht also der der Generation.

Die 500 Kinder sind zunächst noch klein und es werden nur 25% der Pixel gerastert. Die Kinder werden dann mit einer kleineren Version der Vorlage verglichen, und nur die besten 10 werden erwachsen und dann in voller Größe vergleichen. Damit werden nicht mehr so viel Ressourcen (Rechenzeit) für grobe Fehlplatzierungen verschwendet. Aus den letzten 10 Kindern wird dann das, welches in groß am Besten passt, als neues Elternelement gewählt, aus dem wiederum 500 neue Kinder-Bilder gezüchtet werden. Die 499 anderen Kinder werden für immer gelöscht, sodass nun nur noch die Elternelemente (die mit Verbesserungen) konserviert werden um meine Felsplatte zu schonen. So werden immer weiter bessere Merkmale vererbt, bzw. alte Fehler in den Merkmalen korrigiert.

Die DNA

Genau wie bei der echten DNA auch, werden die Informationen so gespeichert, dass die Kinder „wachsen“ können, nämlich als SVG. PHP kann durch seine DOM-Funktionen die DNA leicht verändern und die Rechtecke sind in einem angemessenen Format gespeichert. Mit dem Programm rsvg lassen sich die Rechtecke auch schnell rastern in allen beliebigen Größen.

Das Ergebnis

Der erste Algorithmus „500“ hat nach 21 Stunden 50830 Generationen erzeugt und einen dabei Das Original recht nett angenähert. Ursprünglich habe ich geplant ein kleines Video daraus zu erstellen, doch selbst bei 30 fps wäre es etwa eine halbe Stunde lang, und man würde hauptsächlich die Fehlschläge sehen. Deshalb nur einige Auszüge aus dem Werdegang:

Der zweite Algorithmus „freeSq“ ist so gebaut, dass er ohne Probleme unterbrochen werden kann und deswegen werde ich ihn wohl noch deutlich länger laufen lassen. Aber nach den ersten rund 2 Stunden und 255 Generationen (127500 Versuchen) ist das Entsanden (links Vorlage):

Seltsamerweise ist es etwas zu klobig, es wirkt bisher nicht so fein, dafür ein bisschen komplexer, doch es wird sich zeigen, wie es nach einigen weiteren Generationen aussieht. Da das Ganze sehr viel Zufall beinhaltet, könnte bei einem weiteren Durchlauf auch ein völlig anderes Bild entstehen. Ich bin gespannt.

Übrigens: So sieht Evolution bei den Simpsons aus.

SVN mit SVG und XSLT gibt Visualisierung

Warning: filesize() [function.filesize]: stat failed for /home/jail/bxt/bxt/de.bernhardhaeussner/htdocs/upl/svn+svg+xslt_rockz.tar.gz in /home/jail/bxt/bxt/de.bernhardhaeussner/lib/php/engine.classes.php on line 229

Als ich zum ersten Mal über XSL bzw. XSLT stolperte interessierte es mich sofort. Im Gegensatz zu der von PHP und MySQL gewohnten, mehr oder weniger prozeduralen, Verarbeitung und dem Datensatz-Prinzip werden nun XML-Bäume mit XPath-Templates transformiert. Nun habe ich erstmals eine sinnvollere Anwendung gefunden: Das Transformieren eines XML-Subversion-Logs in eine Visualisierung als SVG.

Vorallem im Web-Bereich liegen fast alle Daten (wenn nicht in einer SQL-DB) in XML-Dateien vor. Ein Beispiel sind AJAX-Anwendungen. Auch viele APIs benutzen XML zur Informationsübermittlung. Natürlich kann auch PHP mit XML umgehen, doch mit XSLT findet sich eine einfachere Möglichkeit, da man im XML-Bereich bleibt und nicht so viel PHP-Syntax und anderes hineinmischen muss.

Natürlich ist XSLT zu PHP grundsätzlich verschieden, da die Scripte nicht „live“ auf einem Server laufen, sondern die Transformation entweder ganz beim Client erfolgt oder das einmal Transformierte Resultat gesendet wird. Und XSLT liegt eigentlich auch fernab von jeder Webanwendung, ganz allgemein eben transformiert es Daten zwischen verschiedenen XML-Formaten.

Nun wird XSLT im Webbereich meist verwendet, um Daten in XHTML-Seiten umzuwandeln, ich verwende allerdings ein anderes Format der XML-Syntax: SVG.

Download

Es ist noch ein kleines Schell-Script dabei, um das Log zu erstellen und den XLST-Prozessor zu starten.

SVG - Flash killer

Inzwischen ist Flash eine recht weit verbreitete Technik, wenn es um Multimedia-Elemente und Animationen auf Webseiten geht. Eigentlich verwunderlich, da es proprietär ist, man ein Browser-Plugin benötigt und es für Suchmaschinen und Textbrowser kaum verwertbar ist. Es wird meist nicht einmal W3C-Konform in XHTML-Dokumente eingebunden.

Zum Glück gibt es eine Alternative: Scalable Vector Graphics (SVG). Diese Auszeichnungssprache für Vektorgraphiken ist nicht nur frei verfügbar, sondern auch vom W3C standardisiert. Alle Browser, die ich habe, unterstützen SVG nativ ohne Plugin, nur IE tanzt mal wieder aus der Reihe, kann aber mit einem Plugin aufgewertet werden.

Wenn man XHTML-Dokumente erstellen kann, muss man kaum etwas lernen um SVG-Inhalte zu Erstellen. Beides sind XML-Dateien und SVG benutzt auch CSS. Die SVG-Syntax ist zudem recht intuitiv. Nur bei Pfaden wird es etwas kompliziert (per Hand). Dafür gibt es mit Adobe Illustrator und Inkscape recht gute Editoren.

Die Animationen werden wahlweise im Javascript-ähnlichen ECMAScript oder in SMIL geschrieben. Dank des XML-Formats können SVG-Dateien auch leicht von PHP oder anderen Parsern erstellt und bearbeitet werden. In Verbindung mit AJAX lassen sich dann soger komplexe Web-Anwendungen basteln, und das mit Dynamischen Pfaden, Weichzeichnern, Transparenz, Masken, Klonen usw.

Der Grund SVG nicht einzusetzen ist die Browseruntertütztung: Es wird von Browsern meistens nicht sehr vollständig unterstützt.

Wie auch immer, noch ein paar Beispiele: Ich habe mal ein interaktives Spiel gebastelt, es existiert eine Demo eines Graphen dessen Dateien in Echtzeit vom Server geholt werden. Es gibt sogar ein jQuery Plugin für SVG. Es steckt also sehr viel Potential in SVG, man kann nur hoffen, dass es irgendwann auch so gut unterstützt wird wie HTML.