Generative Art Session 01

Generative Art mit Actionscript. Beeinflusst von Erik Natzke. Das ist Teil 1 meiner Versuche mit Code dem Computer beizubringen ansehnliche Bilder zu produzieren. Der Betrachter kann durch importieren von Bildern seiner Wahl die Farbigkeit des Bildes beeinflussen. Wählt man ein Bild aus nimmt die SWF per Zufall Farbwerte aus dem geladenen Bild und zeichnet mit diesen Farben die zu sehenden Strukturen. Lädt man kein Bild in die SWF werden die Farben per Zufall generiert. Die Entstehung eines Bildes dauert theoretisch unendlich lang. Der User entscheidet daher wann ein Bild fertig ist und speichert es einfach zu dem Zeitpunkt ab an dem es ihm gefällt. Es lohnt sich in jedem Fall der Anwendung etwas Zeit zu geben. Durch einen Klick auf die Leinwand werden bereits gezeichnete Strukturen gelöscht.

Folgend eine kleine Auswahl an Bildern die bisher entstanden sind. Alle Bilder sind nicht mit zufälligen Farben entstanden, sondern haben als Grundlage externe Bilder erhalten die ich in die SWF importiert habe. Das Bild in der Mitte rechts hat 6 Stunden gebraucht, das unten rechts nur 5 Minuten.

Colorful Painting

Ein kleines Experiment mit der Drawing API. 150 Partikel folgen in einem Schwarm der Maus und hinterlassen auf dem Untergrund Linien. Jedes Partikel hat diverse Zufallsparameter erhalten wie es die Linien zu zeichnen hat, wodurch ein möglichst wenig einheitlich wirkender Look erzielt werden soll. Die Farbe wird zu Beginn per Zufall bestimmt und wechselt dann automatisch mit jeder Mausbewegung weiter. Mit einem Mausklick wird alles gelöscht und das Zeichnen beginnt von vorne. Unten links mit dem Button können die entstandenen Kunstwerke als JPG auf der Festplatte gespeichert werden.

Collada 3D Particles

Der nächste logische Schritt. Nach den letzten Experimenten mit der dritten Dimension wollte ich echte 3D Models laden können. Und genau das klappt jetzt auch. Ich habe dazu einen DAE Import geschrieben mit dem es möglich ist Collada Models (1.4 Schema) in Flash zu laden. Da ein DAE File nichts anderes als eine XML ist, war das Einlesen generell kein Problem. Die größte Schwierigkeit bestand darin an die für mich nötigen Informationen zu kommen. Da ich nur Partikel darstellen will brauche ich nur Positionen und keine weiteren Infos die zusätzlich in der Datei enthalten sind. Nach ein paar Versuchen und einem kleinen Parser ist mir das gelungen. Eine Koordinate bestehend aus X,Y und Z steht für ein Partikel. Da das ganze System recht performant läuft, ist es problemlos möglich 100000 und mehr Partikel und somit recht komplexe Models darzustellen.

Für einen reibungslosen Start habe ich bereits ein Model in die Anwendung integriert. Unglaublich viele kostenlose Collada Models gibt es im Google 3D Warehouse. Dort kann man aus hunderten, wenn nicht tausenden Models wählen und sich direkt eine Vorschau in 3D betrachten. Habt Ihr Euch entschieden, einfach auf „Modell herunterladen“ klicken und dann „COLLADA (.zip)“ auswählen. In der ZIP Datei gibt es einen Ordner „models“ in dem sich dann die DAE Datei befindet die Ihr dann in die Anwendung laden könnt. Habt Ihr nun erfolgreich ein Model geladen, seht aber nix, kann das an der Skalierung liegen. In diesem Fall einfach mit dem Mausrad in die Szene rein, bzw. rauszoomen bis das geladene Model zu sehen ist.

