HD Interaction

30/50

At Random we worked on a game for www.nederlandveilig.nl. The goal was to bring awareness to the 30 km/h and 50 km/h zones. We created a 3D environment with a unique style. By giving the player limited control of the vehicle, we forced the player to concentrate on maintaining the right speed and look out for obstacles on the road. If you want to experience the game for yourself, check it out here. Or watch the video below.

Custom Alternativa3D flat shading

Choosing the right platform, tool or engine is essential for the success of your project. Right now I’m working on a 3D game, so naturally I thought of using Papervision3D because I’m familiar with it. Our game however, relies heavily on collision detection and fast rendering, and both are done better by the Alternativa3D engine. The only thing that is missing is any form of lighting the 3D objects dynamically.

We need to dynamically add shadows on our models because baking textures by using 3D studio max is not an option, but the Alternativa platform does not support it (yet). So I had to add it myself. The only problem is that the engine is not open source. I asked if I could get it, but they didn’t give it to me. So I had to decompile the engine first, which presented problem number two: decompiled source code contains lots of errors.

It took me 1 day to fix the source code, and then another day of optimizing the code for Flash player 10. After that was done, adding the flat shading was done in less then an hour. I added flat shading for TextureMaterial and MovieClipMaterial, which are lighted only the first time their surfaces are created. But the FillMaterial has dynamic lighting (only ambient).

Check out the demo here. Click the color pallet to change the color of the light and see how it affects the color of the surfaces of the spheres.

Best of 2009

An overview of projects from last year which I liked the most:

• Axe instinct
• 180 Amsterdam
• House of orange
• Placebo – interactive video clip
• Alex – Wie volgt
• Philips MSS 2009

Philips MSS 2009

My first month as a partner at Random is over and my first project is finished. We had to make a campaign website for the Philips MSS shaver. The idea was to use your webcam and a face recognition algorithm to “scan” your face so the shaver could attach itself to your face. Shaving your face also triggers panels on the right side to explain the unique features of the shaver. People without a webcam can shave the face of a model instead. Check out the website over here, or watch the video below.

Random path

I had this idea to let the Math.random() function generate paths in flash. What does it look like? Like this. The algorithm is really simple (as usual):

1. Pick an empty point
2. Pick a random neighboring point which is not occupied
3. Draw a line between the active point and the picked neighbour
4. Set the active point to the neighboring point
5. Repeat step 2
6. When no neighbors are found start from step 1

Flash versus HTML 5 canvas

Lately I have been thinking about the latest developments of the web and how that will affect my business. Last couple of years I’ve specialized in Flash development, and it has been awesome. Ever since Adobe bought Macromedia, the development of the Flash platform has skyrocketed to another level. Actionscript became a real programming language and AIR made it possible to easily create desktop programs. Yesterday Adobe made the announcement that Flash CS5 will be able to create iPhone applications. So this makes it very easy to create applications for a wide range of platforms easily, using the same code base.

However, the html5 video and canvas tags are things that will affect Flash, Google Wave will be using html 5 as well. I mean, have a look at this. And looking at some of the comments on the FlashCS5 presentation it is clear that there is a lot of aversion towards Flash. So, does this mean html 5 canvas is taking over? I don’t think anytime soon. And here are the reasons why:

• Html 5 is not yet fully supported in a lot of browsers
• Creating rich internet applications takes a different set of skills, and professionals which are doing so now in html 5 are rare
• The workflow for developing Flash applications has been improved, allowing rapid development of applications.

These are the points I could come up with at the moment, but they all mean that businesses requiring a website with a nice user experience are more likely better of by choosing Flash instead of the html 5 canvas tag. I think the support for the html 5 canvas tag has a long way to go, and in the mean time html 5 will still support Flash.

So, for me this means that I won’t switch any time soon, but I will slowly start digging into html 5 and css3.

Alex – Red 5 live video chat

Last month I’ve been working on a live video chat application for Alex. The goal is to let the current clients of the bank to be ambassadors for potential new clients. The application uses Red 5 to support the live video and chat messages. The whole project consists out of three separate applications:

• The moderator application
• The ambassador application
• The client application

Client application

Ambassador application

Moderator application

The moderator application collects all question asked in the client application, after which they have to be approved before being send to the ambassador application. The ambassador answers the question through the web cam stream. Check the video below for a recorded example of the client application.

Papervision3D and inverse kinematics

Today I had some time to do some experimenting again. In the Placebo project I used 2D inverse kinematics on the octopus tentacles, so when that project was finished I was curious how that would work in 3D. Turns out not much different then the 2D version. Check out the result over here. I also added a drawing function to the experiment, just click the mouse on the canvas to turn drawing on and off and create your own artwork.

House of orange

Yesterday, a new website I’ve been working on with the guys from Random went live. It is the portfolio site for the modeling, photographer and stylist agency House of orange. For this site I created the architecture and data communication, as well as the menu and the collage view (e.g. the landing page). An extensive CMS is backing up the website for easy maintenance. Users can add their favorite images to a lightbox after which the lightbox can be downloaded onto their computer. You can check the website here.

Check out the video below for a recorded example of the website.

Placebo interactive videoclip

About two months ago, Champagne Valentine won a pitch to make the video clip for the song “The Never-Ending why” from Placebo. In addition to that video clip they also wanted to create an interactive video clip. Random teamed up with them and with lots of hard work from lots of talented people the result ended up to be awesome. To check out the original video clip, click here. To check out the interactive video clip, click here.

The cool thing about the project was that lots of Flash animation and scripted animations are use in the normal video clip, for which we had to create tools to record the motion first, and later render it out frame by frame in flash. The animations I worked on (both linear and interactive) are the squid scene and the tunnel scenes.