gesturecontrolled

A surface that DOESN'T belong to Microsoft?

The four designers on the team spent a lot of time working on the aesthetic of the table, and this is the final design we came up with. We wanted to create something that was not only visually appealing, to draw in more patrons, but also made sense for the context in which the table would be used. Before coming to this point though, we went through a lot of different ideas and iterations, to push the design to where it is now.

(From left to right: Luke Alessi, Ayaka Ito, Sam Sawzin, Alexandra Zack)

To begin this process we started with all creating our own moodboards, to illustrate the look and feel we thought the table should reflect. As seen in the moodboards, we all had similar thoughts on the feel and color scheme to be used in the interface. We all felt dark colors, contrasting with vibrant neon colors, was the direction we wanted to go in. These reflect a more club like scene, and the bright contrasts might draw more people to the table. We also all had very fluid imagery in our moodboards, giving a feeling of motion across the table.

(Top from left to right: Luke Alessi, Ayaka Ito; Bottom: Alexandra Zack, two different versions)

For iteration one, we all took very different directions, with the only common factor being the feel of the design we decided upon from our moodboards. We all explored different ideas for backgrounds of the table, whether they would be simple colors, something realistic, or something abstract. One thing all of our first iterations had in common though was our desire to have some sort of ambience around the cups in addition to the menu interfaces around them.

(From left to right: Alexandra Zack, Ayaka Ito)

For iteration two there was more focus on the ambience and incorporating the menu system with the glasses. We decided to have the menu come out of the cup edge, so we started exploring different ways to show that. Also for the ambience we started thinking about animating it, to add another visually appealing element to the table.

(Top from left to right: Ayaka Ito, Luke Alessi; Bottom: Sam Sawzin, Alexandra Zack)

Iteration three shows further exploration into the menu system around the cups and different creative ways to interact with it. Also we now added a background to the table that would be visually interesting, and not too distracting from the other interfaces on the table. We also put a lot of thought into creating avatars and what they would look like. Although in the end we chose to not include avatars in the project, there was a lot of consideration into how they would look and interact with one another.

(Top from left to right: Luke Alessi, Alexandra Zack; Bottom: Alexandra Zack, Ayaka Ito)

For this round of comps, a lot of our ideas really started meshing together. We now decided on a structure of how the game roulette would look. We also decided on the look of the doodles on the table, having them wispy, and flowing. Lastly, we chose the look of the background. Although we did not end up implementing the background in the final design on the table, because of development issues, the background would have subtly animated, with different squares glowing in and out.

These are the final cup interfaces we came up with. Different cups have different colors assigned to them, so when you place your cup down, your menu will reflect that. The menu will be a little tab, that expands when you touch it, to allow you to check out or send a message. When you receive an alert, a little speech bubble will pop up, that will expand to show the message. If there is a time limit for the message, such as when you are playing a game, the countdown will show in the speech bubble.

The ambience we decided was going to be a flowing animation of colors that corresponded with the menu. They would swirl around the cup, making it aesthetically pleasing, without being overly distracting.

The final game roulette reflects the cup interfaces with a very organic circular look, and flowing ambiences around it. When there are countdowns for games, it will not only display in your cup menu but also in the center of the roulette. When your cup is in the center, you can twist it to choose different games to play.

BUT THE MOST INTERESTING PART IS ALWAYS THE DEV!

To create this project we had to start by building a physical table-top surface that would house both the tracking equipment and computing components in a cabinet-style container. We were fortunate enough to have the help of a renowned industrial designer, Jason Sauers, who assisted us in conceptualizing and building our final iteration of the Sociable Table. With the tables constraints in mind, our four developers then went to work on programming the tracking and interaction software, eventually creating an accurate and fun way for patrons to socialize amongst each other.

When making the physical structure, there was a lot of different technology we used to make our program run on the table. The technology and build consisted of:

2 Sony Playstation 3 Eye cameras (with UV filters removed)

Adjustable infrared LED rear illumination system

Front Surface Mirror

Series of high flow computer fans, exhaust

Short-throw DLP projector

High performance server (Flash and reacTIVision)

3/4" Plexiglas surface w/ Kodak print film overlay

Before the surface-top structure was built, we had already decided on our tracking technology, reacTIVision. Once that was settled, there existed much debate as to whether Flash or Processing should be used for the visualzation and UI rendering. Our primary and secondary attempts at Processing made our developers realize the stability of the programming language. However, Processing wasn't flexible enough for the interaction we wanted to achieve. In the end we decided to go with Flash for our rendering and interaction needs.

Simply put, every cup has a unique fiducial (barcode) on the bottom, facing down. When a patron places the cup down, the camera picks up the image and translates that data to UDP network packet information. Our Flash client on the other side of the application outputs the information assigned to that fiducial as a visual representation. The information Flash recieves from the server is then translated into real-time XML data, which in turn is also consumed by Flash. The application is capable of tracking two forms of input because of our implementation of custom Java libraries which support finger interactions on the table.