(Under) Influence : my first interactive installation đź“˝

Image for post
Image for post

Within 2 weeks, we had to set up an interactive installation from A to Z with 3 others designers : Maxence Henric, Erwan Le Roch & Clarisse Canu.

(Under) Influence invites us to manipulate the rules of an unknown environment and to impact the laws of life that it undergoes. With a gesture, a sensation, looking at it can rewrite the very concept of free will and reveal the gift of empathy of the entities facing it.

A tacit and implicit agreement, inciting us to question the notion of impact, and the sense of responsibility that results from it.

During these 2 weeks, we had to create an interactive experience at school. So we divided the roles in order to be as efficient as possible and manage to make something cool.

For the most part, we set about making this “totem pole”, which had to reflect the meaning of the exhibition and be able to display what we were going to project.

Image for post
Image for post

In parallel to the start, we thought about a moodboard on Figma to imagine the creative idea and what will be done technically.

Image for post
Image for post

So we started with an abstract idea but one that had to be connected and have a link with the person when he or she interacts with the totem pole.

That’s why we imagined a “controller” that would control what is displayed. This one is composed of 4 states from the softest to the roughest. When the person arrives in front of the installation, he has to put his hand in a box without knowing what he is going to fall on. It is there that according to where he puts his hand, what will be projected (the decor + the blob) will change state and be accompanied with the emotion of the person.

Image for post
Image for post

Technically, you’ll have to be clever considering the budget and the time. So what we have imagined, for the controller is to hide a webcam connected to a PC to allow us to detect the hand of the person. So we used TensorFlow which is an object detection api and we “trained” it to detect hands by putting hundreds of hand pictures. This allowed us to locate the hand and retrieve its position in Javascript. It was then enough to play events according to the position of this one.

Image for post
Image for post
Example of the ouput of the webcam that draws the area where the hand is.

The state-changing blob was made in WebGL with Three.js in GLSL with a simplex 4D noise.

Image for post
Image for post
Image for post
Image for post

Once the blob and the totem pole were created, we went into a phase where we had to do the mapping on the totem pole, as well as create motion design and sound effects to complete the experience.

We also had to set up the controller that directed the experiment. Once again we improvised with the budget. So we bought a box that we repainted in black and made a hole to hide the webcam inside and put LEDs so that the hand could be captured by the webcam.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Once all this is in place, we’re going to have to put it all together in one piece. That’s why we had to do some mapping on the totem pole we created so that the experience would be as realistic as possible mixing the web page where the blob was displayed but also the different graphic universes created.

After long days of work, we are proud of what we have done and achieved our goal with the people who used it: to arouse emotions.

Image for post
Image for post
Image for post
Image for post

Thanks to Fabrice Starzinskas — media artist, producer, teacher who helped us during the realization of this installation.

Written by

Creative Developer with a strong interest in motion and design — Part of young jury @AWWWARDS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store