Multitouch and Beyond

Physik und Multitouch

Die Multitouch-Technologie erlaubt neue und intuitive Formen der Interaktion mit Computern. Dabei werden Eingaben nicht über Maus und Tastatur getätigt, sondern direkt mit dem Finger. Neben vielen anderen Anwendungsgebieten, kann die Multitouch-Technik auch für multimediales Lernen eingesetzt werden. Besonders für exploratives und selbstgesteuertes Lernen macht dies Sinn.
TouchPhysics ist eine gesten-basierte Multitouch-Anwendung, die auf diesem Prinzip aufbaut. Dabei werden physikalische Verhaltensweisen von Objekten und ihre Auswirkungen auf andere Objekte veranschaulicht, die in der echten Welt nicht zu sehen sind. So werden zum Beispiel die verschiedenen Kräfte simuliert, die auf einen Körper einwirken.

Didaktik

Lernkarteikarte

Konkret geht es bei TouchPhysics um das Beispiel der Schiefen Ebene. Die Anwendung enthält, unter anderem, verschiedene Lernkarteikarten. Diese enthalten Erklärungen zum Themengebiet Schiefe Ebene, sowie alle nötigen physikalischen Formeln und Definitionen.  Ausgehend von den Eigenschaften der ausgewählten Objekte, werden dann die verschiedenen Kräfte dynamisch berechnet. Der Nutzer kann so beobachten, welche Parameter sich wo in den Berechnungen niederschlagen, und wie deren Auswirkung auf den gezeichneten Körper ist. Ziel von TouchPhysics ist es, das ganzheitliche Verständnis für das Thema zu fördern und interaktiv, spielerisch Wissen zu vermitteln. Es ist denkbar, dass das Physik-Lernprogramm im Unterricht verwendet wird. Ein Lehrer könnte so z.B. physikalische Berechnungen veranschaulichen. Außerdem könnte TouchPhysics als Ergänzung zum Unterricht dienen, bei dem Schüler selbstgesteuert ausprobieren und spielerisch ihr Wissen vertiefen.

Interaktion

Einstellen des Gewichts

Der Nutzer kann ganz einfach eine Kugel und eine Schiefe Ebene auf den Touchscreen zeichnen und diese mit dem Finger umher schieben. Die Elemente bekommen physikalische Eigenschaften und verhalten sich dabei ähnlich wie in der richtigen Welt. Diese Eigenschaften lassen sich direkt am Objekt ändern. So kann z.B. das Gewicht einer Kugel verstellt werden, indem der Nutzer den Pfeil der Gewichtskraft verlängert oder verkürzt. Diese Veränderung wirkt sich dabei unmittelbar auf die Interaktion aus. So wirkt eine schwere Kugel beim Bewegen träger als Leichtere. Größe und Winkel der Schiefen Ebene lassen sich ebenfalls bequem per Schieberegler verstellen.

Gestaltung

Schreibtisch Metapher

Besonderen Wert wurde bei TouchPhysics auf eine intuitive Bedienung und positive Nutzer-Erfahrung gelegt. Die Gestaltung basiert auf der Metapher eines Schreibtisches bzw. eines College-Blocks. Dadurch kann der Nutzer seine Vorerfahrungen aus der echten Welt auf das System übertragen. So verbirgt sich z.B. die Löschen-Funktion der Anwendung hinter dem Radierer, der ganz einfach auf der Zeichenfläche umher gezogen werden kann. Das Interface beinhaltet außerdem nur eine einzige Schaltfläche und lässt sich ansonsten komplett mit Bewegungen und Gesten steuern.

Umsetzung

Die konkrete Realisierung des Prototyps erfolgte auf dem ONE Multitouch-Tisch der Firma Evoluce. Die Anwendung selber wurde in ActionScript3 programmiert, wobei verschiedene ergänzende Programmierbausteine verwendet wurden. Zum einen liefert das Multitouch-Framework GestureWorks der Firma Ideum die nötigen Funktionen für die gestenbasierte Interaktion. Zum anderen ermöglicht die Physik-Engine Box2D, dass die gezeichneten Körper physikalische Eigenschaften erhalten. Zudem wurden weitere AS3-Ergänzungen verwendet, um z.B. die Objekt-Erkennung und die Funktionen von verschiedenen Interaktionselementen zu realisieren.

Allerdings konnte aufgrund von technischen Problemen und großer Komplexität nur ein Teil des ursprünglichen Konzepts umgesetzt werden. Trotzdem ist der Prototyp gut geeignet um die Grundidee der Anwendung zu erfahren und sein Physikwissen wieder etwas aufzufrischen.

