Touching Performance

repraesentatives-bildAbstract

Bei “Touching Performance” handelt es sich um ein experimentelles Projekt zur interaktiven Darstellung der Tänzerinnen.
Hierbei können die Bewegungsprofile der Tänzerinnen auf einem Touchtable aufgerufen und dann an beliebiger Stelle des Pfades die örtlich zugeordnete Pose angezeigt werden. Da mit Processing auf einem Microsoft Surface (wurde umbenannt in “Microsoft PixelSense”) Touchtable programmiert wurde, konnte ich vom open Framework TUIO profitieren, das es ermöglichte die an Figuren angebrachten ByteTags zu tracken und eindeutig einer Tänzerin zuzuordnen, sobald die Tags den Bildschirm berühren.

 

Ausgangspunkt / Problemstellung

Meinem jetzigen Projekt ging eine lange Konzeptionsphase voraus, während der mehrere Konzepte entstanden, die immer wieder in Sackgassen landeten aber aufeinander aufbauten.

expose

So wurde aus dem ursprünglich erdachten Buch, welches das Stück “No Time to Fly” narrativ, bzw. dokumentarisch festhält, zuerst ein Buch mit Pop-Up-Elementen, dann ein Werk, das ganz und gar als Pop-Up-Buch gestaltet ist.
Als sich herausstellte, dass man schlecht alle  Arten von gewünschten Daten und Fakten per Pop-Up-Mechanik umsetzen kann, musste ich diesen eingeschlagenen Weg zur letzten Abzweigung zurückgehen und mir neu überlegen, wo es hingehen soll.

Also wurde aus dem analogen Buch ein eBook. Doch das bisherige Konzept würde, in der bisherigen Form, nicht nur den Möglichkeiten eines Tablets nicht gerecht werden, sondern würde auch einfach belanglos wirken. Deswegen sollte es interaktiver werden – weg vom Dokumentarischen, hin zum Experimentellen.
Man sollte durch Berührung des Bewegungsprofils die Silhouetten der Tänzerinnen anzeigen lassen und per Wisch-Geste die unterschiedlichen Pfade der einzelnen Szenen des Stücks durchschalten können. Aber selbst das mit HTML5 arbeitende eBook-Format HPUB hat seine Einschränkungen. Und da ich mit Processing deutlich mehr Erfahrung hatte, als mit HTML5, entschloss ich mich per Processing und Android SDK eine Java-App für das Samsung Galaxy Tab zu programmieren.
Schließlich hat aber die Möglichkeit unseres Touchtables, gedruckte Marker identifizieren zu können, den Ausschlag gegeben vom Tablet zum Table zu wechseln.

 

Konzept / Lösungsansatz

Das Konzept ist dabei fast gleich geblieben und wurde nur um ein Feature erweitert. Es umfasst drei große Schritte, die im Programm konsekutiv ausgeführt werden sollten.

  1. Auswählen der Tänzerin
  2. Auswählen, bzw. Wechseln der Szenen und damit ihrer Bewegungsprofile/Pfade
  3. Aufrufen der Pose der Tänzerin am jeweiligen Ort des Pfades

1. Das Auswählen der gewünschten Tänzerin sollte ursprünglich entweder per Button im Programm – also per Touchinteraktion – erfolgen oder per NFC-Chip. Am Tisch war es möglich Marker erkennen zu lassen und diese konnten den Tänzerinnen zugeordnet werden.

2. Das Wechseln der Szenen sollte mit Wischgesten funktionieren. Man “scrollt” also quasi die einzelnen Szenen des Stücks horizontal durch das Bild.

3. Inspiriert von der Idee des Pop-Up-Buchs sollten die Posen der Tänzerinnen “aufpoppen”, also hochklappen, sobald man den Pfad mit dem Finger berührt. Aber nicht überall, sondern nur an der Stelle, wo der Pfad berührt wird, bzw. die Stelle, die der Berührung am nächsten ist (sollte der Finger abseits des Pfades sein). Man kann also jeden beliebgen Punkt ihres getanzten Wegs berühren, um zu sehen, welche Körperhaltung sie an dieser Stelle hatte.

 

