Smile transition is an application that recognize human facial expression and trigger the transition between different pages, and the transition is transformed into random geometry shapes.

How it works: When you pass by the interactive window on the street it will recognize your facial expression through the camera behind the window. Once the camera detected your facial expression is a smile, it will transformed into a random geometry shape and then show you a different images.


The Idea for this project is to designed an eye-catching interaction for the display window on the street. The design of change a 2D image into a different geometry shape and size through a folding movement gives the interaction a 3D feeling so it can pop up from the flat window. And for the reason to choosing a smile as the facial expression to trigger the transform, it’s because it will add on a delightful and playful feeling to the interaction.

The technology for this product is mainly computer vision and facial recognition, use machine learning to recognize the facial expression and the environment to trigger the transition between different advertisement contents. The visual mainly feature with Three.js and JavaScript, get the vertexes of a  plane and pull them into a 3D shape.

The algorithm of the graphic changing:

Screen Shot 2018-01-28 at 2.45.48 PM.png
Screen Shot 2018-01-28 at 2.46.10 PM.png

Web Mock-up Demo