Womit wir auch schon bei der Steuerung sind. Mit dem Mausrad kann wie eben beschrieben gezoomt werden. Mit gedrückter linker Maustaste kann das Model frei im Raum gedreht werden. Unten rechts in der Ecke kann das Model auf der X, Y und Z Achse verschoben werden. Der Button unten links dient dazu neue Models zu laden.
Vorausgesetzt wird der Flash Player 10. Für ein optimales Ergebnis öffnet man die Anwendung am besten in einem neuen Fenster.

Hier noch ein paar Screenshots mit diversen Models die alle bis auf den Dinosaurier von Googles 3D Warehouse kommen. Den Dino hat meine Kollegin Mareike Tölle erstellt. Leider ist die Datei zu groß als das ich die hier mit posten könnte.

Sound Visualizer Sphere

Nach erfolgreichen Experimenten mit Matrix3D und Vector3D kam mir direkt die Idee einen neuen Sound Visualizer zu bauen. Mit computeSpectrum, leftPeak und rightPeak vom Soundchannel kann man schon anspruchsvolle Equalizer Animationen bauen, bzw. die anfallenden Informationen dazu nutzen Sound sehr vielfältig und individuell zu visualisieren. Ich hatte bereits diverse Versuche in diese Richtung gestartet, unter anderem mit PV3D im Einsatz.
In diesem Fall gibt es eine zentrale Sphere die aus 1024 Partikeln besteht. Jedes Partikel feuert vom Zentrum der Sphere ausgehend einen Strahl nach außen, dessen Länge vom computeSpectrum beeinflusst wird. Die Skalierung der Sphere, bzw. der ganzen Szene geschieht durch leftPeak und rightPeak in Kombination. Wird hier ein bestimmter maximaler Wert erreicht, werden 3 weitere Spheres angezeigt die zufällig platziert im Raum erscheinen. Im Hintergrund arbeitet ein Starfield das ich vor einiger zeit in AS3 übertragen hatte und das jetzt nur noch zusätzlich entsprechend eingefärbt wird.
Über das Mausrad, bzw. die Position der Maus kann man mit der Anwendung interagieren und die komplette Szene um 2 Achsen drehen. Als musikalische Untermalung dient hier der Song „Printer Jam“ von Mistabishi im Barbarix Remix.
Vorausgesetzt ist der Flash Player 10. Für ein optimales Ergebnis öffnet man die Anwendung am besten in einem neuen Fenster.

Edit: Eine kleine Neuerung ist hinzugekommen. Über den „>> LOAD NEW SOUND“ Button ist es möglich nahezu jedes MP3 das auf dem Rechner liegt in den Sound Visualizer zu laden. Der neue Button erscheint erst wenn die Anwendung gestartet worden ist und ist dann unten links in der Ecke vom Sound Visualizer zu finden. Das Laden der MP3’s hab ich mit der Adobe Filereference und dem MP3FileReferenceLoader von Christopher Martin-Sperry realisiert. Hier noch ein schönes Biespiel zu dem Thema.

Edit: Ein weiteres kleines Update. Mit der Möglichkeit eigene Sounds in die Anwendung zu laden wurde es nötig dem User ein Werkzeug in die Hand zu geben um die Empfindlichkeit, mit der die Anwendung auf Sounds reagiert selbst beeinflussen zu können. Wird ein besonders leiser Song/Sound eingeladen kann man die Empfindlichkeit also entsprechend erhöhen um alle Effekte sehen zu können. Der Slider den ich dafür benutzt habe ist Teil der Minimal AS3 UI Components von Keith Peters. Für den aktuellen Sound ist der Slider bereits perfekt eingestellt.

Posterdruck mit Flash

