An interactive mirror experience
(4 weeks Project)
HTML, CSS, Illustrator,
We wanted to retain to the fundamental concept of a mirror. Due to that we aimed to create visual effects through different arrangements of the image sections, twists and turns. Our concept should been something that you could recreate with a normal mirror up to a specific point. Overall it was our goal to attract the user and to let him experience the interactions through intuitive movements. For this goal we found a variation of a kaleidoscope as a perfect solution.
A kaleidoscope is built up by a even number of triangles which are arranged in a circle. Two triangles next to each other built a mirrored couple. Every single triangle displays a section of the video, which the user records with his webcam. As a result the user faces multiple reflections of himself.
To allow the user to interact with the kaleidoscope, he needs to by recognised by it. For this purpose be built glasses with a coloured element at the bridge. This yellow colour gets tracked to ascertain the position and movements of the user. The tracking involves the horizontal and vertical position as well as the distance of the user to the camera. The glasses furthermore allow the feeling, as if the effects are only visual through the glasses, since they only start when they are worn.
This video visualises our process as well as the final product.