Im Rahmen des Moduls Interaction Design II entwickelten wir eine interaktive Rauminstallation, die auf Gesten reagiert und generative Visuals in Echtzeit darstellt. Ziel war es, eine digitale Umgebung zu schaffen, die ohne physische Interface-Elemente funktioniert und dabei durch visuelle Rückmeldung zur Interaktion einlädt.
Von der Idee zum Aufbau
Wir wollten eine Umgebung gestalten, in der keine Erklärungen nötig sind, sondern die Reaktion des Systems aus dem Verhalten der Besucher:innen hervorgeht. Bewegung und Präsenz sollen genügen, um eine Reaktion auszulösen.
Aus diesem Grund entwickelten wir folgende Idee:
einen Ruhemodus, der signalisiert, dass die Installation aktiv, aber nicht verwendung ist
einen aktiver Modus mit Visuals, die durch Gesten und Positionen beeinflusst werden
Um die Orientierung im Raum intuitiv erlebbar zu machen, teilten wir die Projektionsfläche in drei horizontale Zonen.
Je nach Nasenposition, erfasst über MediaPipe, wird eine bestimmte Visualisierung aktiviert.
Das System reagiert also nicht nur auf das Ob, sondern auch auf das Wo der Nutzer:innen.
Die Entscheidung, alle Visuals modular in TouchDesigner-Containern zu speichern, trafen wir aus dem Grund das wir so die einzelnen Visuals beliebig verändern und auch erst später in das gesamte Netzwerk einbinden konnten.
Die Übergänge zwischen den Zonen sollten nicht abrupt, sondern fließend sein, daher verknüpften wir die Nasenposition mit Helligkeitswerten der Level-TOPs, die wiederum als Input für Blend-Effekte in die Visuals zurückspielen.
Das gesamte Steuerungssystem ist dadurch klar strukturiert, modular erweiterbar und für andere Räume anpassbar ohne das Grundkonzept zu verändern.
Auf diesem Bild sieht man das gesamte Netzwerk. Anhand der Abkürzung Ctn kann man sehen, wo sich die Containermit den Visuals befinden.
Alle Übergänge werden mithilfe der Level-TOPs (Lvl) gesteuert, indem die Position der Nase mit der Helligkeit der Level-TOPs verknüpft wird. Je weiter sich die Nase bewegt, desto heller wird das Bild. Durch den ansteigenden Wert des Bereichs von Visual 3 verringert sich gleichzeitig der Wert im Bereich von Visual 2, wodurch ein weicher Übergang entsteht.
Visuals & Ruhemodus
Visual 1 – Wasser
Für das erste Visual wählten wir eine abstrakte Interpretation von Wasser, die ruhig, leicht spiegelnd und organisch auf Handbewegungen reagiert. Ziel war es, ein harmonisches Bild zu schaffen, das weder zu statisch noch zu unruhig wirkt.
Das zentrale Steuerungselement ist das MediaPipe-Handtracking: Die X- und Y-Positionen der Handmitte werden in Echtzeit erfasst und an ein Displace-TOP übergeben. So beeinflussen Nutzer:innen durch einfache Bewegungen die Verzerrung der Oberfläche.
Das Wasser selbst basiert auf einem SOP-Grid mit PBR-Material, das Reflexionen erzeugt. Nach dem Rendering über ein Render-TOP wird das Bild durch mehrfache Feedback-Loops verfeinert, so entstehen weich überlagerte Bewegungen und sanfte Farbverläufe.
Visual 2 – Lila_orange
Das zweite Visual greift ebenfalls eine wellenartige Struktur auf, diesmal aber durch einen dynamischen Pinsel-Effekt: Nutzer:innen zeichnen mit ihrer Hand abstrakte, farbintensive Formen in den Raum, die sich fließend ausbreiten und überlagern.
Technisch basiert das Visual auf einem virtuellen Kreis (SOP Circle), der per MediaPipe-Handtracking in Echtzeit gesteuert wird. Der Kreis fungiert als Pinselspitze und ist mit einem Geometry-COMP verknüpft. Je nach Bewegung der Hand entstehen durch diese Struktur weiche Impulse auf der Oberfläche.
Um die Darstellung zu verfeinern, nutzten wir Feedback-Loops und mehrere Blur-Operatoren, die für weiche Übergänge sorgen. Die finale Farbgebung wird über einen TOP-Ramp gesteuert, mit einem Farbverlauf aus Lila-Orange-Tönen, der sich harmonisch in das Gesamtbild der Installation einfügt.
Visual 3 – Flamme
Für das dritte Visual griffen wir das Thema Feuer in einer abstrakten, dynamischen Form auf. Die flammenähnlichen Bewegungen reagieren sensibel auf Handgesten und erzeugen durch ihre Farbverläufe eine intensive, visuelle Atmosphäre.
Das zentrale Steuerungselement ist ein GLSL-TOP, in das wir das MediaPipe-Pose-Tracking einbanden. Die Position der Hand dient als Cursor und steuert die Ausbreitung der Flammenform. Zusätzlich wird die Geschwindigkeit der Bewegung in Farbe umgewandelt, je schneller die Hand, desto intensiver die Übergänge im visuellen Verlauf.
Ein besonderes Merkmal dieses Visuals ist der strukturierte Einsatz von Konstanten: Über definierte Werte konnten wir mehrere Operatoren gleichzeitig ansteuern. Diese Methode machte unser Netzwerk effizienter und erlaubte konsistente Anpassungen an mehreren Stellen auf einmal.
Die finale Farbgestaltung basiert, wie bei Visual 2, auf einem Ramp-Operator, den wir diesmal in vier Hauptfarbzonen unterteilten. So entstanden gezielte Übergänge zwischen warmen Farbtönen, die an Feuer erinnern und das Verhalten der Visuals verstärken.
Ruhebildschirm – Blob
Der Ruhebildschirm bildet einen eigenständigen Zustand innerhalb unserer Installation, er tritt in Erscheinung, wenn keine Nutzer:innen erkannt werden, und erfüllt eine doppelte Funktion: Er signalisiert subtil, dass das System aktiv ist, und weckt gleichzeitig durch seine Bewegung visuelle Neugier.
Für dieses Visual entschieden wir uns bewusst für eine organisch wirkenden Blob, der sich in Form, Farbe und Verhalten deutlich von den drei aktiven Zonen unterscheidet.
Technisch basiert das Blob Visual auf einer SOP Sphere, die durch SOP Noise verformt und anschließend mit SOP Twistverdreht wurde. Dadurch entsteht eine natürlich anmutende Geometrie mit dynamischer Oberfläche.
Zur Farbgestaltung nutzten wir das Colour Lover Palette Picker Plugin und wählten gezielt eine helle, weiche Farbpalette, die sich harmonisch in das Gesamtkonzept einfügt. Zusätzlich erzeugt ein Bloom TOP ein sanftes Leuchten, das dem Blob mehr Tiefe und Lebendigkeit verleiht.
Aufbau im Raum
Unsere Installation wurde in einem Abschnitt des Flurs aufgebaut mit dem Ziel, den vorhandenen Raum bestmöglich zu nutzen und gleichzeitig eine klare Struktur für die Interaktion zu schaffen. Ein Kurzdistanz-Beamer projizierte die Visuals großflächig auf die Wand, während das MacBook, mit integrierter Kamera, sowohl das visuelle Rendering als auch das Tracking übernahm.
Zur Orientierung nutzten wir Bodenmarkierungen (Klebeband) sowie Sitzblöcke, die den Raum in drei Zonen gliederten. Diese wurden nicht nur visuell, sondern auch durch unterschiedliche Visualtypen erfahrbar gemacht. Die Nutzer:innen konnten sich frei im Flur bewegen, durch die Zonen wechseln und erleben, wie ihre Position und Gesten das Bildgeschehen beeinflussten.
Die visuelle Gestaltung war von Anfang an ein zentrales Element unserer Installation. Unser Ziel: eine Ästhetik zu entwickeln, die sowohl einladend als auch lebendig wirkt und dabei die Interaktion der Nutzer:innen sichtbar und spürbar macht. Wir entschieden uns bewusst für fließende, organisch anmutende Formen, die in Bewegung miteinander reagieren und ein immersives Erleben ermöglichen.
Ursprünglich wollten wir verschiedene emotionale Stimmungen über Farb- und Formverläufe abbilden. Diesen Ansatz reduzierten wir im Laufe der Umsetzung, behielten aber einen sanften Verlauf von hellen zu dunkleren Visuals bei. Besonders der Blob im Ruhemodus hebt sich visuell ab, nicht nur als funktionaler Ruhebildschirm, sondern auch als poetisches Element, das subtil zur Interaktion einlädt.
Anleitung
Für die Interaktion werden die horizontale und vertikale Bewegung der Hand erkannt. Diese steuern die Richtung und Geschwindigkeit der visuellen Effekte. Wir planten, dies Geste mit leicht verständlichen Illustrationen direkt an der Installation kenntlich zu machen.
Fazit & Ausblick
Unsere interaktive Installation zeigt, wie digitale Medienräume durch natürliche Gestensteuerung und generative Visuals in lebendige Erlebnisse verwandelt werden können. Besonders die Kombination aus präzisem Handtracking und fließender Echtzeitvisualisierung hat das Projekt getragen technisch wie atmosphärisch.
Für zukünftige Weiterentwicklungen sehen wir Potenzial in der Erweiterung durch Klang oder KI-gestützte Erkennung von Emotionen und Körperhaltungen. Auch eine skalierbare Umsetzung für größere Räume oder mehrere Projektionsflächen wäre denkbar.
