Role
Ideation,
coding/prototyping
the interactions
An interactive mirror experience
Ideation,
coding/prototyping
the interactions
February 2018
(4 weeks Project)
2nd Semester
Ethan Günther
Ferdinand Sorg
Rifat Erdogan
Javascript, Tracking.js,
HTML, CSS, Illustrator,
Premiere Pro
Ideation,
coding/prototyping
the interactions
February 2018
(4 weeks Project)
2nd Semester
Ethan Günther
Ferdinand Sorg
Rifat Erdogan
Javascript, Tracking.js,
HTML, CSS, Illustrator,
Premiere Pro
This motto was the birth hour of Lucys Diamond, our interactive mirror experience. Compared to my other projects, this one is not solving any specific problem. It is just about interaction, fun and deepening our javascript skills. Our goal was to create a unique experience for the user by letting him interact with his webcam.
Research
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.
Concept
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.
Interaction
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.
Result
This video visualises our process as well as the final product.
©Valerie Grappendorf 2020 Impressum