Multitouch and Beyond

Dieser Blog dokumentiert die Entwicklung der Physik-Lernsoftware “TouchPhysics” für einen Multitouch-Tisch. Das Projekt ist inzwischen abgeschlossen und nähere Infos zur Umsetzung gibt es in der Zusammenfassung. Folgendes Video zeigt unseren Prototypen von TouchPhyiscs:

Andrea Müller & Jürgen Röhm
Informationsdesign, Hochschule der Medien in Stuttgart

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.

Hier ein kleines Video unserer Physik-Anwendung, die wir inzwischen “TouchPhysics” genannt haben. Die Software läuft auf dem Evoluce-ONE Multitouch Tisch und wird von zwei Nutzern bedient:

Funktionen von TouchPhysics

• Gestenerkennung für Schiefe Ebene und Kugel
• Physik-Simulation (Physics Engine)
• Skalieren der Objekte mit zwei Fingern
• Ändern der Größe und des Winkels der Schiefen Ebene mit Schiebereglern
• Ändern des Gewichts der Kugel per Gewichtskraftpfeil
• Radierer, um einzelne oder alle Objekte zu löschen
• Mehrere Fenster mit Erklärungen und Formeln
• Dynamische Berechnung der Formeln, je nach Gewicht, Winkel, etc. desjenigen Objektes, das als letztes verändert wurde

Performance Probleme

Leider konnten wir unser grundsätzliches Performance-Problem nicht lösen. Deshalb reagiert die Anwendung im Video zum Teil etwas langsam. Das liegt zum einen an Flash, was sehr viel Systemressourcen frisst und bei einer FullHD-Auflösung  an seine Grenzen stößt. Zum anderen sind auch die Berechnungen der Physik-Engine verknüpft mit einer aufwendigen grafischen Darstellung sehr rechen-intenstiv.
Vermutlich könnte sich Beides durch eine ausgeklügelte Programmierung mit Fokus auf gute Performance beheben lassen. Da unsere Anwendung aber nur eine Art Prototyp ist, der ein Interaktions-Konzept demonstriert, werden wir es allerdings dabei belassen. Als Nicht-Programmierer sind wir schon froh darüber, dass wir es geschafft haben, unsere Ideen in funktionierenden Code umzusetzen.

Unsere Anwendung “Physik zum Anfassen” nähert sich so langsam dem finalen Stadium. Das heißt nicht, dass die Anwendung komplett umgesetzt und fertig für den Schul-Einsatz ist. Das wäre in so einer kurzen Zeit und mit den gegebenen Mitteln wohl kaum möglich. Ziel ist es, einen funktionsfähigen Prototypen zu erstellen, an dem sich unser Konzept erleben lässt. Und diesem Ziel sind wir schon sehr nahe. Hier ein paar aktuelle Screenshots:

Interfacedesign mit einer Schreibtisch-Metapher

Verstellen des Gewichts der Kugel über den Gewichts-Pfeil

Verstellen der Schiefen Ebene mit Schiebereglern

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.

Interfacedesign der Anwendung

Wie bereits erwähnt, haben wir uns parallel zur Programmierung auch eine Menge Gedanken über die Gestaltung der Oberfläche gemacht. Wir haben viel an Feinheiten gearbeitet. Unter anderem wurden die “Karteikarten” auf eine angenehme Größe gebracht und wir haben der Umgebung gearbeitet, um den Gesamteindruck rund erscheinen zu lassen.

Darüber hinaus haben wir uns auch grundlegenderen Themen gewidmet, wie dem Konzept der Interaktionsgestaltung. Zum einen soll der Zeichen-, bzw. Kritzellook dazu animieren herum zu experimentieren und mit den Elementen viel auszuprobieren. Dies wird durch die Verbindung zu dem Collegeblock hergestellt, der an die Schulzeit erinnert. Zum anderen wollen wir durch die Gestaltung deutlich machen, welche Elemente im “wahren Leben” nicht sichtbar sind und welche Elemente nicht direkt, sondern nur durch das Verändern von Einheiten und Parametern zu beeinflussen sind. Dazu haben wir einen Look gewählt, der dem nahe kommt, was man aus der Webseitengestaltung kennt. Nicht so haptisch anmutend sondern mit glatten, leicht transparenten Oberflächen.

Ein Element, was sich jedoch durch alle Bereich durchzieht, sind die Anfasser. Sie bestehen aus zwei oder drei Vertiefungen in dem Element, und zeigen dem Nutzer, dass er hier etwas bewegen, schieben oder ziehen kann. In welche Richtung dies möglich ist, wird durch die Gestaltung der Regler verdeutlicht.

Die Kugelmasse

Verstellen der Kugelmasse

Darüber hinaus war eine Schwierigkeit das Verstellen der Kugelmasse zu visualisieren. Wir sind von unserer ersten Idee wieder abgekommen, dies über einen Regler um die Kugel herum umzusetzen. Statt dessen macht es viel mehr Sinn den Kraftvektor der Gewichtskraft selbst zu verkürzen oder zu verlängern und damit die Masse der Kugel zu beeinflussen. Das ist möglich, da die Beschleunigung der Kugel, (die Erdanziehung) unter unseren Umständen immer konstant bleibt.

Tippt man nun auf die Kugel oder direkt auf den Kraftvektor, erscheint eine Skala neben dem Vektor, um die Länge besser zuordnen zu können. Die Skala beginnt unmittelbar auf der Höhe des Kugelmittelpunkts. Die Schwere der Kugel soll nach wie vor zusätzlich über den Blauwert der Kugel visualisiert werden (wurde auf dem Screenshot noch nicht umgesetzt). In Zahlen ausgedrückt steht das Gewicht der Kugel direkt am Anfang des Kraftvektors, extra hervorgehoben. Auch die Farbe von Kraftvektor und Kilogramm-Anzeige wurde bewusst gewählt. Sie entspricht der Farbe der Karteikarte, die die Gewichtskraft einführt und erklärt. Ebenso ist dies bei Hangabtriebskraft und Normalkraft gelöst.

Abgeblendeter Hintergrund

Beim Einstellen der Kugelmasse sind alle in dem Moment unwichtigen Dinge abgeblendet. Zum einen, damit der Nutzer dabei nicht zu sehr von anderen Dingen gestört wird, zum anderen,  damit der Prozess des Verstellens deutlich wird.

Design von Kugel und Schiefer Ebene

Kritzel Kratzel, hin und her, jetzt haben wir endlich unsere Gestaltung der Elemente. Die Schwierigkeit bestand darin, dass sie schnell gezeichnet aussehen sollen, da der Nutzer selbst die Kugel und die Schiefe Ebene auf den Tisch zaubert. Für die physikalischen Experimente müssen die Elemente jedoch auch exakt sein.

Wir haben uns nun für einen “Scribble Look” entschieden, der frisch, dynamisch und vor allem ge-scribbled aussieht. Die Gestaltung trägt außerdem dazu bei, dass der Nutzer sieht wie schnell sich eine Kugel dreht.

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.