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...
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...
Tags: lcf, interaction, design, installation, fashion, portfolio, library, movingbrands, toxi, processing.org, reactivision
5 Comments:
rock on!
very good!!
did you make the tables? or somebody else did?
Man! it must be fun to work at Moving Brands
keep up the great work
The tables were build by a friend-contractor of ours to our designs and with absolute top quality finish! I "only" worked on the software side and the whole massive image conversion workflow converting 100GB+ of images (which I didn't even mention above)... at least I've learned a bit of AppleScript on the way ;)
great work toxi. i was blown away by the video. my girlfriend studies fashion design in basel/switzerland. they plan a big exhibition this year.
i've been playing around with the qr-code library from daniel shiffman, and so i had exactly the same idea.
really, exactly the same idea, like with all the detail, businesscards, the table, the images....incredible. you were faster, congrats. :)
Danke lenny :) I also did consider QR codes, but they would only have acted like a on/off switch. reacTIVision markers also provide you with rotation information and so have enabled the interface dial, where you can just rotate the card to scroll/skip through each portfolio. Though am sure given more time to develop it you could pick up the rotation from hardcoded squares in 3 of the corners... maybe give it a go?
Also sorry we've beat you to it... :)
Post a Comment
Links to this post:
Create a Link
<< Home