Adam Little @ CIID

Francesco setting up table, photo by Yaniv Steiner

Reactable is a “collaborative electronic music instrument” in the form of a multi-touch tabletop interface and was created by a team of Music Technology students in Barcelona. As an exercise in Computer Vision, to expand our toolkit as Interaction Designers and to have a little bit of fun before vacation, Yaniv Steiner helped a group of us set up our first multi-touch surface which we powered with the same software that runs the Reactable. Keep reading for some notes and photos of this process…

The video above shows the Reactable as it was intended to be used — for collaboratively making electronic music. To make this possible, the Reactable runs the open source computer vision software called ReacTIVision which is an excellent tool for prototyping multi-touch surfaces.

Jason tracking fiducials with his webcam

The ReacTIVision software allows you to track barcode-like-symbols called fiducials which can be attached to physical objects and also allows for multi-touch finger tracking. With ReacTIVision up and running and a simple webcam, you can already begin to explore the possibilties.

Working with ReacTIVision and Processing, photo by Yaniv Steiner

To facilitate the development of tangible user interface applications, there are several example programs you can download for various programming languages (Flash, Processing, MAX/MSP, C++, etc..). We began our explorations in Processing and experimented with ways you can use physical objects to make interesting visuals on the screen.

Building the table

While some of us played with the software, others worked on setting up a table with an interactive surface. This was a surprisingly easy process and only required a sheet of glass, mirror, projector and video camera. Since we did not have frosted glass, the table top consisted of a window we removed from the wall and a sheet of semi-transparent baking paper to diffuse the surface.

Positioning things below the table

Below the table is a projector aimed at a mirror which reflects the projection up to the table’s surface. This is the picture coming from the computer that is displayed on the table’s surface. Also below the table is a camera facing directly up (sitting in the bucket in the above photo). This camera is also hooked to the computer which analyzes it’s image and takes care of all the motion-tracking.

An early set up, photo by David Mellis

Needless to say, lots of care must be taken to position everything just right. If the table was too low, the camera would not be able to see the whole projection. If there was too much light below the table, then the image on the surface would appear washed out. But if it was too dark below the table, then camera would not be able to see the fiducials.

The final setup