Software / Hardware / Material

microsoft_surfaceUmgesetzt habe ich das Projekt in Processing 2.2.1 auf einem Touchtable von Microsoft/Samsung (Microsoft PixelSense, ehemals Microsoft Surface).
Mein Programm basiert auf einer Kombination aus den Codes MotionBankPathNearest, tuio_surface, und MotionBank2DDistance_Gesamtbild – geschrieben von Michael Zöllner.

Das Funktionieren von tuio_surface setzt das im Hintergrund laufende Programm PixelTuio voraus (ebenfalls von Michael Zöllner). Es übersetzt Berührungen des Displays in die Eingabe “Cursor” und ByteTags in “Object”. Somit können Tags und Finger unterschiedliche Befehle ausführen.

Außerdem habe ich in Zusammenhang mit diesem Projekt mit dem Tool Piecemaker und den Programmen Cinema4D und AfterEffects gearbeitet.

 

Umsetzung

Da ich Processing nicht wahnsinnig gut beherrsche und es schon länger nicht benutzt habe, wollte ich ein Problem nach dem anderen anpacken und die Codes dann zusammensetzen.
Klein angefangen wollte ich erst einmal eine Silhouette zum “Aufpoppen” bringen. Da sich das tatsächliche Hochklappen im 3-dimensionalen Raum mittels “Rotate”-Befehl zunächst als schwierig herausstellte, da sich der Angelpunkt nicht am unteren Ende des Bildes befand, entschloss ich mich das Ganze zu imitieren. Das Bild vertikal von 0 % auf 100 % zu skalieren sieht allerdings nicht nach einem Aufklappen aus, sondern wirklich nur nach einem Hochskalieren. Das Skalieren musste also mit einer sich ändernden Geschwindigkeit geschehen, die sich an einer Kreisfunktion orientiert. Sobald ich diese Funktion in den Code integriert hatte, funktionierte es richtig gut.

Als nächstes musste ein Pfad her. Zunächst begann ich mir mit dem Programm Piecemaker die einzelnen Szenen aus dem Stück herauszusuchen und die Anzahl der Frames zu notieren. Somit konnte ich den Pfad jeder Szene gezielt mit dem Sketch MotionBank2DDistance_Gesamtbild generieren und als Bild ausgeben.
Irgendwann stellte sich aber heraus, dass ich auf diese Weise schlecht den Pfad mit den Silhouetten hätte verknüpfen können. Manuell hätte ich dann Punkte auf dem Bild festlegen und diese einzeln mit Silhouetten verlinken müssen. Das wäre nicht nur ineffektiv gewesen, sondern auch unpraktikabel, da ich bei jeder Änderung (z.B. das Hinzufügen einer weiteren Szene) wieder den selben Aufwand gehabt hätte. Es musste eine Lösung her, die das Ganze automatisiert. Glücklicherweise schickte mir Michael MotionBankPathNearest. Bei diesem Sketch wird automatisch ermittelt welcher Punkt auf dem Pfad dem Finger am nächsten ist. Dieser herausgefundene Punkt wurde nur noch mit der Reihe von Silhouetten verlinkt und das Grundgerüst für das Programm stand.

Die Silhouetten waren aber noch immer mit Cyan-farbenem Hintergrund versehen, welchen es zu entfernen galt. Bei ca. 100.000 Bildern pro Track und Tänzerin musste auch das automatisiert werden.
Die einfachste Möglichkeit schien hier das Importieren als PNG-Sequenz in After Effects zu sein. Das Programm behandelte dann die Bilder als Film, wodurch ich mit wenigen Klicks das Cyan heraus-keyen konnte. Das Ganze als PNG-Sequenz mit Alphakanal ausgegeben und, voilà, nach 4 Stunden waren alle 200.000. Silhouetten, die ich brauchte, um Juliette und Ros darzustellen, fertig gerendert.

Zwischenstand: Wunderbar freigestellte Silhouetten poppen nahezu realistisch anmutend auf, wenn ich mit dem Finger den Pfad berühre.

