Physical interface principles

Lucy's Diamond

Lucy's Diamond was created as a result of the project "Mirror, mirror on the wall". In a period of two and a half weeks it was our task to represent reality virtually. A mirror was to be used for this purpose. The task was to use a camera to film the person in front of the screen and present the live video in an exciting way. The person in front of the mirror should play and experiment with it.

Concept

We wanted to stay close to the basic concept of the mirror and therefore create effects by different arrangements of image sections and rotations. Our concept should be something that you could construct with a conventional mirror up to a certain point. In general, our goal was to keep the user engaged for a long time and let them discover the interactions through intuitive movements. For this objective we found a kind of kaleidoscope to be the optimal solution.

Basic framework

A kaleidoscope is made up of an even number of triangles arranged together in a circle. Two triangles next to each other form a pair that is mirrored. Each of these triangles shows a section of the video so that the person sees himself several times in front of the mirror.

Interaction

In order for the user to interact with the kaleidoscope in front of the mirror, it must be recognized. For this purpose we used glasses with a coloured element. This yellow colour is tracked to determine where the person is and what movements they are making. The camera tracks the user's horizontal/vertical position and distance. Through the glasses, the user also has the feeling that the effects are only visible through the glasses, as they only start when the glasses are put on.

Programming

A JavaScript library was used for the implementation, which allows the video to be displayed in individual particles. The basic shape of the particles is a triangle, which can change to a 6-sided polygon. In addition to the shape, the color and size of the particles can also change. We have realized our interactions by color tracking and the library of Tracking.js.

Color

By moving the head in a horizontal direction, the color of the kaleidoscope changes in order of the color spectrum.

Brightness

If you move your head vertically, the brightness of the color changes.

Detachment

The closer you get to the camera with your head, the bigger the particles become. Polygons are formed at long distances and triangles at short distances.

Tilt

By tilting your head you can also determine the direction of rotation of the kaleidoscope.

Due to the complex structure of the kaleidoscope and the changing of its parameters, we created a very exciting interaction, which invites the person in front of the mirror to try out many variants.


Info

The project was a two-week workshop supervised by Prof. Dr. Franklin Hernández-Castro from Costa Rica.

Team

Projekt