Warum eigentlich kein Poster in Flash erstellen? Aufgabe war es in sehr kurzer Zeit (ca. 8 Stunden) ein Poster im Format 50x70cm zu erstellen und dieses durch eine Druckerei (A&A Digitalprint Düsseldorf) auf Papier bringen zu lassen. Das Poster sollte ein Mix aus Pixel und Vektor Grafiken werden und mit Vektoren kann Flash ja von Haus aus sehr gut. Nach kurzer Rücksprache mit der Druckerei wusste ich die Eckdaten für die Anlieferung meines Bildes. Das Bild sollte 50x70 cm bei 150 DPI haben, im CMYK Farbraum angelegt sein und als PDF angeliefert werden. 50x70 cm entsprechen 2953x4134 Pixeln. Blöd nur das die maximale Größe eines Flash Files auf 2880x2880 Pixel begrenzt ist, was aber zum Glück kein Problem war. Da Flash ausschließlich im RGB Farbraum unterwegs ist müsste ich das entstandene Bild später eh noch in CMYK umwandeln und somit aus Flash exportieren. Und hier wird’s interessant. Ich habe das Bild in Flash einfach deutlich größer als die Bühne geht gezeichnet. Beim exportieren von Bildern ist Flash die Größe nämlich plötzlich vollkommen egal. So war es nahezu problemlos möglich das fertige Bild in den geforderten 2953x4134 Pixeln als PNG aus Flash heraus zu exportieren und in eine CMYK PSD mit 150 DPI zu importieren. Das ganze hab ich dann wie gefordert als PDF gespeichert und zur Druckerei gebracht. Mit dem Ergebnis bin ich sehr zufrieden. Die Farben kommen super raus und die Konturen sind extrem scharf. In einem entsprechenden Rahmen mit Passepartout wirkt das Bild dann nochmal besser auf den Betrachter. Für ca. 15€ Druckkosten wird das mit Sicherheit nicht das letzte Bild gewesen sein das ich auf diese Weise erstellt habe.

Brownsche Particles 3D

Und wieder die brownsche Molekularbewegung. Diesmal allerdings in 3D. Die Teilchen, bzw. Partikel können sich diesmal frei innerhalb eines Cubes bewegen. Der gesamte Aufbau lässt sich anhand der Position der Maus rotieren. Dazu einfach mit der linken Maustaste in die Anwendung klicken (linke Maustaste gedrückt halten) und mit der Maus umher fahren. Mit dem Mausrad ist es zudem möglich in die Szene rein und raus zu zoomen.
Die Partikel haben Angst vor der Maus. An der Stelle im Cube, an dem sich der Mauszeiger befindet fliehen die Partikel in alle Richtungen.
Um die dritte Dimension möglich zu machen musste ich mich ganz neu mit Matrix3D und Vector3D beschäftigen. Dieser Prozess ist noch nicht abgeschlossen, weil sehr komplex. Ich möchte mich an dieser Stelle bei Thomas Ersosi und Martin Kraft aus dem Flashforum für ihre Unterstützung und Einführung in dieses Thema bedanken. Hier ist der wie ich finde sehr interessante Flashforum Thread zu finden.
Vorausgesetzt ist der Flash Player 10. Für ein optimales Ergebnis öffnet man die Anwendung am besten in einem neuen Fenster.

Brownsche Particles V2

Nächste Runde. Nach diversen Optimierungen präsentiere ich hier nun Version 2 meiner Brownschen Particles. Die Partikel folgen dabei der brownschen Molekularbewegung.

Laut Wikipedia wird als brownsche Bewegung (oder brownsche Molekularbewegung) die vom schottischen Botaniker Robert Brown im Jahr 1827 wiederentdeckte Wärmebewegung von Teilchen in Flüssigkeiten bezeichnet. Dabei beschreibt jedes Atom oder Molekül eine Bewegung, deren Ausmaß temperaturabhängig ist. Mehr dazu hier auf Wikipedia.

Die Anwendung läuft immer noch flüssig mit ca. 65000 Partikeln.
Mit der Maus kann man die Partikel in einem bestimmten Rahmen steuern. Die optimale Performance wird erreicht wenn man die Anwendung in einem extra Fenster öffnet.