Having never been to an FITC event I wasn’t really sure what to expect. Mostly, I was expecting crowds of people and packed presentations. I was very pleased to find that the rooms never quite filled up and every session I went to was very personable.

Some hot topics at the conference were motion detection, voice recognition, processing, programmatic art, 3D, PixelBender, Unity, Cinder, Open Frameworks, multiuser Flash applications and Flash on mobile devices. Needless to say there was an abundance of talent and knowledge under one roof.

There were a couple common themes at this FITC. One of those themes is the acceptance of failure. Failure can lead to some beautiful, unexpected results and at the very least, knowledge. Also: step outside your comfort zone. Don’t spend all your time in one specialty, explore fresh boundaries and learn new things. Lastly, collaborate without an ego, find fun in your work and be passionate about what you do.

Some memorable moments for me were Ralph Hauwert’s in depth, sometimes confusing, interpretations of his work, Robert Hodgin’s mind blowing Processing and Cinder experiments, Shaun Hamontree’s wacky but hilarious and inspirational presentation of MK12’s in-house work, Didier Brun’s in-depth session on voice recognition in flash and of course Yugo Nakamura’s closing presentation. There wasn’t a presentation that I went to that wasn’t inspirational.

I learned more at this conference than I expected. I was also exposed to more expertise than ever. I will absolutely attend FITC again if given the chance. Best of all, I took a bunch of notes(mostly links to great resources).

Recognize This! Seeing with Flash – Eugen Zatepyakin
ASSURF image descriptor
• Uses alchemy
• Based on OpenCV and OpenSurf
• Uses integral imaging

Programming Art – Keith Peters
• Text Expander
• Context Free Art – Programatic image creation
• Structure Synth – Basically context free art in 3D
• Nodebox – Python based processing
• Nodebox2Openframeworks – C++ framework for cool stuff
• Cinder – C++ framework similar to Openframeworks, created by the dudes at Barbarian Group

UnitZeroOne: Skunkworks – Ralph Hauwert
Selected work
• Aviary
• Glitch
• Anne Frank
Let it bloom technique – particle animation (offline)
• Linked list particle reference
• Each particle instance holds a reference to the next particle in the list
• Much faster than looping an array
• Using final keyword for classes increases performance
Milky Ball
• Uses platonic solids, tesselated triangles, vertex normals and look up tables
Notes on Pixel Bender
• Conditionals slow performance
• Some techniques to look at – Ray tracing and Adaptive Subsampling

Multiuser Application Development with Union – Colin Mook
Union
• Platform for multiuser applications
• Uses Union Server
• Also uses reactor – AS3 framework for client applications
Megaphone
• Multiplayer mobile gaming
• Phone is controller
• Game is displayed on a shared screen
• Can us SMS/MMS to send digital content to players

Boolean Logic and Ways To Beautifully Confuse Yourself – Shaun Hamontree – MK12
• http://vimeo.com/emkaytwelveTelephoneme – latest in-house project
• Hates the term “Motion Graphics” prefers “Neat Shit”
• Keys to success – Egoless collaboration and having a successful balance of business and in-house projects

Pulsatile Crackle – Andre Michelle
• http://www.audiotool.com
• http://lab.andre-michelle.com/
• http://blog.andre-michelle.com/
• Creating audio with flash – http://files.andre-michelle.com/AudioSandbox.zip

Flashing in Public – Jon Fox – Helios
Interactive Touch Solutions
• Touch Foil – Single and Double touch, but not multi-touch, has its own driver and API
• Gesture detection
• Multitouch – infrared, capacitive, laser and camera based systems
Projection Screen Options
• Sunscreen – Sun viewable rear projection film
• Pro Diffusion – High contrast rear projection film
• High Gain – High brightness rear projection film
• Clearview – Transparent holographic style rear projection film

