Eine interaktive Installation mit TouchDesigner. Easy… oder nicht?

1. März 2024
4 min read
Featured Image

Das Bayerische Forschungsinstitut für Digitale Transformation (bidt) veranstaltet alle zwei Jahre eine zweitägige Konferenz, die sich einem bestimmten Thema widmet. Als Leadagentur gestalteten wir gemeinsam mit dem bidt das Erscheinungsbild der Konferenz sowie alle Medien. Als besonderen Hingucker haben wir die interaktive Installation "Kinetic Characters" gestaltet, die auf eine kreative Art und Weise die Besucher der Konferenz motivierte nicht nur als Zuhörer mit dem Konferenzthema zu interagieren. 

Im Herbst 2023 lautete der Titel der Konferenz „Digital kommunizieren – Digitales kommunizieren“, dieses Leitthema beinhaltete mehrere Diskussionsrunden und Vorträge von Experten zur generativen KI und automatisierte digitale Kommunikation. Hierbei wurden unter anderem Fragen wie „Welche Regulierungen brauchen wir für diese neue Technologie, und wie kann die allgemeine Gesellschaft daran teilhaben?“ diskutiert.

Konzept, Umsetzung, Aufbau vor Ort und Betreuung der Installation während der Veranstaltung waren komplett in unserer Hand. Kann nicht so schwer sein, oder?

Oder?

Vorbereitung & Technik der interaktiven Installation

1. Learning:
Bevorzuge Software mit einer ausführlichen Dokumentation und einer aktiven Community, die man um Rat fragen kann.

Bei der Auswahl der Software entschieden wir uns für „TouchDesigner“, weil gut dokumentiert und mit großer Community im Rücken. TouchDesigner nutzt eine visuelle Programmiersprache, die durch „Nodes“ gesteuert wird. Ein Node repräsentiert in der Regel eine bestimmte Funktion, Operation oder Datenelement innerhalb des Projekts. Diese Nodes sind miteinander verbunden, um komplexe visuelle und interaktive Visuals zu erstellen. Jeder Node kann Parameter haben, die eingestellt werden können, um sein Verhalten anzupassen, und sie können auch Eingangs- und Ausgangsanschlüsse haben, um Daten zwischen ihnen auszutauschen. In TouchDesigner können Nodes eine Vielzahl von Aufgaben erfüllen, von einfachen mathematischen Operationen bis hin zur Verarbeitung von Audio, Video und 3D-Grafiken. Insgesamt sind Nodes die Bausteine, aus denen TouchDesigner-Projekte aufgebaut sind.

Node-basierte Struktur in TouchDesigner
Node-basierte Struktur in TouchDesigner

Wir testeten zahlreiche Designs in der Konzeptphase, indem wir visuelle Elemente manipulierten und automatisierten. Wer viel probiert, findet viele Wege wie es nicht funktioniert – und was überhaupt möglich ist.

Ziel war es die Teilnehmenden der Konferenz einzubinden. Mit einer Kinect-Kamera „trackten“ wir die Hände der Personen und beziehten die Bewegungen in das Design mit ein. Durch die gute Dokumentation der Software konnten wir viele Fragen selbst beantworten. Für alles weitere war das TouchDesigner-Forum sehr hilfreich.

Die Installation der Kinect-Kamera auf der Konferenz
Die Installation der Kinect-Kamera auf der Konferenz

Wir testeten die Gestensteuerung und den Einsatz der Kinect-Kamera in unserem Büro in Berlin. Das folgende Video zeigt einen ersten Test, der super funktionierte. Aber würde die Installation auch vor Ort auf der Konferenz funktionieren?

Die ersten Tests mit Hilfe des Kinect Trackings

Verbesserungen an Ort und Stelle

Während des ersten Tages wurde die Installation von vielen Konferenzteilnehmern bedient. Es traten zu diesem Zeitpunkt die ersten Probleme auf. Waren es das Licht oder die große Fläche? Nein. Das Problem war die hohe Anzahl von Personen, die von der Kinect erfasst werden mussten. Dies führte zu Darstellungsfehlern und – viel gravierender – dazu, dass die Installation nicht auf die Personen reagierte.

2. Learning:
Nur weil die Gestenerkennung mit einer oder zwei Personen funktioniert, muss dies nicht auch für eine Gruppe gelten. Zudem sind die Gegebenheit vor Ort andere: Licht, Raum, Platz.

Für den zweiten Tag der Konferenz haben wir die Tracking-Basis der Teilnehmer auf den gesamten Körper erweitert. So wurden mehrere Personen, die gleichzeitig mit der Interaktion interagierten, besser erkannt. Die Idee des "Morphings", der Verzerrung des Designs auf dem Screen, die anfangs mit den Händen durchgeführt wurde, konnten die Teilnehmer dann mit dem gesamten Körper beeinflussen.

Fertige Installation mit interaktiven Elementen

Markenkonformes Design der interaktiven Installation

In TouchDesigner gestaltet anders als in klassischer Layout-Software. Elemente werden per Koordinaten gesteuert – nicht via Maus. Einfache Dinge wie Zeilenumbrüche oder Textformatierungen sind nicht möglich, da die Software ursprünglich auf manipulative und generative Eigenschaften ausgelegt ist. Wir griffen auf Tabellen (DAT Operatoren) zurück, die Textinformationen und -formatierungen zuließen.

DAT-Operator mit 4 Thesen
DAT-Operator mit vier Thesen, die auf in der Installation durchwechselten

Nächste Herausforderung: Farbe. Im digitalen Raum verwenden wir RGB-Werte oder Hex-Codes. In TouchDesigner werden die RGB-Werte von 0-255 anders angegeben: von 0-1. Ein einfacher Dreisatz hilft – und ist schon erste Fehlerquelle für Rundungsfehler.

3. Learning:
Jede Software hat spezielle Eigenheiten. Dinge, die in z.B. Adobe Illustrator sehr einfach sind, sind in TouchDesigner komplex. Es ist ratsam genügend Zeitpuffer einzuplanen und Funktionen & Design in frühem Stadium zu testen.

Große Gesten und lachende Gesichter

Unterm Strich war die Installation ein voller Erfolg. Viele Teilnehmende sind gesprungen, haben wild gestikuliert, Selfies gemacht und viel gelacht. Ein echter Magnet für Aufmerksamkeit.

Das ist das große Potential von Installationen: Design interaktiv und erlebbar machen.

Sie möchten auch mithilfe einer interaktiven Installation ihre Marke inszenieren? Wir freuen uns auf Ihre Anfrage unter [email protected] oder 069 / 71 71 97 62

Trubel auf der Konferenz

Über das bidt

Das Bayerische Forschungsinstitut für Digitale Transformation (bidt) wurde 2018 in München gegründet und trägt als Institut der Bayerischen Akademie der Wissenschaften dazu bei, die Entwicklungen und Herausforderungen der digitalen Transformation besser zu verstehen. Das bidt versteht sich als Schnittstelle zwischen Forschung, Politik, Wirtschaft und Gesellschaft. Wissenschaftliche Erkenntnisse werden der Öffentlichkeit zugänglich gemacht, verständlich aufbereitet und über verschiedene Kanäle kommuniziert.

Get In Touch

Gutes Design entsteht im Dialog.
Einfach anrufen: 
+49 69 / 71 71 97 62
Oder schreiben: [email protected]

View