Spezialisierung
Nora Prinz
Multimediadesign M.A.
Tristan Schulze
Sommersemester 2022
Burg Giebichenstein Kunsthochschule Halle

Hier finden sich die Ergebnisse meiner Spezialisierung. Es ist eine Sammlung von p5.js Sketches, bei denen der Fokus jeweils auf wenigen – oder einer einzigen – Funktionalitäten liegt. Die Funktionen, die hier bearbeitet wurden, waren in früheren Projekten Probleme, die ich nicht oder nur unzureichend lösen konnte. Oder es sind Funktionen, die ich für zunkünftige Projekte nutzen möchte. Der Titel/Schwerpunkt ergibt sich aus meinen Arbeiten, die sich alle um digitales Lesen drehen. Für mich sind die hier aufgelisteten Funktionen für die digitale Inszenierung von Texten relevant. Die Ergebnisse sind hier in einer Art Bibliothek aufgelistet, die erweitert werden kann und soll.

Für diesen Sketch habe ich mir zunächst das Tutorial von Daniel Shiffman/The Coding Train angesehen (hier wird auch über die Entstehung und die Hintergründe gesprochen) und habe dann mit den Beispielen auf der PoseNet-Seite weitergearbeitet. Sie sind dort direkt als Beispiele im p5.js-Editor verlinkt. Das Beispiel PoseNet_part_selection war für mich am sinvollsten, weil ich den einzelnen Keypoints verschiedene Worte zuordnen wollte. Soll an jedem Keypoint das gleiche Element erscheinen ist das Beispiel PoseNet_webcam besser.
Im .html Code wird die ml5.min.js Library verlinkt, im .js PoseNet aktiviert und dann können die einzelnen Keypoints angesprochen werden. Vorraussetzung ist, dass über die Webcam ein Körper erkannt wird.
Ich habe den FacingMode auf Environment gesetzt, so wird auf einem mobilen Endgerät die hintere Kamera genutzt. Das Video lasse ich nicht anzeigen. Anstelle bunter Kreise habe ich an die Keypoints Worte gesetzt. Bisher sind es die Beschreibungen der Körperteile. Doch mit etwas Fantasie und Inspiration kann bestimmt eine gute Wortauswahl getroffen werden. So können Sätze und Sinnzusammenhänge durch Körperbewegungen entstehen und verändert werden.

Um die Bewegung eines mobilen Endgeräts den Code, hier die Farbe des Hintergrunds, beeinflussen zu lassen, habe ich das deviceMoved() Beispiel aus den p5.js References genutzt. Zusätzlich habe ich eine Sinusfunktion eingebaut, sodass der Farbwert flüssig heller und dunkler und wieder heller wird. Im ursprünglichen Beispiel gibt es einen sanften Übergang von schwarz zu weiß und dann einen harten Sprung zu schwarz.

Um die Fingerbewegung auf einem mobilen Endgerät den Code, hier die Farbe des Hintergrunds, beeinflussen zu lassen, habe ich das touchMoved() Beispiel aus den p5.js References genutzt. Zusätzlich habe ich eine Sinusfunktion eingebaut, sodass der Farbwert flüssig heller und dunkler und wieder heller wird. Im ursprünglichen Beispiel gibt es einen sanften Übergang von schwarz zu weiß und dann einen harten Sprung zu schwarz. Damit der Effekt auch am Desktop funktioniert habe ich zusätzlich eine mouseWheel() Funktion hinzugefügt.