ADHD FTW, LOL! – Grant Skinner
• RegExr – Regular expression helper app
• Perfectr – Development tool that highlights discrepancies between design and application (currently in development)
• Kaleidoscope Class
• Wander Class
• Circle collision detection
• http://www.gskinner.com/blog/assets/circles/CircleTest.html
• http://www.gskinner.com/blog/assets/circles/CircleTest2.html
• http://www.gskinner.com/blog/assets/circles/CircleTest10.html

What Can You Do With Unity3D – Bartek Drozdz
• Skive – London based agency doing great work with unity
• Aquiris – Brasil based agency
• http://www.everyday3d.com/blog/index.php/fitc-links/

You Talkin’ To Me? – Didier Brun
• http://www.bytearray.org/
Voice Recogntion in flash
• Voice Gesture
• http://www.bytearray.org/?p=115
• Involves analyzing bitmaps
• Convert waveforms to bitmaps
• Fréchet Distance Formula – measures similarity between curves

Long Time No See – Yugo Nakamura
• SCR
• Frame – to be released

I won’t spoil the details (mainly because you need to experience it for yourself), but you can read more about how director Chris Milk pulled it off at the Google Chrome Experiment page. Yeah… the whole thing was built in HTML5. Notice. Served.

Our good friend Jeremy Dimmock (of Polyester in Toronto) joined us for the project and, well, that’s when things got interesting. Two photo shoots, a little animal taxidermy, a frozen octopus, and a whole lotta Photoshop yielded the final pieces and we even got to hang out on the set the day that Kieran’s gallery show was shot for the film.

With that problem solved, we got to work on the animated title sequence for the opening of the film. The task was both strange and challenging: Complement (but not compete with) a massive dead-mouse diorama that plays a prominent role in the film. Somehow, we pulled it off. To say that it was amusing and unusual just doesn’t quite do the project justice. Then again, aren’t those the very best kind?

Want more? “Dinner for Schmucks” opens today and you can catch the complete title sequence, Kieran’s artwork and lots of other really funny stuff at a megaplex near you. For now… check out Jemaine’s righteous/riotous interview (including artwork!) with Jimmy Fallon:

While several unique design directions were created, each expressed a few givens: the new brand should be friendly, suggest health, and remain simple while incorporating a memorable twist.

A winner quickly emerged. The proprietary typography is simple and approachable, while the cup shape within the “Y” provides the hook. Indeed, the empty cup reflects the self-serve concept perfectly, encouraging customers to fill the cup with their own masterpiece creations using the country’s best yogurt.

Before & After:

Aesthetic & Packaging:

Possible apparel options:

What’s the easiest way to get a band label? Hard work? Kissing up? Paying people off? False.

The easiest way is to film your band and throw it up on YouTube and let the free world vote on how good or “ungood” you are. That was the idea behind freecreditscoreband.com. Virginia-based Martin Agency came to us to help bring the idea to life, so that bands across the nation could subject themselves to the scrutiny of each other, and have their family vote for them as much as they could.

A few samples:

Turns out Darth Vader used to be really into GWAR, and also good financial knowledge, allowing him to high-kick his way into fame:

To see all the entries, vote and even enter, get on over to freecreditscoreband.com

When our friends at PepsiCo (in connection with our other friends at Undercurrent) contacted us about an interactive installation piece for their Senior Management Meeting, we knew two things: 1) We didn’t have much time; and 2) We wanted to build something beautiful and intuitive. I suppose we also knew something else: We could do it.

In just a few short weeks, PepsiCo asked us to help them visualize some of the social conversations happening around the PepsiCo brand. What we delivered was a simple, elegant multi-touch installation—packed with information. During the multi-day conference, PepsiCo executives could walk up to the 60-inch screen and use their hands to navigate the virtual space. In addition to the conversational excerpts, execs could also dive into a single conversation to read the full text. A Twitter panel also illustrated the real-time conversation.

We’re not too humble to say that our installation was among the most popular in the venue. With a business-minded focus on online conversations about nutrition and the environment and a fun factor that bordered on futuristic awesomeness (A 60-inch touchscreen! Grab the jetpacks!), this installation is set to evolve. Stay tuned!

