Behance Kinect Installation

The new way to vote for the sowcases.

[unex_ce_button id="column_content_42fttsf31" button_text_color="#ffffff" button_font="light_italic" button_font_size="18px" button_width="auto" button_alignment="left" button_text_spacing="4px" button_bg_color="#0060ff" button_padding="10px 24px 10px 28px" button_border_width="2px" button_border_color="#0060ff" button_border_radius="0px" button_text_hover_color="#0060ff" button_text_spacing_hover="4px" button_bg_hover_color="transparent" button_border_hover_color="#0060ff" button_link="https://github.com/eleks/rnd-kinect-behance" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VIEW_CODE_ON_GITHUB[/ce_button]

Behance Portfolio Review is a significant event and a wonderful opportunity for designers of all shapes and sizes to interact and share experience locally. With our strong User Experience Design team, Eleks Digital has already hosted Behance Portfolio Review last year, and this year we wanted to make it really memorable.

But here’s the problem: hundreds of Behance Portfolio Reviews are hosted around the world all the time. How can we make ours special? Two words: Microsoft Kinect.

It was fun to work on, but it was even more fun to watch people playing with the thing. Everyone became a three-year-old kid for a moment.

We used Microsoft Kinect to capture skeleton data in real time and to detect simple and intuitive gestures. In such a way the audience gave tangible thumbs-up. Tangible more than ever! Besides, no one skimped on Likes in the face of Kinect.

 

photo2photo2
behance1behance1

We created a 3D environment with the most appreciated showcases shown in the first place to give our audience an opportunity to vote for the best of the best.

The 3D environment expanded the physical space with the projection shown on a dark background, which visually deepened the wall.

behance2behance2

It was enouth just to came up to the installation to start interaction.

behance3behance3

People used simple drag gestures to navigate through the works and vote for the favorite ones.

photo1photo1

Technology
Used

[unex_ce_button id="column_content_7i8uzju6n" button_text_color="#ffffff" button_font="light_italic" button_font_size="18px" button_width="auto" button_alignment="left" button_text_spacing="4px" button_bg_color="#0060ff" button_padding="10px 24px 10px 28px" button_border_width="2px" button_border_color="#0060ff" button_border_radius="0px" button_text_hover_color="#0060ff" button_text_spacing_hover="4px" button_bg_hover_color="transparent" button_border_hover_color="#0060ff" button_link="http://elekslabs.com/2015/03/how-we-made-a-killer-behance-portfolio-review-with-microsoft-kinect.html" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]MORE_ON_PROCESS[/ce_button]

#Kinect
 Kinect gave us the perfect opportunity to use a body as a controller, so our guests wouldn’t have to connect to use the installation in any way; all they had to do was approach it and the interaction began.  

#Web_Sockets
We decided to take the best of HTML5 Web Sockets. It was fast enough to send video source as a raw binary image for each frame. And yes, without any noticeable lag. Even more, it works on any modern browser.

#HTML5
The most common way to develop applications with rich UI that can interact with Kinect is to use WPF.But if you’re just about to add parallax effect for a certain background, it leaves you virtually no options. And it’s not like the case with HTML, when you can find dozens of well-designed and well-maintained libraries. All these restrictions were among the reasons that pushed us to change our minds and take a different approach - HTML5.

Services:
#User_Experience_Design #Creative
#Web_Development #Phygital

[unex_ce_button id="content_rp7uhfloa" button_text_color="#ffffff" button_font="light_italic" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="4px" button_bg_color="#0060ff" button_padding="10px 24px 10px 28px" button_border_width="2px" button_border_color="#0060ff" button_border_radius="0px" button_text_hover_color="#0060ff" button_text_spacing_hover="4px" button_bg_hover_color="transparent" button_border_hover_color="#0060ff" button_link="https://github.com/eleks/rnd-kinect-behance" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]VIEW_CODE_ON_GITHUB[/ce_button]

© 2015 eleks_digital. All Rights Reserved.