Interaction Design 2: Rain Ideas
Interaktive Regeninstallation mit Pose Tracking, p5.js und ml5.js | SoSe 2024
Anwendungsvideo der finalen Installation
Finale Installation: Die Besucher steuern den digitalen Regen über ihre Körperbewegung.
Atmosphäre: Farbverläufe und Sound verstärken die unterschiedlichen Regenzustände.
Projektdokumentation
In Interaction Design 2 entwickelten wir eine interaktive Anwendung, die den Raum aktiv einbezieht. Ausgehend von PoseNet und ml5.js entstand eine abstrakte Regeninstallation, bei der Besucher den digitalen Regen über ihre Körperhaltung beeinflussen. Das Projekt wurde gemeinsam mit Saskia Tröge und Natalie Schiechtele umgesetzt.
1. Ideenentwicklung & Thema
Zu Beginn untersuchten wir verschiedene Spielideen, die sich per Gestensteuerung umsetzen lassen. Viele davon hatten jedoch eine niedrige Frustrationstoleranz und passten nicht zu dem offenen, explorativen Charakter der Aufgabe. Deshalb wechselten wir in Richtung der vier Elemente und entschieden uns schließlich für Wasser: Regen war abstrakt genug für eine poetische Visualisierung und gleichzeitig körperlich erfahrbar.
Look & Feel: Fallende Linien, dunkle Blautöne und wechselnde Intensitäten erzeugen Regenstimmungen.
Aufbauskizze: Rechner, Kamera, Videowall, Aktionsfläche und heller Hintergrund als System.
2. Interaktionskonzept
Der Regen fällt von oben nach unten und reagiert auf das erkannte Skelett der Person. Einzelne Tropfen prallen an Körperpunkten ab oder sammeln sich dort, wodurch die Besucher direkt spüren, dass ihre Bewegung Einfluss auf die Projektion hat. Zusätzlich verändert die Intensität des Regens den Farbverlauf: von ruhigem Nieselregen bis zu kräftigerem, atmosphärischem Starkregen.
Gestaltungsziel: Die Visualisierung sollte bewusst abstrahiert bleiben, damit Besucher nicht nur ein technisches Tracking-System sehen, sondern einen eigenen, immersiven Regenmoment erleben.
3. Programmierung & Pose Tracking
Technisch basiert die Anwendung auf p5.js und p5play für die interaktiven Grafiken. Die Körpererkennung erfolgt mit PoseNet über ml5.js. Das Modell schätzt in Echtzeit Keypoints wie Schultern, Arme, Hüfte und Gesichtspunkte. Diese Punkte bilden die Grundlage dafür, dass die Regenpartikel auf die anwesenden Personen reagieren können.
Körpertracking: PoseNet erkennt zentrale Keypoints und macht Gesten maschinenlesbar.
Tracking-Test: Erste Versuche halfen, Erkennung, Kameraabstand und Licht zu kalibrieren.
4. Raumaufbau & Atmosphäre
Für die Präsentation war das räumliche Setting genauso wichtig wie der Code. Die Anwendung lief auf einem Rechner, die Kamera trackte die Besucher vor einem hellen Hintergrund, und die Videowall zeigte die großformatige Regenvisualisierung. Ein dunkler Raum, dezentes Licht und Regensounds verdichteten das Setup zu einer kleinen begehbaren Wetter-Szene.
Videowall: Die große Projektion macht Bewegungen unmittelbar sichtbar.
Immersion: Silhouetten, Dunkelheit und Verlaufsgrafik lassen Technik in Atmosphäre übergehen.
5. Learnings
Besonders lehrreich war die Verbindung aus interaktiver Programmierung, maschinellem Sehen und räumlicher Gestaltung. Neben technischen Herausforderungen mit Bibliotheken, JavaScript und Tracking-Stabilität zeigte das Projekt, wie stark eine Interaktion wirkt, wenn Code, Licht, Sound und Körperbewegung als gemeinsames Erlebnis gedacht werden.