Generative Webcam Art

Idee und Umsetzung

Bei der Ideensuche beschäftigte ich mich viel mit den Möglichkeiten von P5.js (einer Javascript-Bibliothek, die das Erstellen von grafischen und interaktiven Experiences ermöglicht) und von deren Mutter Processing. Da ich letztere vor einiger Zeit für Projekte verwendet habe, die die Kommunikation eines Arduinos mit dem Computer ermöglichten, wie Mit Processing setzte ich Projekte um, bei denen ich einem Arduino mit angeschlossenem RGB-Lichtstreifen über den Computer die Farbauswahl weitergeben konnte oder mit einem Kamerasystem horizontal und vertikal schwenken konnte. Die Projekte beschränkten sich dabei auf kleine Experimente, die nur auf meinem Computer liefen. Beim neuen Projekt gab ich mir deshalb als Devise mit, dass es leicht zugänglich sein muss, keiner zusätzlichen Hardware bedarf und die Features des Geräts, über was es aufgerufen wird, gut nutzt und ausreizt. Somit stand so gut wie fest, dass es sich um eine Website oder Webapps handeln wird. Kurz darauf ergänzte sich dann wie von Zauberhand, dass sich das Projekt um die Kamera als Input drehen soll. Da wir in den Vorlesungen die vielfältigen Möglichkeiten von P5, insbesondere was generative Gestaltung angeht, kennenlernten, und mir der Grafikstil sehr gefiel, fügte sich das eine zum andern und die Projektidee stand fest: Eine Webapp, die generative Gestaltung auf Basis von Kameras erzeugt.

95% des Projekts entstanden in den fünf Tagen des verlängerten Wochenendes um Fronleichnam bei schönstem Wetter auf dem Balkon meiner Eltern.
Nach ersten Experimenten im P5-Editor zog ich in Visual Studio Code um und setzte die Programminfrastruktur auf, um von diesem Punkt aus meiner alt bewährten Trial-and-Error Methode nachgehen zu können. Ich habe für mich nach einer Vielzahl gescheiterter Projekte deren Probleme herauskristallisiert und mir festgelegt, dass ich immer am Anfang eines Projekts zunächst etwas Zeit in Software-Engineering investiere, um eine gute Grundbasis und -struktur zu schaffen, die Experimente und Richtungsänderungen möglich macht.
In meinem kleinen bisher nur auf Grundsteinhöhe existierenden Häuschen angekommen, begann ich alle im P5-Editor schon entstanden Grafikstile zu testen und zu sammeln. Um zwischen den Stilen schnell wechseln zu können, setzte ich auf Switch Cases. Jeder neue Stil bekam ein neues Case. Manchmal flossen bei genauerer Betrachtung Stile zusammen oder erbten voneinander Funktionen und Programmabläufe. Die Auswahl des Nutzers bei Gradients und Contour wird beibehalten, wenn man zwischen den Stilen wechselt.
Rectangles war der erste fertige Stil. Kurz darauf folgten Circles und Triangles. Während alle drei noch relativ „basic“ und ähnlich einfach gewesen sind, verzweifelte ich bei Lines an der Möglichkeit, dass die Linien auch miteinander verbunden werden können. Das Problem lag jedoch in der grundlegenden Programminfrastruktur, da ich zu viel Deklarationen verwürfelt hatte (ja sowas gehört auch mal dazu).
Bei Triangles folgte das Fixed Root Feature durch einen Fehler beim Platzieren der Dreieckspunkte. Das Resultat, dass alle Dreiecke einen Fixpunkt teilen, gefiel mir so gut, dass ich es natürlich beibehalten musste. Hier wird der zweite Teil von „Trial-and-Error“ mal dick und fett unterstrichen.
Pixel und ModernArt kann man als Geschwister verstehen. Während Pixel noch sehr einfach stringent den Pixelart-Weg verfolgt und an Retrospiele aus den 90ern erinnert, ist ModernArt vielfältiger in den Formen und wartet mit Rechtecken, Dreiecken und Kreisen im Pixelraster auf.
Die sechs Stile kann man als Auswahl der von mir programmierten Stile verstehen, die gut funktionieren, ressourcenschonend und bug-frei sind. Nicht unmöglich, dass in Zukunft weitere Stile hinzugefügt werden, da mir das Entwickeln sehr viel Spaß bereitet.

Die Formen entstehen im Laufe der Zeit. Durch Verändern der Perspektive entstehen Bilder, die wie Langzeitbelichtungen aussehen.

Beim Gestalten des „Dashboards“ entschied ich mich für eine kleine links unten platzierte Karte, die die Stile in Tabs und darunter die jeweiligen passenden Einstellungen anbietet. Das Dashboard selbst habe ich mit einem Backdrop belegt, der den Hintergrund verschwommen durchscheinen lässt. Somit ist der Inhalt des Dashboards gut lesbar aber trägt trotzdem zur Gesamtstimmung bei und wirkt nicht als Fremdkörper. Über den Tabs findet man noch sechs Icons (von Google Material Icons), die (hoffentlich) selbsterklärend sind (nach einigen Nutzertests bin ich mir recht sicher, dass dies der Fall ist). Neben Download, Pause, Reset, Camera Flip und Fullscreen kann man mit dem Pfeil das Dashboard einklappen, um die volle Ansicht des generierten Bildes zu bekommen. Der Camera Flip ist das letzte Feature, das ich entwickelt habe, und ist natürlich nur auf mobilen Geräten mit Front- und Back-Kamera verfügbar.
Selbstverständlich muss sich die Webapp responsiv an die Gerätegröße anpassen. Dabei half mir das leichtgewichtige CSS-Framework Simplegrid.

Was noch kommen könnte?!

Obwohl ich zufrieden mit der Stil- und Funktionsmenge bin, habe ich noch einige Anschlussideen, die das Projekt aufwerten oder gar auf ein anderes Level heben könnten.
Funktionen, auf die man nach kurzem Philosophieren kommen könnte, wären ein Vektorgrafik- und Video-Output, zum Beispiel als Zeitraffer-Video.
Spannend wäre das Umstellen auf ein Baukastensystem. Der User könnte dann Stile mischen und deren Verhalten aufeinander abstimmen.
Interessant wäre es auch, wenn man die zufällige Platzierung der Elemente durch Mouse oder Touch-Eingaben ersetzen würde. Man würde also selbstständig auf die schwarze Leinwand pinseln.
Neben mehr Stilen könnten 3D-Stile Einzug halten. Man stelle sich den Rectangles-Stil mit kleinen Würfeln und Tiefe vor.
Wenn man den Blick noch mehr weitet, kommt man auf die Nutzung von neuronalen Netzwerken. Man könnte Elemente aus dem Kamera-Feed herauslesen und als Element verwenden, wie beispielsweise die Augen der Betrachter*innen.

Fazit

Ich bin sehr zufrieden mit dem Projekt, da ich alles, was ich mit vorgenommen hatte, auch umgesetzt bekommen habe und eine Menge dabei gelernt habe. Besonders gut gefällt mir die Vielfältigkeit der Stile und dass die Webapp auf allen Geräten so reibungslos läuft.
P5.js ist eine unfassbar mächtige Bibliothek, die ich in Zukunft einsetzen werde, wann immer die Möglichkeit oder die Notwendigkeit besteht.

Ich möchte sowohl David Bascom für den Kurs und seine Unterstützung sowie den Tester*innen der WebApp für ihr Feedback danken.

Hier noch ein Selbstportrait als Rausschmeißer