You see, the hired talent just wasn’t up to our rigorous standards. We needed someone who could look at records and swig beer like a champion… and, well, Patrick rose to the occasion. Check out the entire Newcastle experience HERE. And check out the entire Patrick Marzullo experience HERE.

Today’s Site of the Day on FWA is none other than the recently unleashed LEGOCLICK.com, designed and developed by the dudes and lady-dudes of Struck/Axiom in association with Pereira & O’Dell. (If you haven’t seen it yet, you should check it out.) To mark the occasion, we’d like to share a technical peak behind the curtain of one of the more popular features of the site – removing a block of content.

A word about perspective:

Early on, we considered different possibilities for how the LEGO bricks and the environment could be achieved technically. We thought about using one of the Flash 3D engines, and discussed solutions as exotic as using a server-side AIR app to render our objects as FLVs, but ultimately decided that we wouldn’t be able to achieve the performance or the visual polish that we demand of ourselves.

So, in a move that would send my college drawing professor into hysterics, we decided that visual polish and a stylized sense of depth were more important than “correct perspective.” That’s why everything has a bit of perspective to suggest depth, but the visuals don’t have consistent vanishing points, nor do they shift in perspective as they move relative to the viewer.

A word about the feature:

Removing a block of content is hardly an integral part of the site. However, it represented something very vital to both the LEGO brand and the site – fun. After all, who among us never built something only to smash it apart? (Or at very least, had a beloved creation subjected to the wrath of a brother or sister?)

Phase 1: The bricks

Creation and layout

When a block wall is broken apart, we’re switching from one large graphic of the block wall to many individual images, which each represent a brick. The correct number of bricks is created and positioned to fill in the block wall. (We decided to leave out the 1×2s that fill the edges on alternating rows – in the end, they won’t be missed in the flurry of movement.) In keeping with our intentional disregard for correct perspective, each brick has the same beginning perspective.

Movin’ them bricks

To make the bricks move, we need to give them some velocity. We start with a startingVelocity, which is random (within a range), and split it between x, y, and z – the amount of the total velocity that z gets is determined by its distance from the center of the block wall, and the remainder is split between x and y, according to the angle the block is from the center. While _xVel and _yVel will move the block in x and y, _zVel will affect the block’s pseudoZ property, which will affect its scale, making it appear to move outwards.

Each block is listening for ENTER_FRAME events. Every frame, each block calls the update() function, which moves the block according to its velocities, and then adds a gravity constant onto the y velocity. The update() function is separated from the event handler so that it can be called independently – when the explosion is started, the blocks nearest the center call update() twice automatically, and the blocks slightly further out call it once, to give the illusion of being blown apart from the center. When the block is sufficiently offstage, the event listener is removed and an event is dispatched to have the block’s parent remove it.

Give it a spin

Now that the pieces are moving correctly, it’s time to make them appear to spin. To achieve this effect, we went back into Cinema4D and created 5 different sequences of our 3d block spinning in various directions. Each block is randomly assigned one of these sequences to play through as it falls.

We noticed that in all of the chaos of the initial explosion, the eye missed most of the spinning. In order to save on file size / load time (since every additional frame is an additional png, meaning X kilobytes and Z load time), we changed the timeline of our spin sequences so that the sequence waited for the initial flurry of motion to complete before resuming its spin.

Phase 2: Putting content on the bricks

Capturing and chopping content

Using AS3’s BitmapData functionality, we’re able to take the state of objects and draw them into a bitmap. To get the content we want, we’re turning off the block background (switching visibility to false), capturing the bitmap data (BitmapData.draw()), and then turning the block background back on (until the wall is ready to explode of course – see Phase 1: Creation and Layout). Actually, we’re capturing a bunch of small bitmap datas – one for each block that we’re creating, capturing only the content that should go on that block. Then we send it on to the block that we’re creating for the beginning of the explosion.