Die Entwicklung und vor Allem das Programmieren unserer Multitouch-Anwendung schreitet unweigerlich voran. Zwar gibt es immer wieder Rückschläge und Herausforderungen aber irgendwie geht’s immer. Neben dem $1Recognizer und Box2D haben wir inzwischen einige andere AS3-Klassen eingebunden, die maßgeblich zu unserer Anwendung beitragen.

Animationen mit GreenSock

GreenSock Logo

GreenSock ist eine Sammlung von Klassen um schnell und einfach Objekte per ActionScript zu animieren. GreenSock TweenMax bietet z.B. Effekte wie Ein/Ausblenden, Animieren, Drehen, Skalieren, etc. Die Bibliothek ist verlässlich, einfach zu nutzen und wird von einer aktiven Community ständig weiter entwickelt.

.

Schieberegler mit SliderUI

Die SliderUI von Matt Przybylski ist eine Klasse um Schieberegler (Slider) in Flash zu generieren. Somit können recht schnell eigene Slider gebastelt werden, ohne auf die vorgefertigten Komponenten von Flash zurückgreifen zu müssen. SliderUI bietet u.A. Methoden um die Position des Schiebereglers auf der Skala zu bestimmen oder Start- und Endwerte festzulegen.
Komplett “Out-of-the-Box” konnte die Klasse allerdings nicht verwendet werden, weil sie für die Verwendung mit einer Maus entwickelt wurde. Es waren noch einige kleine Anpassungen an unser Multitouch-Framework GestureWorks nötig.

Update: Es gibt die Schieberegler-Klasse auch in der Version SliderUI v1.5. Die neue Version beinhaltet u.A. ein Flash-CustomEvent, was z.B. bei unserer Anwendung zum Einsatz kommt. Mit einem CustomEvent lässt sich in Flash die Kommunikation zwischen unabhängigen Objekten realisieren.

Performance-Überwachung mit SWF Profiler

SWF Profiler Screenshot

Ein Thema plagt uns leider immer noch: Die Performance unserer Anwendung. Leider sind die  Berechnungen und Kollisions-Erkennungen von Box2D sehr rechen-intensiv. Hinzu kommen eine Full-HD-Auflösung (1920×1080), zahlreiche grafische Elemente, zahlreiche externe Klassen und viele interne Funktionen. Das Alles macht die Physik-Lernsoftware mit jedem gezeichneten Element spürbar langsamer. Da unser Konzept aber eigentlich nur zwei Elemente (Kugel und Schiefe Ebene) vorsieht, werden wir uns nicht ausgiebig mit dem Thema Performance-Optimierung kümmern.
Ein Tool zum Überwachen der Performance von Flash haben wir dennoch eingebaut. Der SWF Profiler lässt sich einfach in bestehende Projekte integrieren und zeigt z.B. die aktuelle Frame-Rate, sowie die Arbeitsspeicher-Nutzung an.

Heute gibt’s eine kleine Video-Demonstration vom bisherigen Stand unserer Anwendung:

[swfobj src="http://www.info-design.net/multitouch/wp-content/uploads/2010/06/2010-06-12_1235.swf" alt="TouchPhysics Video Demo - Flashplayer nötig!" width="580" height="400"]

(Die Performance der Anwendung lässt noch etwas zu wünschen übrig. Das liegt im Video zum einen an der Screencasting-Software, zum Anderen müssen wir uns aber generell erst noch um Performance-Optimierung kümmern.)

Bisher implementierte Funktionen:

• Zeichnen: Gesten-Erkennung für Kugel + Schiefe Ebene
• Objekte: Erzeugen entsprechender Objekte basierend auf Größe und Position der Zeichnung
• Physik: Physik-Engine mit Erdanziehungskraft und Kollisionserkennung
• Objekt-Manipulation: Drag n’ Drop, Löschen per Doppel-Tap
• Steuerung: Pausieren der Physik-Welt

Keine Objektorientierung mehr

Zur Umsetzung ist noch zu sagen, dass wir uns von einer Objektorientierten Programmierung wieder entfernt haben. Unser Überlegungen bzgl. Klassen- und Vererbungsbeziehungen waren zwar der “saubere” Ansatz eine solche Anwendung zu programmieren, aber in der Umsetzung deutlich komplexer als erwartet.  Vor Allem die Kommunikation zwischen unabhängigen Klassen (was für die Integration von Box2D unbedingt nötig ist) hat uns große Probleme bereitet.
Wir haben uns deshalb entschieden nur noch einen “Minimal-OOP-Ansatz” zu verfolgen und haben (fast) alle Funktionen, etc. wieder in unsere Dokumentenklasse geschrieben. Das ist zwar nicht besonders elegant und widerspricht dem eigentlichen Sinn der Objektorientierung aber es funktioniert (für uns) einfacher!

