Archiv für Juni 2010

Screenshots

Veröffentlicht in Gestaltung, Umsetzung am 27. Juni 2010 von Schreibe den ersten Kommentar

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:

Physik zum Anfassen Screenshot

Interfacedesign mit einer Schreibtisch-Metapher

Verstellen des Gewichts der Kugel

Verstellen des Gewichts der Kugel über den Gewichts-Pfeil

Verstellen der Schiefen Ebene

Verstellen der Schiefen Ebene mit Schiebereglern

MediaNight an der HdM

Veröffentlicht in Allgemein am 22. Juni 2010 von Schreibe den ersten Kommentar
HdM MediaNight 2010

HdM MediaNight, SoSe 2010

Am 1. Juli findet an der Hochschule der Medien wieder die MediaNight statt. Dort zeigen die Studierenden, woran Sie währrend des vergangenen Semeters gearbeitet haben.

Diesesmal sind auch wir dabei und präsentieren unsere Physik-Lernsoftware für Multitouch. Außerdem werden auch die anderen Projektarbeiten aus dem Seminar “Interfacegestaltung” zu sehen sein.

Daneben zeigen natürlich auch alle anderen Studiengänge spannende, innovative und zukunftsweisende Arbeiten aus den verschiedensten Bereichen. Ein Besuch lohnt sich also!  Nähere Infos zur MediaNight…

Kleine Helfer – große Wirkung

Veröffentlicht in Programmierung, Umsetzung am 18. Juni 2010 von Schreibe den ersten Kommentar

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 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

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.

Typografie

Veröffentlicht in Gestaltung am 16. Juni 2010 von Schreibe den ersten Kommentar

Die Schriftsuche ist immer die Qual der Wahl. Wir haben uns für zwei Schriften entschieden, die gut unterstreichen, was wir vermitteln möchten:

Hanoded Hand

Hanoded Hand

Zum Einen gibt es den Kritzel-Look, der in Überschriften und Beschriftungen auf dem Papier eingesetzt wird. Hier haben wir uns für die Schrift “Hanoded Hand” entschieden. Die Schrift ist schwungvoll, dynamisch und wirkt hand-geschrieben. Dadurch stellt sie die Verbindung zur restlichen College-Block-Gestaltung her.
Die Schrift ist für private Verwendung kostenlos und kann direkt von www.dafont.com heruntergeladen werden.

Rotis Sans Serif

Rotis - Sans Serif

Für die Verstell-Elemente (z.B. bei der Kugel) findet die “Rotis Sans Serif” Einsatz. Sie wirkt schlicht, offen, klar und bildet gleichzeitig  einen guten Kontrast zur “Hanoded Hand”. Darüber hinaus hat sie eine hohe x-Höhe, was sie gut lesbar macht. Die Schrift ist außerdem in verschiedenen Schriftschnitten verfügbar und so sehr vielfältig einsetzbar. Zum Beispiel lassen sich Hervorhebungen und visuelle Gewichtungen gut mit dieser Schrift lösen. Auch die längeren Texte und Formeln auf den Karteikarten werden deshalb in der Rotis geschrieben. Nähere Informationen zur berühmten Rotis-Schriftfamilie von Otl Aicher gibt es bei Wikipedia.

Interaktionsgestaltung

Veröffentlicht in Gestaltung, Umsetzung am 14. Juni 2010 von Schreibe den ersten Kommentar

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.

Elementgestaltung

Veröffentlicht in Gestaltung, Umsetzung am 14. Juni 2010 von Schreibe den ersten Kommentar

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.

Video Demo

Veröffentlicht in Gestaltung, Programmierung, Umsetzung am 12. Juni 2010 von 1 Kommentar

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!