Lucies Diamond

An interactive mirror experience


the interactions


February 2018
(4 weeks Project)
2nd Semester


Javascript, Tracking.js,
HTML, CSS, Illustrator,
Premiere Pro

What’s the best way to learn programming? Right. Learning by doing!

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.

01 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.

02 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.

03 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.

04 Result

This video visualises our process as well as the final product.

Letzte Werbung

Prohibition of advertisement trash

Machine Learning

Voice recognition and control system

Github Mail Linkedin

©Valerie Grappendorf 2019 Impressum