HD Interaction

Heinz First Harvest

Boondoggle Amsterdam asked us (Random Studio) to help think of, and create a website to promote the new Heinz First Harvest product. Heinz First Harvest is a once in a year limited edition of the a tastier Heinz ketchup, for which only the best products are used. Through the website the users can get information about the production process, from the planting of the seed until the botteling. We made a highly interactive plant, which grows over time, unlocking new content. Weather conditions are loaded in dynamically to reflect the current situation of the plants.

The campaign also had two competitions that used Facebook connect. The first was giving away 300 of the Heinz First Harvest bottles. The second competition element used the unique code on each bottle to win a trip to Lisbon in Portugal. The whole campaign is currently running in 6 countries, The Netherlands, Belgium, Germany, France, Sweden and Spain.

Below you can find the promotion video for the campaign, created by Boondoggle Amsterdam:

Fun with circles

It has been a while since I made something fun, but today I had an idea that could be done fairly quick. So after a quick test if it actually looked alright, I started tweaking colors, sizes, angles etc. And before I knew it I had a little tool. Just mess around with the controls, and see what happens. You can see it, and play around with it over here.

Photo reel video

Whenever I go on holiday I tend to shoot lots of photos, but in the end I usually pick the 50 best photos and upload them to my Flickr account. So, a couple of weeks back I made about 1500 photos in Cape Town, and selected only 46 photos to put on my Flickr account, wasting 1400 shots. Then I came across this video , and thought, why not do the same thing with all the photos I took:

OpenFrameworks

Today I had my first encounter with openFrameworks. Feels the same as Processing, except using c++ rather then java. I like it.

Pulsating circles

Today I had to do homework again. Not for myself, but for my girlfriend, Anna Kröger. She came up with the idea of black an white outlines, continuing outwards from a certain shape. In addition to paintings and drawings she thought it would be fun to do an interactive animation. This is where I came in. We came up with the following animation. Hover your mouse over a circle, or click one, and see what happens.

Pixel search algorithm

Continuing to exploit my recently found spare time, I thought it would be fun to see what happens if you scan a bitmap in search for the greatest color pixels. Turned out to be pretty cool! Even though you can probably do this a million times faster in Photoshop, I’m still pretty happy with the result. Check the images below. Check my flickr site for more details.

So, how does it work:

• Sort all the pixels by color. 0xFFFFFF first, 0×000000 last, this means that yellowish pixels will be searched first.
• Remove the first pixel from the sorted pixels, and find the neighboring pixel with the greatest value. Remove this pixel from the list.
• Continue until no neighbors are found.
• Repeat step one until no pixels are left.

It is a very slow algorithm, so I made this video of the process and increased the speed.

UPDATE: made it faster, sorting the pixels had a slow element to it. Now the algorithm is finished within several seconds.

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

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.