Inhaltsverzeichnis. Ramona Betschart

Transkript

1 2014 3D-Klavier Autor Betreuer Luca Schafroth, Stefan Meier Institution Schweizer Jugend Forscht Ort FHNW Brugg-Windisch Datum

2 Inhaltsverzeichnis 1. Einführung Meine Erwartungen Projektbeschreibung Ziele Voraussetzungen und Materialien LeapMotion Programmierung Umsetzung Vorgehen Schluss Resultate Schlussfolgerungen Reflexion Probleme Weitere Features Dank

3 1. Einführung 1.1. Meine Erwartungen Auch wenn ich durch meine Lehre als Informatikerin bereits einige Programmiersprachen kenne, habe ich noch nie mit LeapMotion oder three.js programmiert. Da wir auch mit JavaScript arbeiten, sind meine Erwartungen, dass ich durch dieses Projekt meine Kenntnisse im JavaScript verbessern kann, und dass ich das Gerät LeapMotion und die Entwicklungsumgebung three.js kennen und programmieren lerne. Ich erwarte, dass ich nach dieser Studienwoche selber mit Hilfe von three.js ein solches oder ähnliches Projekt realisieren könnte Projektbeschreibung Das Projekt umfasst eine Webseite, auf der eine 3D-Klaviertastatur zu sehen ist. Mit Hilfe des LeapMotion ein per USB an den Rechner anschliessbares Gerät, welches Fingerbewegungen registrieren kann soll man dann virtuell durch solche Fingerbewegungen auf diesem Klavier spielen können Ziele Für unser Projekt wurden die Ziele wie folgt festgelegt: - Die Finger sowie Klaviertastatur im 3D-Raum darzustellen - Die mit LeapMotion registrierten Fingerbewegungen mit den 3D-Fingern darzustellen - Je nach Tastaturberührungen einen Ton abzuspielen Das Ziel war es, diese Grundlegenden Funktionen zu programmieren, so dass das 3D-Klavier genutzt werden kann. Falls wir diese Ziele bereits vor Projektabgabe erreicht haben, können jeder Zeit noch weitere Features einbauen Voraussetzungen und Materialien Das wichtigste Gerät, welches zusätzlich benötigt wird, um auf der virtuellen Klaviertastatur zu spielen, ist das LeapMotion. Um in einer 3D-Umbgebung unser Klavier darzustellen, benötigt man eine spezielle Entwicklungsumgebung, three.js LeapMotion Das LeapMotion ist ein Gerät, welches per USB an einen Rechner angeschlossen werden kann. Es kann Fingerbewegungen wahrnehmen und diese danach mit Hilfe der JavaScript-Bibliothek threeleapcontrols in ein brauchbares Format umwandeln und am Bildschirm anzeigen und ausführen

4 2. Programmierung Die Webseite, auf welchem wir das Klavier angezeigt haben, haben wir mit JavaScrip aufgebaut. Da das Projekt in 3D realisiert wurde, haben wir zusätzlich mit three.js und physi.js programmiert. Bei der Programmierung haben wir hauptsächlich darauf geschaut, dass alle Features eingebaut werden und das Klavier funktioniert. Daher könnte man den Programmcode nun noch stark kürzen. 3. Umsetzung 3.1. Vorgehen Bevor wir mit dem eigentlichen Projekt begannen, haben wir uns mit dem LeapMotion und der Umgebung three.js auseinandergesetzt. Dazu haben wir einige bereits fertige Objekte, welche mit three.js realisiert und mit LeapMotion gesteuert wurden, ausprobiert und umprogrammiert. Danach haben wir uns ausgedacht, wie das Klavier aussehen und funktionieren soll. Als wir eine Vorstellung davon hatten, wie das Projekt am Ende aussehen soll, haben wir versuchte eine Taste zu entwerfen, welche beim Berührung durch eine von LeapMotion wahrgenommene Handbewegung, einen Ton abspielt. Dank den bereits vorgegebenen Beispielen, an denen wir gut nachschauen konnten, wie ein Button erstellt werden kann und wie man eine Push-Action hinzufügt, war dies keine unmögliche Herausforderung. Nachdem wir eine Taste hatten, war es nicht mehr schwierig die anderen Tasten inkl. der schwarzen Tasten auch zu erstellen und so das Klavier im Design fertig zu stellen. Nun waren wir so weit, dass das Klavier spielbar war, jedoch gab es noch keine Tastenbewegungen und die Töne auf allen Tasten waren noch gleich. Da die Tasten bei einem richtigen Klavier auch nicht starr bleiben und sich nicht bewegen, wenn man darauf klickt, wollten wir nun diese Tastenbewegung einfügen. Dies stellte uns vor einige Probleme, da die Tasten sich nicht nur nach unten, sondern auch zur Seite bewegten. Nachdem wir dieses Problem einigermassen behoben haben, und sich die Tasten nur noch nach oben und unten bewegen konnten, haben wir damit begonnen den Tasten einzelne Töne zuzuweisen, damit jede Taste einen eigenen Ton hat. 4. Schluss 4.1. Resultate Das Ergebnis ist ein 3D-Klavier, auf welchem man mit Hilfe des LeapMotion durch Fingerbewegungen die Tasten drücken und Töne spielen kann. Die Klaviertastatur umfasst 2 Oktaven und bewegt sich beim Spielen. Ein weiteres spezielles Feature ist die Bedienbarkeit der Klaviertastatur über die Computertastatur

