Tuesday, July 24, 2007

Digital portfolio library for London College of Fashion

Rather late than never, here's finally some brief documentation of Moving Brands' latest interactive installation, after Muon our second one this year...

The brief and objectives set by the London College of Fashion were similar to last year's, only with the added challenge of having to show work of twice as many students (18 courses), almost 500 in total with 10+ images each. Our solution to that was a digital approach, housed within a 'library' setting where visitors could browse students work in two stages: First, scanning and selecting students of interest, followed by detailed browsing of their work. To reflect this, the library also consisted of two complementary parts, one "analog" and one "digital". Each student is represented by a post-card sized tag which is located on the installation walls. On the back of each card is a unique pair of identifier tags, so when the card is placed on one of the four interactive tables the student's work is revealed. The cards also acted as student "business cards" (with their contact details) and could be taken away by visitors, which often were recruiters.

After lots of deliberation the software side of the installation was developed using the fabulous reacTIVision & Processing. The former is used to analyse and identify the printed markers, however the major problem we had to overcome was that the tool only comes with a set of 90 markers, whereas we needed close to 500. After initially considering the definition of custom markers, I then opted for combining 2 markers into pairs (hierarchical index) and so end up with a maximum of 45*45 = 2025 possible identities (due to the special cases caused by the fixed usage scenario of the tables we could theoretically reach a higher number). The next challenge then was to identify pairs from a given set of visible markers (easy) and robustly track these as single entity over time (not as easy), especially since the software was built to support a multi-user scenario. Delaying and aggregating events broadcast by reacTIVision to Processing made all the difference and helped tackling the temporary breaking up of groups do to sub-optimal light conditions and/or user actions.

So as soon as a group of markers is identified, a background thread is started to load in the various portfolio images of the related student. This multi-threaded approach is important so that any ongoing animation isn't suddenly interrupted. However since the images loaded are quite large the loading process can sometimes take several seconds and the preloader becomes quite obvious when browsing several students in a row. Caching to the rescue! After some googling I found Whirlycache, a very easy to use Java object cache with multiple purging policies. It only took me 3 lines to integrate into my application and since the installation machines had 2GB of RAM, many images could be kept in memory and the preloader disappeared for most users. Yeah!

Finally, as with last year's table we tried to increase the tactile feeling of the interaction and where we've used a visual response (soft surface simulation) in the past, this year we've opted for sound to make the experience seem more physical. We developed a sound palette for moments when cards are placed on the table, cards are rotated and removed - all with a noticeable positive difference.

Some more images of the installation are on F l i c k r...