Gestaltung

Das Video demonstriert nicht nur die Funktionen unserer Anwendung, sondern ist auch eine kleine Vorschau auf die Gestaltung. Wir haben uns in den vergangen Tagen viele Gedanken zu Interaktionselementen, Farben, Formen, Typografie, etc. gemacht. Unser Ziel ist ein Spagat zwischen dem Look and Feel einer Handzeichnung und, aus dem PC Bereich, bekannten Elementen zur Interkation. Näheres dazu in Kürze!

Objekt-Orientierte Programmierung ist zwar für viele Programmierer Alltag, stellt für uns als Infodesigner aber (mehr oder weniger) Neuland dar. Die Multitouch-Frameworks unter AS3 sind allerdings alle objekt-orientiert, was uns (zu Recht) dazu zwingt uns auch mit diesem Thema auseinander zu setzten. Zwar hatten wir die Grundzüge der OOP im Studium, die Praxis kam dabei allerdings zu kurz.

Hier ein paar hilfreiche Ressourcen, die OOP in Bezug auf Flash erklären:

• Object-oriented programming (Adobe Developer Connection)
• Grundlagen der objektorientierten Programmierung (Flash CS3 Dokumentation)

OOP Klassendiagramm

Für unsere Physik-MT-Anwendung haben wir eine Art Klassendiagramm erstellt. Das ganze ist kein “richtiges” UML-Diagramm,  zeigt aber trotzdem grob die wichtigsten Elemente (bzw. Klassen) unseres Systems und deren (Vererbungs-)Beziehungen. Unsere Anwendung besteht aus einer Dokumenten-Klasse (Papier), die mehrere Fenster, eine Kugel und eine Schiefe Ebene enthält. Jedes dieser Elemente hat eine seperate Klasse und erbt dabei von bereits bestehenden Klassen aus Flash, Box2D und GestureWorks. Das Ganze soll helfen bei der Programmierung die Zusammenhänge nicht aus den Augen zu verlieren und außerdem als kleine Gedächtnissütze dienen.

FMF vs. GestureWorks

Heute haben wir uns entschieden statt dem Flash Multitouch Framework (FMF) von EVOLUCE, das kommerzielle GestureWorks-Framework zu verwenden. Dieses bietet u.A. eine Unterstützung für die Bühnengröße 1920×1080 (Full-HD) und ist einfacher zu verwenden. In dieser Entscheidung sind wir unseren Mit-Studenten gefolgt, die seit letzter Woche ebenfalls GestureWorks statt FMF verwenden.

Flash Hardware Beschleunigung

Hardwarebeschleunigung in Flash

Wir haben heute außerdem eine Lösung für die Performance-Probleme von Flash gefunden. Unser erster MT-Prototyp (mit FMF) hatte auf dem MT-Tisch z.T. große Probleme mit der Leistung. Die Anwendung lief sehr ruckelig und die Objekt-Erkennung war langsam und unpräzise. Die Lösung dafür war klein aber fein. Unter den Veröffentlichungs-Einstellungen bietet Flash, im Bereich “Erweitert”, die Möglichkeit eine Hardwarebeschleunigung festzulegen. Mit “Stufe 2 – GPU” lief unsere Anwendung flüssig und ohne Verzögerung auf dem Evoluce-ONE. Schön, dass es manchmal auch einfache Lösungen gibt

Das Einarbeiten in die Welt von Box2D (und AS3) geht weiter. Während unser erstes Physik-Engine-Beispiel nicht viel mit unserer Anwendung zu tun hatte, wird es jetzt etwas konkreter. Als hilfreich für’s Lernen von Box2D hat sich http://www.box2dflash.org/ erwiesen. Außerdem finden sich auch bei Emanuele Freonato (immer wieder) gute Tutorials und Code-Schnipsel.

Im unteren rudimentären Prototypen gibt es drei verschieden schwere Kugeln, die eine Schiefe Ebene hinunter rollen. Die Farbe zeigt dabei das Gewicht der Kugeln (1kg, 4kg, 8kg). Interessant ist dabei die Frage, wie sich das Gewicht “anfühlt”, wenn z.B. die Kugel mit der Maus bewegt wird. Die komplette Animation kann per Tastendruck (beliebige Taste) pausiert und wieder abgespielt werden.

Es hat sich außerdem gezeigt, dass Box2D “unsere” Berechnungen (z.B. Hangabtriebskraft) nicht direkt durchführt. D.h. wir müssen die Kräfte unabhängig von der Physik-Engine berechnen.

