Quadcopter Interactive Installation

The exercise was to creat an interactive communication System for museums. We had the vision to create a quadcopter Simulation which is controllable through gestures. So we used the Leap Motion for controlling our interface. In this Simulation you are able to explore the components of the quadcopter like the motor and the board with the chips on it. Besides you can fly the quadcopter through gestures with your hand e.g. spread the fingers, roll your hand or make a fist. The Simulation is completely build with web technologies and the quadcopter and its components are build in Cinema4D.
Quadrocopters are often present in the media, but most people don't know how they work. Our target group is mainly 14-20 year old teenagers and young adults. But older people should also have fun with our exhibition. It was important to us to use an intuitive modern control principle for our project. The controls should be fun and invite you to explore. In addition, we wanted to implement our project completely with web technologies so that it could be accessed in any browser.
As technology we used the Leap Motion. The Leap Motion can determine the position and angle of the hand and measure how many fingers are visible. In exploration mode, you stretch out your index finger and use it to control a round "pointer" with which you can select individual objects of the quadrocopter. In flight mode you stretch out your hand with spread fingers and the quadrocopter takes over the movements of your hand. So you can fly the Quadrocopter intuitively. For the tutorial we filmed all gestures and got a transparent hand by post-processing, of which we only see the contour. Thus the tutorial is not disturbing but nevertheless visible with a light animation in the interface.

The project was implemented with web technologies. The backmost layer is the 3D layer, which is realized with WebGL. With the Javascript Library "Three.js" you can add objects and lights, assign materials and move or manipulate objects similar to 3D programs like Cinema 4D. The individual parts of the Quadrocopter are imported with an .obj importer. In each view, the camera position changes, where it looks and the positions of the individual parts, etc., change. This data is managed in a JSON file. If a new view is selected, the information is read and the parameters adjusted.Above the 3D layer there is a SVG layer. In this layer are the selection points, which are built and manipulated with the Javascript Library "D3“. The remaining layers are mainly HTML. Here you can still see the "Pointer" which is built with CSS and positioned with Javascript.The content with text and images is HTML. In flight mode SVG with "D3" was also used for visualization. For the Leap Motion there is its own Javascript Library "leap. js". With the help of this library it is possible to get all information like position and rotation of the hand. By reading out the fingertip position and the direction vector (the direction in which the fingers point), the point at which the pointer is located can be calculated. In flight mode, the rotations around the pitch and roll axis of the hand are read out and mapped to the quadrocopter. The angles influence the speed of the flight, the rotor speed and the visualization which can be seen below.