Quadcopter Interaktive Ausstellung

Eine interaktive Museumsinstallation die Quadcopter erklärt

Starte das Projekt hier: http://quad.michaelbais.ch/

(Leap Motion zur navigation erforderlich)

Unsere Aufgabe war es eine interaktive Museumsausstellung zu erstellen. Wir konnten das Thema frei wählen und haben uns dazu entschieden in unserer Ausstellung zu erklären wie ein Quadrocopter funktioniert.

Quadrocopter sind immer wieder in den Medien präsent, doch die meisten Menschen wissen nicht wie diese funktionieren.

Unsere Zielgruppe sind hauptsächlich 14-20 jährige Teenager und junge Erwachsene. Aber auch ältere Menschen sollen mit unserer Ausstellung Spaß haben. Uns war es wichtig ein intuitives modernes Steuerungsprinzip für unser Projekt zu verwenden. Die Steuerung sollte Spaß machen und zum Forschen einladen.

Außerdem wollten wir unser Projekt komplett mit Webtechnologien umsetzen damit man es in jedem Browser aufrufen kann.

 

Als Technologie haben wir die Leap Motion verwendet. Die Leap Motion kann die Position und Winkel der Hand bestimmen und messen wie viele Finger sichtbar sind.

 

quadcopter1

Im Explorationsmodus streckt man seinen Zeigefinger aus und steuert damit einen runden „Pointer“, mit dem man einzelne Objekte des Quadrocopters auswählen kann.

 

quadcopter2

Im Flugmodus streckt man seine Hand mit gespreizten Fingern aus und der Quadrocopter übernimmt die Bewegungen der Hand. Somit kann man den Quadrocopter intuitiv fliegen.

 

Für das Tutorial haben wir alle Gesten abgefilmt und durch Nachbearbeitung eine transparente Hand erhalten, von der wir nur die Kontur sehen. Somit ist das Tutorial nicht störend aber trotzdem mit einer leichten Animation im Interface sichtbar.

Das Projekt wurde mit Webtechnologien umgesetzt. Die hinterste Ebene ist die 3D Ebene, diese ist mit WebGL verwirklicht. Man kann mit der Javascript Library „Three.js“ ähnlich wie in 3D Programmen wie Cinema 4D Objekte und Lichter hinzufügen, Materialien vergeben und Objekte bewegen bzw. manipulieren. Die einzelnen Teile des Quadrocopters sind mit einem .obj Importer importiert.

quadcopter3

In jedem View verändert sich die Kameraposition, wo diese hinschaut und Positionen der einzelnen Teile etc. Diese Daten werden in einer JSON Datei verwaltet. Wählt man einen neuen View aus, werden die Informationen ausgelesen und die Parameter angepasst.

Über der 3D Ebene gibt es eine SVG Ebene. In dieser Befinden sich die Auswahlpunkte, die mit der Javascript Library „D3“ gebaut und manipuliert werden.

Die restlichen Ebenen sind hauptsächlich HTML. Man sieht hier noch den „Pointer“ der mit CSS gebaut und mit Javascript positioniert wird. Der Content mit Text und Bilder ist HTML. Im Flugmodus wurde für die Visualisierung auch SVG mit „D3“ verwendet.

Für die Leap Motion gibt es eine eigene Javascript Library „leap. js“. Mit Hilfe dieser Library ist es möglich alle Informationen, wie Postion und Rotation, über die Hand zu erhalten. Durch Auslesen der Fingerspitzenposition und des Richtungsvektors (die Richtung in die der Finger zeigt) kann der Punkt, an dem sich der „Pointer” befindet, ausgerechnet werden.

Im Flugmodus werden die Rotationen um die Pitch- und Roll-Achse der Hand ausgelesen und auf den Quadrocopter gemappt. Die Winkel beeinflussen die Geschwindigkeit des Fliegens, die Rotorgeschwindigkeit und die Visualisierung die Unten zu sehen ist.