Distorting the content to fit the face

As the blocks spin and tumble out of frame, we want the content on the face of them to move with the block. Since we’ve captured that bitmap data, we can actually use the DistortImage class, developed by the evil geniuses at Sandy3D.

DistortImage takes bitmapData and distorts it using corner pinning – you tell each corner where it should be positioned, and the image is stretched, squashed and distorted to fit those corners.

So how do we know where the corners are? Some good old-fashioned Flash production work. In our Flash MovieClip, we have four movie clips, one for each corner, that are invisible (they are semi-transparent here, for demonstration purposes). On every frame, we position them on each appropriate corner of the graphic.

So, when we explode the wall into blocks, on every frame we are distorting the image to fit the corners, as they’re positioned on that frame.

Which brings us to a special consideration – some of the spin sequences result in the front face rotating away so that it’s unseen – what do we do in those cases? We simply place all for corners in the exact same location – like 0,0 – and check for it in our code. If the corners are positioned identically, we just had the graphics that we’re mapping to the face.

Processing the distortion

This was all well and good, except for one small thing – it was totally overtaxing the processor, chugging like mad. It quickly became clear that it wouldn’t look smooth on even the best of computers. We did not give up hope, however – we figured that we could find a point to pause for a moment, run each frame of distortion that we would need, and save each as a bitmap. That way, instead of manipulating a bitmap every frame, with all of the smushing and interpolating of pixels that required, we could just swap a bitmap in and out.

To do this, we needed to capture those corner positions from the MovieClip. As soon as the movie clip assets are loaded in – we’re loading those separately, by the way, so that the site can get up and running without all those extra images to load – we run a timer, on each timer event advancing the MovieClip a frame and recording corner positions for each sequence into static arrays.

Now that we have all that information stored, we can go through the whole process again – splitting the wall into blocks, sending it a chunk of BitmapData, and assigning it a sequence. We use a timer to progress through all the different frames, using the corner information stored in the static arrays to distort the BitmapData and then save it as a new bitmap into an array.

Once every block is done distorting and storing its sequence of bitmaps, the explosion occurs – the blocks move outward and begin to spin, and the bitmaps are swapped out to show the correct distortion for each frame.

Phase 3: The minifigure

A word about the minifig

The minifig is an instantly recognizable part of the LEGO brand, so what better way to inject some more fun into the site than having a minifig with a jetpack flying around? Better yet, why not have the minifig be the impetus behind breaking the wall apart? The programming isn’t super complex, but we’ll cover it quickly here.

Jetting around

When a block is selected, the minifig is positioned offstage – using a bit of random logic (if (Math.random() > .5)) to determine which side of the screen to place him on. Another bit of random logic determines whether the minifig will fly directly behind the block, or whether it will fly around the front of the blocks first. The motion is handled by Tweener, using bezier points to create smooth curves. If the minifig is flying directly, he is immediately swapped from a container sprite that sits above the block walls to one that sits below them – if flying around, he gets swapped at the midpoint of his flight.

Do the twist

The minifig wouldn’t look that great if he was just facing straight ahead all the time, so the team created a sequence of renders of him rotating side-to-side. Armed with these frames, we built an enterframe handler into the minifigure class. Every frame, we compared the current x position to the x position in the previous frame. Based on that difference, the minifig is rotated, and the image sequence goes to the appropriate position.

Break on through

Once the minifig is behind the block wall, we run the pre-processing for the explosion, rendering out all of the distorted bitmaps for the explosion. As soon as all the pieces are ready, the minifig plays through one of three “break through” sequences – randomly chosen – and the block explosion goes off. Once all the blocks are offscreen, the minifig gets sent back offscreen using Tweener.

And that’s it!

In a nutshell, that’s how our team pulled off the explosion effect – fully realized through a combination of 3d work, Flash production, and AS3. Hope it was educational – now go play with the site some more!