10566252_853799491306359_1242465947_nBisher war aber nur Ros zu sehen und es wurde Zeit die zweite Tänzerin zu integrieren. Ich hatte mich entschieden zwei der drei Tänzerinnen darzustellen, weil zwei genügen um sich dem Problem der Auswahl der Tänzerinnen zu stellen. Eine weitere wäre einfach nur zusätzlicher Aufwand ohne neue Erkenntnisse. Dass die Wahl hierbei auf Ros und Juliette gefallen ist, hat keine Bedeutung.

markerDie Auswahl der Tänzerinnen sollte ja erfolgen durch das erkennen von Markern. Damit das auch optisch bei unserer Ausstellung Designblick etwas hermacht, entschloss ich mich je eine Figur mit unserem 3D-Drucker zu drucken und den Marker auf die Unterseite zu kleben.
Dafür bediente ich mich mal wieder der Silhouetten, wählte jeweils eine Silhouette, die besonders aussah (bei Ros ist es die Pose der “Holy Site”) und die sich voneinander stark unterschieden. Diese habe ich dann vektorisiert und ihnen einen ansehnlichen Sockel an die Füße gezaubert und dann wurden sie in Cinema4D extrudiert (da der Drucker mit den Ergebnissen von 3ds Max nicht zurecht kam). Damit man sie noch besser unterscheiden kann, verwendete ich für den 3D-Druck verschiedene Farben, die ich dann auch in der Gestaltung des Sketches wiederaufgreifen konnte.

Durch die Verwendung von PixelTuio und die Implementierung von Code aus dem Sketch tuio_surface in meinen Sketch, war es nun dem Tisch möglich meine Figuren zu erkennen.
Einige Code-Segmente musste ich für die zweite Tänzerin duplizieren und ändern, der zweite Satz Silhouetten musste verknüpft werden, neue if-Abfragen mussten geschrieben werden, damit dem Erkennen des Tags ein Zuordnen der Tänzerin und ein Einschalten des richtigen Pfades folgte und dann funktionierte der Sketch mit beiden Tänzerinnen.

Ein neues Problem machte sich allerdings breit. Denn Sobald man eine Figur auf dem Tisch stehen hatte und diese erkannt wurde, reagierte der Sketch nicht mehr auf die Finger. Wenn man zuerst die Touchinteraktion ausführte und dann den Marker tracken lies, funktionierte beides aber in dieser Reihenfolge machte es leider keinen Sinn. Nach langem Fehlersuchen habe ich festgestellt, dass es nicht reicht, dass der ByteTag mit Tuio_Object angesprochen wird, sondern dass auch die Finger per TuioCursor angesprochen werden müssen. Denn MousePressed oder Ähnlichem ist es egal, ob es ein Finger oder ein Objekt ist und kann immer nur eines im selben Moment erkennen. Also mussten alle MousePressed-Befehle ind Tuio_Cursor umgeschrieben werden und dann funktionierte auch dies fehlerfrei.

Kurz vor dem Designblick begann ich dann “Eyecandy”- und UX-Maßnahmen zu ergreifen.
Ich hatte den Pfad bereits leicht nach hinten gekippt, um etwas einen räumlichen Eindruck zu vermitteln und verstärkte dies nun durch das Hinzufügen von Wänden mit unterschiedlichen Helligkeitsgraden. Außerdem änderte ich etwas das Aussehen des Pfades.

Nach einiger Zeit des Überlegens kam ich zu dem Schluss, dass es wohl keine Möglichkeit gibt, dass das Programm ohne erklärende Worte von Menschen ohne Vorkenntnisse verstanden werden kann. Daher gestaltete ich es so, dass man, wenn keine Figur auf dem Tisch steht, nur einen weißen Bildschirm sieht und Worte, die einen bitten eine der beiden Figuren auf den Tisch zu stellen. Tat man dies, erschien der Raum und der Pfad. Aber auch an dieser Stelle wüssten die Menschen wahrscheinlich nicht, was sie nun davon zu halten hatten. Also lies ich die Worte erscheinen “Nun fahre mit dem Finger den Pfad entlang.”