5 4.2. Schlussfolgerungen Insgesamt stellten wir erfreulich fest, dass wir alle festgelegten Projektziele erreichen konnten Reflexion Auch wenn ich bereits Vorkenntnisse in einigen Programmiersprachen besass, habe ich in der Studienwoche viel Neues lernen können. Auch wenn für mich die Entscheidung einen Beruf in der Informatik zu erlernen bereits gefallen ist, habe ich in dank dieser Studienwoche gemerkt, dass ich nach Abschluss meiner Lehre nicht weiter arbeiten möchte, sondern zuerst eine Fachhochschule zu besuchen und Informatik zu studieren Probleme Während des Programmierens sind wir immer wieder auf Probleme gestossen. Das grösste Problem, welches wir hatten war, dass sie die Tasten nicht nur nach unten bewegten, sondern auch zur Seite. Da dies bei einem echten Klavier nicht der Fall ist, und dadurch die Tasten auch zusammenstiessen, mussten wir diese Bewegung noch ausbauen. Dies gestaltete sich jedoch als schwieriger als zuvor gedacht. Nach mehreren umgesetzten Ideen, welche allesamt die Tastenbewegung zur Seite nicht verhinderten, kamen wir auf die Idee, die Tasten an der hinteren Wand des Klaviers zu fixieren. Nun konnten sich die Klaviertasten nur noch um diese Achse drehen. Dies führte jedoch dazu, Damit sich die Tasten nun nicht einfach um diese Wand drehten, haben wir noch eingestellt, wie weit sich die Tasten nach oben oder unten bewegen können. Eine weitere Schwierigkeit, welche aufgetaucht ist, waren die Tastentöne. Es war schwer verschiedene passende Klaviertöne zu finden, welche wir abspielen können, wenn die Taste gedrückt wird. Um diese Klaviertöne abzuspielen, haben wir ein JavaScript gefunden, welches die Töne generiert Weitere Features Zusätzlich zu den Funktionen, welche das Klavier zwingend benötigte (siehe Ziele), haben wir noch weitere Features eingebaut, welche das Klavier realistischer und interessanter machen. - Taste bewegt sich nach unten wenn sie gedrückt wird - Verbesserung des Designs - Spielbar auch mit Computer-Tastatur - Wenn weder mit Tastatur noch über LeapMotion gespielt wird, spielt eine Hand ein zuvor angefertigtes Muster als Loop. - Funktion, ob die automatische Hand spielen soll oder ob man mit der Computertastatur spielen möchte - Man kann nur mit der Computertastatur spielen, wenn weder durch die automatische Hand, noch über LeapMotion gespielt wird

6 4.6. Dank Wir danken zuerst unseren Betreuern Stefan Meier und Luca Schafroth, die uns bei dem Projekt geholfen haben und bei Fragen oder Unklarheiten immer helfen konnten. Weiter danken möchten wir Claude Rubattel für die Unterstützung und Organisation während der Studienwoche in Brugg. Der grösste Dank gilt der Stiftung Schweizer Jugend forscht, die das ganze Projekt überhaupt ermöglicht haben