Click Suite, Auckland Museum + the ‘Hybridiser’


Click Suite has a long history of awesome interactive new media projects. Their front end weapon of choice has almost exclusively been Flash.

Zef Fugaz has always been one for pushing the user experience to the edge and delivered a great session at the Microsoft Expression for Art’s Sake event on User Centred Design with Microsoft Expression.

As it turns out this event was a bit of a turning point for Click Suite and their adoption of the Microsoft Expression Studio for front end design.

Since the workshop, Click Suite have built and installed at the Auckland Museum the ‘Hybridiser’. An interactive, multi-touch 3D application that allows visitors at the museum to create an orchid hybrid flower by selecting 2 parent orchids and tweaking its different parts in terms of pattern/texture, shape & colour.

The ‘Hybridiser’ is built using WPF (.NET 3.5), Visual Studio 2008 & Expression Blend 2. The application runs on the Windows 7 release candidate & takes advantage of the Windows 7 gesture APIs.

If you are in Auckland I recommend that you visit Wonderland: The Mystery of the Orchid and try it out for yourself. My creation is  below.


Aren’t incrementing ID’s a beautiful thing!? I can browse through others peoples creations (currently at 565 at time of writing)… I was just thinking it would be cool to make a dynamic interactive deep zoom (possibly using eventr) of peoples creations on the Auckland Museum’s website but I digress.

For everyone else not able to make it to Auckland to check out the exhibition in person I have made a little video of my interactions with the ‘Hybridiser’ below.

Incidentally this is the first time I have used the new Encoder 3/ Silverlight 3 player. Tip try clicking the cog in the top right to check out the perspective 3D chapters.

Here are some of the technical details behind the build.

Pieter Bosteels from click suite wrote:

To achieve the hybridisation effect we are morphing 3D shapes, patterns & colours individually. Each flower part is covered by different layers of greyscale textures which are colourised individually by a custom made HLSL pixelshader to allow the user to adjust texture/pattern vs. colour. Shape morphing is achieved by interpolation between individual mesh points.

Multitouch manipulation is achieved by attaching a single-touch move to a camera rotation, a dual-touch panning gesture to a camera translation & a dual-touch zoom gesture to a scale translation.

We’ve built all the 3D models in Cinema4D & then ported them to XAML using ZAM3D.

Everything is build using WPF (.NET 3.5), Visual Studio 2008 & Blend 2. The application runs on Windows 7 RC & uses the Windows 7 gesture APIs. We hooked into the gesture events using the Multitouch Sample .NET Interop Library for .NET 3.5 & Windows 7.

We thought about using the WPF 4.0 beta to have multitouch support built-in into WPF, but in the end we didn’t want to risk using beta software on a live environment.

This is a great showcase for WPF, especially in terms of productivity. It’s a good demonstration of how advanced graphics that are typically not available in rapid application development frameworks can be achieved relatively easily using WPF.

It is also a good showcase for WPF performance overall, with 3D rendering especially.

Without WPF, we could have never dreamed of getting the advanced stuff to work like it does now in the time we did it!

Zef Fugaz followed this with a comment:

For me as an observer the design and development team had a working prototype up and running in around a week. Pieter was in his element working with the visuals/interaction through code in close collaboration with the designers.

The hardened Flash developers who hasn't worked with the Expression Suite and WPF before seemed impressed with the capabilities of WPF and by the end of the project I heard them saying - "We never could have done this so quickly/easily using Flash".

This could make a great case study on design-dev team-work, rapid prototyping and a stunning visual design (+ multitouch to boot!)

Great work team!

As a side note when I visited the exhibition I chose to make a photosynth of the event.

Representatives from the Auckland Museum were quick to find my comments on Twitter and responded directly. Furthermore I was presently surprised to see them pimp the synth.

Making a photosynth of something I want to showcase is starting to become second nature to me. With a portable camera in you pocket it can be done in minutes and IMO shares the experience deeply with others.

Comments (0)

Skip to main content