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
Latest Entries
Processing webcam
My first experiment with Processing, based on a previous experiment with Flash.
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):
- Pick an empty point
- Pick a random neighboring point which is not occupied
- Draw a line between the active point and the picked neighbour
- Set the active point to the neighboring point
- Repeat step 2
- 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.
Perlin noise generative art
Two days ago I continued to play around with perlin noise (see previous experiment). The idea is to let lots of particles crawl over a perlin noise bitmap. Each frame they will leave their trail generating nice patterns like the ones below. I wrote a little tool to influence the curve width, speed of the particles, colors, type etc. Try it out for yourself over here, and show me the result when you’ve created something nice.
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.