Box2D Screenshot

Da es sich bei unserer MT-Anwendung im Grunde um eine Physik-Simulation handelt, brauchen wir natürlich auch eine Physics Engine. Dieses Antriebssystem (“Engine”) ist eigentlich sogar das Herzstück unserer Andwendung, weil es alle physikalischen Simulationen und Berechnungen übernimmt. Wir haben uns in den letzten Tagen mit Box2D beschäftig. Das ist eine weit verbreiteten Physics Engine von Erin Catto, die hauptsächlich für Computerspiele eingesetzt wird. Ursprünglich in C++ entwickelt gibt es inzwischen zahlreiche Übertragungen z.B. Box2D FlashAS3. Leider gibt es für Box2D nur eine rudimentäre Dokumentation und nur wenige (gute und vollständige) Tutorials. Die Physics Engine ist auch nicht gerade selbsterklärend und hat einige Eigenarten aus der C++-Welt. Die neueste Version 2.1a scheint noch einige Probleme zu haben, weswegen wir uns für die etwas ältere V2.0.2 entschieden haben. Für diese Version lassen sich auch mehr Tutorials finden. Folgende Ressourcen waren für uns bis jetzt hilfreich:

• Ausführliche Video Tutorials von Todd Kerpelman: http://www.kerp.net/box2d/
• Einsteiger Tutorial von Emanuele Feronato: http://www.emanueleferonato.com/2009/01/27/box2d-tutorial-for-the-absolute-beginners/
• Tutorial zum “Debug Draw”: http://www.emanueleferonato.com/2008/12/10/understanding-box2d-debug-draw/

Und hier unser kleiner “Hallo Box2D-Welt”-Prototyp, ganz im Zeichen der Fußball WM. Die Bälle lassen sich mit der Maus umher “werfen” bzw. k(l)icken

(Leider ist die Online-Version ein wenig fehlerhaft aber wir arbeiten dran … )

Parallel zur Arbeit am Konzept haben wir auch unseren Prototypen zur Gesten Erkennung nochmals verbessert. Folgendes ist neu:

• Es werden nur noch Gesten verarbeitet, die zu mind. 75% mit einer Vorlage übereinstimmen
• Es gibt mehrere Vorlagen für die beiden Elemente, damit schlecht gezeichnete Umrisse besser erkannt werden
• Die Objekte lassten sich einfach per Drag n’ Drop verschieben
• Es gibt eine Begrenzung, damit Elemente nur auf der Bühne verschoben werden können

Weiter werden wir den Prototyp aber nicht mehr ausbauen. Statt dessen werden wir als nächstes mit 2D Physik-Engines für Flash experimentieren.

Update (19.05): Es gibt auch noch zwei weitere, vielversprechende Algorythmen zur Gesten-Erkennung:

• Simple Gesture Recognition in AS3 von Arnaud Icard
  (Schöne Animation und einfache Implementierung unter AS3)
• $N Multistroke Recognizer in JavaScript
  (Erkennung von mehreren, nicht-zusammenhängend gezeichneten Strichen. Bisher leider nur für JavaScript.)

Die erste technische Herausforderung ist gelöst! Wir haben uns überlegt, in unserer Anwendung eine spezielle Gesten-Erkennung einzubauen. Diese soll dazu dienen, dass man (mit Stift oder Hand) Umrisse zeichnen kann, die vom System dann erkannt werden.

In unserem Prototyp lassen sich ganz einfach Kugeln und Schiefe Ebenen zeichnen:

Herzstück unseres ersten Prototyps ist der $1 Recognizer. Dieser einfache aber mächtige Algorythmus verarbeitet Eingaben (graue Linie) zu Punkt-Mustern (rote Punkte) und vergleicht diese mit gespeicherten Vorlagen. Christoph Ketzler hat den $1 Recognizer für ActionScript3 umgesetzt und der Quellcode lässt sich auf seinem Blog herunter laden. Diesen Code haben wir an unsere Bedürfnisse angepasst, eigene Vorlagen definiert und verschiedene Funktionen ergänzt. So werden z.B. Größe und Position der Geste erkannt um dann ein entsprechendes Element (Kugel oder Schiefe Ebene) auf der Zeichenfläche zu erzeugen.

Prototyp auf dem MT Tisch

Nachtrag: Heute (27.04.) haben wir unseren kleinen Prototyp auf dem MT-Tisch (mit der nativen MT Unterstützung von Windows 7) getestet. Die Gesten-Erkennung hat zwar überraschend gut funkioniert, es hat sich aber auch gezeigt, dass noch einige kleine Bugs zu beseitigen sind.