Beim Designblick beobachtete ich dann die Menschen genau, wie sie mit dem Programm umgingen und stellte mehrere Dinge fest:

  • Die Besucher hatten das Bedürfnis beide Figuren gleichzeitig auf den Tisch zu stellen, was eigentlich nicht vorgesehen war. Also muss ich dafür eine Lösung finden, die gut funktioniert.
  • Einige hatten tatsächlich Freude an dieser Kleinigkeit des “Aufpoppens” der Silhouetten
  • Viele dachten, sie müssten nach dem Stellen der Figur weiter etwas mit der Figur machen, obwohl der Text anderes sagte. Also muss etwas geschaffen werden, das einen gar nicht erst auf die Idee kommen lässt, die Figur nach dem Stellen noch einmal zu bewegen.
  • Ein Besucher las “Nun fahre mit dem Finger am Pfad entlang.” und fragte “… und dann?”. Damit kein “und …” mehr erwartet wird, fügte ich einfach eines vor dem letzten Befehl ein somit klang “Und nun fahre mit dem Finger am Pfad entlang.” deutlich abgeschlossener und impliziert keine weitere Aufforderung.

 

Projektergebnis

Ich nutzte meine neuen Erkenntnisse und verbesserte erst einmal das Zusammenspiel zweier Figuren. Nun wird “Ros & Juliette” angezeigt und nicht beide Namen gleichzeitig, die sich gegenseitig unschön überlagern wollen. Außerdem ist es jetzt auch möglich beide Pfade gleichzeitig anzeigen lassen zu können. Leider aber nicht, dass die Tänzerinnen auf jeweils ihrem Pfad tanzen, sondern beide auf dem selben Pfad.
Je ein blaues und ein violettes Rechteck (die Farben entsprechen den Tänzerinnenfiguren) habe ich auf den Startbildschirm hinzugefügt und den Befehl aktualisiert, sodass die Figuren ausschließlich auf ihre Felder gestellt werden. Sie könnten zwar weiterhin überall hingestellt werden aber dadurch kommen die User nicht mehr durcheinander.

12345

 

 

Fazit & Ausblick

Mit Processing zu arbeiten kann manchmal sehr frustrierend sein, wenn man irgendwo einen Fehler hat und er will einfach nicht gefunden werden. Aber je mehr man damit arbeitet, desto mehr Spaß macht es. Faszinierend finde ich, dass man an Stellen, wo man nicht weiß wie man sein Ziel erreicht, trotzdem erfolgreich sein kann, wenn man einfach nur logisch denkt und ausprobiert, ob es auf diese (logische) Weise funktionieren kann. Manchmal sitzt man da und denkt überrascht und glücklich “Wow, es hat tatsächlich geklappt.” und dieses Erlebnis hätte man nicht, wenn man sofort nachschlagen würde.

Da es mir immer mehr Spaß gemacht hat, bedaure ich sehr, dass mir am Ende die Zeit gefehlt hat, um noch mehr Dinge umzusetzen und das Programm “fertigzustellen” (sofern man jemals der Meinung sein kann, dass ein Programm fertig ist).

Was ich mir noch vorgenommen hätte, wäre erst einmal, dass man mit mehreren Fingern gleichzeitig an mehreren Pfaden ihre jeweiligen Silhouetten auslösen kann. Die Einbindung von Janine gehört dann natürlich auch dazu.
Die Optik des Programms wäre maßgeblich überarbeitet und umgestaltet worden.
Man könnte dann auch per Wischgesten die einzelnen Szenen durchschalten, deren Namen dann auch angezeigt werden würden.
Alternativ könnte man die Silhouetten auch triggern durch das Berühren eines zusätzlich angebrachten Zeitstrahls. Man könnte sich also zwischen Ort und Zeit entscheiden.
Wenn dies alles programmiert wäre, könnte man durch das Hinzufügen der Audiospuren eine ganz neue Ebene in das Projekt bringen.
Simultan zu den Silhouetten könnte die Tonaufnahme des Stücks an der jeweiligen Stelle starten. Und würde man am Pfad oder Zeitstrahl entlangfahren und nicht an der Stelle gedrückt halten, dann kann man den Audiotrack durch die Bewegungsgeschwindigkeit des Fingers in der Wiedergabegeschwindigkeit steuern …

Downloadlink zum Processingsketch