In the Summer of 2010, everyone Big Spaceship would drop their client work every Friday after lunch to work on internal projects. One of those projects was an interactive installation for the agency’s upcoming 10 year anniversary. It scrolls through 10 illustrated landscapes, each representing one year of Big Spaceship’s history of animation.

Projected on a large screen on top of a stage at the Galapagos Art Space, a camera attached to the ceiling tracked people’s movements below. When motion was detected, it spawned an animation in the landscape. Animations were always contextual and would either be from a project of the currently shown year or represented a part of Big Spaceship culture, like an oversized foosball table.

Responsibilities

  • Tech Lead
  • Motion Detection
  • Planning and Setup

Technologies

  • ActionScript
  • Adobe AIR
  • Flash Animation

Collaboration

With the original concept and lead design coming from Ayaka Ito and Jay Quercia, we eventually got every designer at Big Spaceship to submit their favorite animations or create new ones, resulting in more than 150 unique sequences. To facilitate that, we created a template that got passed around the agency and allowed designers to easily contribute, minimizing the amount of curation and conversion on our end.

Motion Detection

In order to detect motion, I wrote a custom script that would analyze the webcam image regularly. Motion would be triggered if a certain region’s color would be different enough from what it was in the previous frame.

Using red, green and blue as coordinates in 3d space, I simply had to calculate the distance between the current and the previous color. Since the majority of animations back at the time were made in Flash, the installation itself was built on top of Adobe AIR. Below is a reduced version of the tracking code.

// ...

c1 = _videoData.getPixel(x, y);
c2 = _oldVideoData.getPixel(x, y);

r1 = c1 >> 16 & 0xff;
g1 = c1 >> 8 & 0xff;
b1 = c1 & 0xff;

// bb: skip division by 3 for avg; just compare sum
if (r1 + g1 + b1 < brightnessThreshold) {
  continue;
}

r2 = c2 >> 16 & 0xff;
g2 = c2 >> 8 & 0xff;
b2 = c2 & 0xff;

dr = r1 - r2;
dg = g1 - g2;
db = b1 - b2;

// bb: squared distance of c1 and c2 in RGB cube
distanceSq = dr * dr + dg * dg + db * db;
if (distanceSq > motionThreshold) {
  onMotionDetected.dispatch(new Point(x, y));
}

// ...

A debug panel helped monitor webcam motion and performance, allowing me to tweak settings to hardware and physical environment.

Variety

The bulk of animations had an intro and outro sequence with a loop in between. Simply giving each animation the same amount of stage-time and populating a grid made the landscape feel monotone.

To add variety, we allowed for a few animations to be highlighted by scaling them up dramatically; basically taking over the environment. On top of that we added animations that would actually move across the landscape by walking, driving or flying across the screen.

Stability

Ever since after the launch party, the piece has been running 24/7 at the Big Spaceship reception, greeting new visitors with an interactive look into the Big Spaceship archive. Memory management played a large role in that and the core animation engine relied heavily on object pools.

Team

  • Ayaka Ito (Design)
  • Jay Quercia (Design)
  • Daniel Scheibel (Tech)
  • All Big Spaceship Designers