Auf der Suche nach geeigneten Lösungen für weiche Farbverläufe, bin ich auf Perlin Noise gestoßen. Farbverläufe, Farbwolken, die sich durch bestimmte Parameter verändern, ohne abzulenken, sind, meiner Meinung nach, gut als Texthintergründe geeignet. Die User*in kann so entscheiden, ob sie mit dem Einfluss auf die Veränderung spielen oder lieber lesen und sich nicht weiter damit beschäftigen möchte. Perlin Noise ist eine gut Lösung dafür, weil es zufällige und zugleich harmonische Bilder generiert. Wie das genau funktioniert ist im Tutorial von Daniel Shiffman/The Coding Train bestens beschrieben!
Den Code, mit dem ich gearbeitet habe, habe ich mir aus Vorlagen von Gene Kogan und Ahmad Moussa/Gorilla Sun zusammengestückelt. Die verschiedenen Beispiele entsprechen den Schritten, die ich durchlaufen habe. Zuerst Noise in schwarz/weiß und Fullscreen.

Dann setzt sich das Ganze in Bewegung.

Dann kommt eine zusätzlicher veränderlicher Faktor (t) dazu, der eine wabernde Bewegung ermöglicht.

Zuletzt in Farbe, es werden drei Farbvariablen benötigt (c,c1,c2), und eine andere Auflösung (rez). Jetzt habe ich mein Ziel erreicht und sanfte, sich langsam und harmonisch verändernde Farbverläufe.

Farbwolken, die sich über andere Elemente schieben, diese verdecken und wieder sichtbar werden lassen – das klingt einfach, bringt aber doch einige Probleme mit sich. Bisher war mir nur die, für mich etwas umständliche Lösung mit for-Schleifen bekannt. Hier wird Pixel für Pixel der Farbwert und die Deckkraft berechnet. Eine bekömmlichere Lösung ist über drawingContext möglich. Hier kann der radiale Farbverlauf mit Start- und Endpunkt als Füllmethode angegeben werden. Darauf bin ich durch das Tutorial von Kazuki Umeda gestoßen, der in seinem Kanal noch weitere Beispiele mit drawingContext vorstellt.
Mein Farbverlauf, der nach außen hin durchsichtig wird, bewegt sich über den Screen, überlagert den Text und erscheint, nachdem er verschwunden ist, wieder am unteren Bildrand.

Hier sind Beispiele für verschiedene, bedingt zufällige Formen. Mir gefällt es etwas zu gestalten, von dem ich nicht genau vorhersagen kann, wie es aussehen wird. Hier liegt die Schwierigkeit darin Parameter zu finden, die genügend Zufall zulassen, damit ich von der Unterschiedlichkeit überrascht werde und trotzdem sicher stellen, dass das Ergebnis meiner Vorstellung, meinem Gescmack oder einer anderen Vorgabe entspricht. Ich habe hier und hier recherchiert und vor allem mit diesen References experimentiert: beginShape(),vertex(), bezierVertex(), quadraticVertex(), translate(). Hier ist eine Linie, die bei jedem neu Laden an einer anderen Position ist eine andere andere Form hat, aber den vorhergegangen doch ähnelt.

Die folgenden Beispiele zeigen geschlossene, gefüllte Formen. Die letzte bewegt sich und verändert Form und Geschwindigkeit durch die Scrollbewegung der Maus.

Swipe kann in vielen Anwendungen sinnvoll eingesetzt werden. Eine Lösung dafür ist hammer.js. Um diese Library nutzen zu können wird sie ins .html Dokument eingefügt und dann im .js aktiviert. Dieser Sketch war mein Ausgangspunkt. Daran habe ich geändert, dass zusätzlich die Hintergrundfarben durch die Swipe-Geste verändert werden.

Text wird durch das Scrollen der Maus (oder durch eine andere Aktion) unsichtbar und verändert sich in dem Moment, in dem er verschwunden ist. Dann wird er wieder lesbar. Die Idee hierbei ist, eine zufällige und nicht steuerbare Erzählstruktur entstehen zu lassen. MouseWheel() und sin() lassen den Text verschwinden und wieder erscheinen. Random() wählt im Moment der Unsichbarkeit zufällig ein Wort aus dem array (words).

