The Art of Rawr

While I was working on the "National Grid Floe" project (yes, that was last year! come on I'm slowly catching up with my posts.) I was facing the problem, that I had to place a massive amount of differently sized elements in a certain area on the site, with the problem being that the elements were not supposed to overlap with each other. A very basic approach - that's actually used more often than you would think - is to just place an object at a random place and test if it overlaps with any other object. If it does, place it somewhere else and test again, if it does not overlap with anything move on to placing the next object. As you can see this procedure is highly inefficient. Since you're working with randomly generated positions, it could easily happen that you place the object at the same position over and over again, wasting a lot of performance on something completely useless. The more objects you are placing, the more likely it is that this method makes your computer freeze and the browser crash. Since "National Grid Floe"'s community works with a ton of "user bubbles" that are not supposed to overlap each other I had to find a way to get an available spot on the first placement, otherwise the site would run into massive performance problems...

My solution works with a simple two-dimensional array. I create a grid of many rectangles and store in the array which of the rectangles are still available. Whenever I am about to place an object I look at the object's size and figure out how many rectangles next to each other in the grid I will need for this object and search for the nearest empty blob of free rectangles, big enough for the object. Since I keep checking each cell until I found a place for the object, the worst case scenario for repeated calculations with my system would be the amount of cells in the grid. That is still quite a few recursions but definitely beats the possibility of infinity with the common basic method. I created this solution in around a day or two, because I was under a really tight deadline back then and couldn't afford to research if there are even more efficient methods, but my class proved to be more than fast enough for what I needed it for.

I was invited to speak for firstborn at the FITC conference that took place from April 25th - 28th at the Hilton Hotel in Toronto, Canada. Not only has it been my first time in Canada, it was also my first time as a speaker at a conference. Damn. It's been quite a while since I've been as nervous. Together with Eric I ended up sitting in front of around 300 people, giving a presentation at a conference that had some of the biggest names in the industry in the lineup (Joshua Davis - who also designed the header image you see above, Mario Klingemann, Alec Cove, Lee Brimelow, etc.) ...

The overall theme of our presentation was "Dimension Wars - Bridging the Gap between 2D and 3D in Flash". We structured our presentation from simple to complicated, so we started with fairly easy ways to fake 3D in Flash and throughout the presentation the techniques became more complex. Each chapter featured a different demo, showcasing some of firstborn's recent work.

http://www.jensfischer.us/demos/throwFish/
The first demo was from the National Grid Floe project. We showed how to use interactive video- and image-layers together with tweening and scaling, to achieve the perception of interaction in 3D space even tho it's technically a 2D environment.

http://www.firstbornmultimedia.com/websites/casestudy/Puma%20Lift/
Our next example was taken from the PUMA L.i.f.t. case study. For this project the teaser site made use of Bitmap Distortion and After Effects Motion Tracking to distort the content according to the background video, so that the content looks like it's on the cardboard that the girl in the video is holding.

http://www.wildridexm.com/
The third example was the XM Wild Ride website. We used this website to explain the basic functionality of a simple 3D engine.

http://www.firstbornmultimedia.com/#/our-portfolio/1047/case-study/
There's no presentation about Flash and 3D without at least a honorary mention of Papervision. This chapter of our presentation covered that, but the main focus instead of explaining what Papervision is and how it works was the problem solving needed when working in a 3D engine like Papervision. We showed some nice little tricks to achieve the effects and visuals you have in mind, despite all the technological restrictions (i.e. fighting performance issues due to polygon amount).

http://www.firstbornmultimedia.com/websites/casestudy/M%26M/
After having shown "fake" and "real" 3D, it was time to show a combination of both. The M&M's website used the FIVe3D engine for many things, in combination with scaling and moving simple video clips to create the feeling of a 3D environment.

http://www.jensfischer.us/demos/five3DRibbon/
Our last chapter "Don't forget about your vectors" summed up many of the points we had made before. There's not the one, perfect solution that works for each project, it's always best to look at the problem first and then find a specific solution for that. If the task at hand can be solved with vector graphics, FIVe3D is an extremely powerful tool, outperforming Papervision and the new native 3D features that come with Flash 10.

We don't have any slides for this presentation since it was mainly about showing demos - some are even missing in this list since they're not online yet or simply too small to be mentioned. If you want to know more details or have questions you can comment here, but I definitely would recommend to simply come to one of our next presentations. It was the first one both for Eric and me and there are tons of things I would do different/better now and that's exactly why I definitely want to do it again. The audience gave us a solid 8.92 out of 10, which is not bad for a first presentation in my opinion. In order for you to make your own opinion, I'll update this post as soon as the FITC team has the video online.

Related Links:
http://www.fitc.ca
http://www.bigspaceship.com/blog/labs/fitc-toronto-2009-linkdump/

Quite some time ago I wrote an article for the FWA about internship programs... If you haven't read it yet, go check it out...

Related Link:
http://www.thefwa.com/?app=articles&id=123

As usual, I'm running a little behind with the blog entries. I've been busy in the past month(s), but it was well worth it; on April 21st the site I've been working on for Puma has won the FWA SOTD award. For this project firstborn teamed up with droga5 and created an interactive video experience in which the user can weigh the new Puma shoe against everyday objects. Our goal was simply to show (not tell) in a funny and interesting way how light the shoe is. I was the Lead Developer for this project, but was also involved in the video shoot (for example experimenting with different shooting and "stitching" styles in the very beginning of the project). Next to the main site I also developed the teaser site and the "Pullback" banner execution - you can see both in the case study in firstborn's portfolio.

Related Links:
http://lift.puma.com
http://www.firstbornmultimedia.com/#/our-portfolio/1056/case-study/