topic
We started with a few ideas like "Character Creation", "Human - Cyborg - Robot" and "Subcultures".
Finally we resolved in taking "Subcultures" as a topic. Because it suited the task well and it was intresting to discover the different subcultures their signs and connections to other subcultures.
We started to think about what to take as an Art style for the mapped face we made a few sketches and prototypes in Photoshop with the cell shading style because it seemed fancy but we have fast ascertained that photographs are looking way better.

We then started to search for full frontal perfectly alligned face portraits. After we got the permission to use a portrait of photographer MaLize Evans we started photoshopping.
gestures
The JavaScript Code defines which gestures can be used and where clickable areas are or action areas. We first wanted to change the faces by swiping but we faced some problems there.
The problem is that the Leap Motion Controller is giving out values while swiping for the whole duration of swiping not just one value per swipe. After we finally found the issue and fixed it we decided to turn the wheel around and make an interface instead of swiping.

The interface now works like this: a little turquoise circle is representing the courser which is navigated using the Leap Motion Controller. When the circle is hovering over a certain area, which is represented by a button with a symbol for each subculture, the icon is displaying a circle animation and after the circle is full the face changes. The loading animation is in fact a tiny video which starts when you are hovering over the different subculture buttons.
At the end of the list with the different subcultures on the interface there is a button which resets the current face to the standart natural face.
facial mappings
For the different subcultures we had to do a lot of research, because we needed subcultures which are defining themselves a lot through facial makeup. In the end we chose the subcultures of Gothic, Steampunk, Hipster, Rockabilly and Cosplay.
All of the face makeup was created using digital makeup technics in Photoshop.
The animations were created using After Effects.

special thanks to
material & tools
Adobe Photoshop CC
Adobe After Effects CC
Adobe Illustrator CC

Adobe Premiere CC
HTML 5
JavaScript
up we go!