Diesen Sketch habe ich von Adam Ferriss übernommen. Es ist eine Lösung für einen Blur-Webcam-Effect, der die Wiedergabegeschwindigkeit des Sketches nicht beeinträchtigt. Allerdings ist es nötig sich etwas mit Shadern und der Sprache GLSL auszukennen, wenn man die Ergebnisse beeinflussen möchte. Ich würde den Grad des Verschwimmens gerne verändern, habe es bisher aber nicht in zufriedenstellendem Maß geschafft. Hier und hier gibt es die Möglichkeit sich in das Thema einzuarbeiten.

Über get() lässt sich die Farbe eines beliebigen Pixels des Webcam-Bildes auswählen und als Hintergrundfarbe setzen. Doch so verändert diese sich ständig, extrem und abrupt.

Um einen sanften Übergang zwischen den Farben herzustellen bin ich diesem Thread gefolgt und habe zunächst diese Funktion ausprobiert, in der zufällige Farben langsam ineinander übergehen.

Durch die Kombination dieser beiden Sketches bin ich zu dieser Lösung gekommen. Die Webcam-Farben wechseln langsam und gehen sanft ineinander über.

In einem vergangenen Projekt wollte ich Farbverläufe aus dem Webcam-Bild generieren, die sich langsam verändern. Das ganze sollte der Hintergrund für Text sein, also nicht zu stark ablenken und trotzdem eine leichte AR-Erfahrung bieten. Damals habe ich keine gute Lösung gefunden und aufgegeben.
Jetzt hat es geklappt. Zunächst bin ich dem Tutorial von Kazuki Umeda gefolgt und habe einen simplem linearen Farbverlauf mit drawingContext erstellt. Das ist für mich einfacher ist als diesen mit einer for-Schleife zu generieren. Eine andere Lösung ist über Shader möglich. Da weiß ich allerdings noch nicht, wie das funktionert.

Als nächsten Schritt habe ich die Farben des Verlaufs durch die Farben des Webcam-Bildes, die ich über get() an zwei verschiedenen Positionen bekommen habe, ersetzt. So ist der Verlauf aber sehr unruhig und nicht als Hintergrund für zu lesenden Text geeignet.

Für den nächsten Schritt bin ich diesem Thread gefolgt und habe eine lerp() Funktion eingebaut, die die sich ständig wechselnden Farben langsam ineinander übergehen lässt.

Eine weitere Möglichkeit ist über constrain() noch eine Pause zwischen den Übergängen einzubauen. So wird das Bild noch ruhiger und zurückhaltender.
Bei den letzten beiden Beispielen gibt es am Anfang noch einen schwarzen Screen. Ein Problem, das ich noch lösen möchte.

Das Webcam-Bild mit einem Blur-Filter verschwimmen zu lassen, scheint eine einfache Möglichkeit, um Farbwolken aus den Farben der Umgebung zu generieren. Doch der filter(BLUR) von P5.js ist bei einem bewegten Bild wenig hilfreich, da er meist dazu führt, dass die Wiedergabe nicht mehr flüssig möglich ist. Eine andere Möglichkeit ist, über drawingContext zu gehen. Hierbei ist das Ergebnis genauso, wie ich es mir vorgestellt habe. Das einzige Problem bei dieser Methode ist, dass sie nicht von allen Browsern unterstützt wird. In Safari funktioniert es nicht.
Außerdem habe ich den facingMode auf environment gesetzt, sodass bei einem Mobile Device die hintere Kamera angesprochen wird. Die Größe des Bildes ist so angelegt, dass das Kamerabild nicht verzerrt, aber trotzdem fullscreen angezeigt wird – wie in einer Kamera-App. Und die frameRate() ist sehr niedrig, um ein ruhiges Bild zu erzeugen.

Ausgehend von diesem Sketch ist folgendes Beispiel entstanden. Es ist hier möglich per Mausklick einen Snapshot des aktuellen Webcam-Bildes zu machen. Das ist hilfreich, wenn das Webcam-Bild zwar genutzt werden soll, aber ein Videobild zu viel Bewegung bedeutet. So kann gesteuert werden, wann und wodurch, das Kamerabild aktualisiert werden soll.