Hackday-Thema · Yayoi Kusama
follow your vision
Ein per Handtracking gesteuertes Kugelfeld, dessen Elemente auf Cursornähe mit Wachstum reagieren und dessen Dichte sich über den Finger-Daumen-Abstand regeln lässt.
Das Artefakt
Der Bildschirm ist mit Kugeln gefüllt, die größer werden, je näher der per Handgeste gesteuerte Cursor ihnen kommt. Über den Abstand zwischen Zeigefinger und Daumen lässt sich die Anzahl der Kugeln erhöhen oder verringern, sodass sich das Feld verdichtet oder lichtet.
Bezug zu Kusama
Yayoi Kusama ist bekannt für ihre endlosen Punkte, repetitiven Muster und Installationen, in denen man sich selbst „auflöst". Das ist ihr Konzept der Self-Obliteration. Der Sketch übersetzt genau das in Code: ein Raster aus unzähligen Punkten (Wiederholung als System), die auf die Maus reagieren und den Betrachter so direkt ins Bild hineinziehen. Genau diese Teilhabe macht auch ihre Infinity Rooms aus.
Der Ghosting-Trail lässt alte Positionen langsam verblassen, was dieses halluzinatorische Auflösen in Muster erzeugt. Die gelben Töne greifen ihre ikonischen Kürbisfarben auf.
Wie die Interaktion funktioniert
In der finalen Version steuert man den Sketch komplett mit den Händen. Über die Webcam erkennt ein Handtracking-Modell die Finger: Die Spitze des Zeigefingers wird zum Cursor, in dessen Nähe die Kugeln wachsen. Der Pinch-Abstand zwischen Zeigefinger und Daumen der linken Hand wirkt wie ein Zoom: Er steuert die Anzahl der Spalten und damit die Größe jeder Zelle. Über diesen einen Parameter entsteht die Illusion, ins Bild hinein- oder herauszuzoomen, obwohl sich in Wahrheit nur die Rasterdichte ändert. Der Pinch der rechten Hand verschiebt parallel den Farbton durch das ganze Spektrum.
Das Handtracking selbst habe ich nicht im Generative-Gestaltung-Kurs, sondern parallel im Interaction-Design-Kurs gelernt und hier bewusst eingebaut. So wird man wie in Kusamas Infinity Rooms körperlich Teil des Musters, statt es nur mit der Maus zu bedienen.
Drei Stationen einer Genese
-
01
Konzept
Absicht: Yayoi Kusamas Bildsprache als Ausgangspunkt in p5.js übersetzen: ein endloses Raster aus gleich großen Punkten, das den ganzen Canvas füllt und ihre Obsession mit Wiederholung als System aufgreift.
Geschehen: Über zwei verschachtelte Schleifen entsteht ein Gitter weißer Kreise, dessen Zellgröße sich aus der Spaltenzahl ergibt. Es passt sich jeder Darstellungsfläche an, also quadratisch, 16:9 und Vollbild. Als reines Standbild wirkte es aber noch statisch und leblos.
Mitnahme: Das Grundgerüst steht und skaliert sauber. Was fehlt, ist eine Reaktion auf den Betrachter und Farbe. Das Raster muss anfangen zu leben.
-
02
Bewegung & Reaktion (Maus)
Absicht: Das statische Raster zum Leben erwecken. Die Punkte sollten auf die Maus reagieren (nah = groß, fern = klein), Kusamas Gelbtöne als Verlauf annehmen, sich eigenständig bewegen und über einen Trail ineinander auflösen, ganz im Sinne der „Self-Obliteration". Das war die letzte Version, bevor das Handtracking dazukam.
Geschehen: Jeder Punkt umkreist seine Rasterposition über
sin()/cos()mit einem Phasenversatz pro Reihe und Spalte.dist()/map()übersetzen den Mausabstand zugleich in Größe, Farbton (~38° zu ~62°) und Helligkeit, und ein halbtransparenter Schwarz-Layer lässt verblassende Spuren entstehen. Die Dichte des Rasters stelle ich dabei über dencolumns-Slider der Dev-GUI ein (oben links im Bild), mit der Q-Taste kommt eine Pulswelle dazu. Das ganze visuelle System stand. Nur die Eingabe war noch die Maus.Mitnahme: Das Bild lebt, aber die Maus hält den Betrachter auf Distanz. Der nächste und letzte Schritt musste die Eingabe selbst sein: weg von der Maus, hin zur eigenen Hand, also dem Handtracking aus dem Interaction-Design-Kurs.
-
03
Finaler Sketch
Absicht: Aus dem reaktiven Bild eine echte Kusama-Erfahrung machen: Die Punkte sollten leben, sich bewegen und ineinander auflösen, das Gefühl der „Self-Obliteration". Vor allem wollte ich die Maus loswerden und den Betrachter über die eigene Hand ins Bild holen, ganz wie in Kusamas begehbaren Infinity Rooms.
Geschehen: Das visuelle System aus Station 02, also Orbit, Trail, Puls und Farbverlauf, bleibt vollständig erhalten. Der entscheidende Schritt war, die Maus durch Handtracking per Webcam zu ersetzen, das ich aus dem Interaction-Design-Kurs mitgebracht und mit dem ml5-Modell eingebaut habe. Der Zeigefinger wird zum Cursor. Der Pinch der linken Hand wirkt wie ein Zoom: Ein einziger Parameter, die Spaltenzahl, verändert die Zellgröße so, dass man scheinbar ins Bild hinein- und herauszoomt, während der Pinch der rechten Hand den Farbton verschiebt.
Mitnahme / Fazit: Code und Kunst sprechen dieselbe Sprache: Kusamas Prinzipien Wiederholung, Teilhabe und Auflösung lassen sich fast 1:1 in Schleifen,
dist()/map()und einen Trail-Effekt übersetzen. Am meisten gelernt habe ich, dass Wissen aus einem anderen Kurs ein Projekt auf ein neues Level hebt. Das Handtracking aus Interaction Design hat aus einem Bild, das man anklickt, eines gemacht, in dem man mit dem eigenen Körper steht.
Erkenntnis
Ich bin mit dem Wunsch gestartet, etwas möglichst Aufwendiges zu bauen, und habe gelernt, dass das Gegenteil stärker wirkt: ein endloses Raster, ein verblassender Schatten, eine Hand vor der Kamera. Die kraftvollsten Bilder entstehen nicht aus kompliziertem Code, sondern aus einer einfachen Idee, die man konsequent wiederholt und in Bewegung bringt. Und der größte Sprung kam, als ich Wissen aus einem anderen Kurs hereingeholt habe: Das Handtracking aus dem Interaction-Design-Kurs hat aus einem Bild, das man anklickt, eines gemacht, in dem man wie bei Kusama selbst im Muster steht.