Burlington Ducky iPhone App

The people at itemis provide a vast range of skills beyond model-driven engineering. For me, this versatility yielded an iPhone project in cooperation with Weischer Mobile and phi mobile media where a funny marketing app had to be delivered. The design concept presented to Burlington drafted a line (water), a circle (duck) inside a rectangle (iPhone) and an arrow (movement). Some bullet points completed the requirements of the part I was asked to implement. Even though the final app offers some more features such as a movie, funny photo tricks and wallpapers, I was responsible for the ducky only. This is what I came up with:

Under the hood, the animated ducky as well as the illusion of water is based on a hand-crafted physics engine. The water is implemented as a particle-based fluid simulation. Matthias Müller published a paper with the same title and great slides for SIGGRAPH 2007 as a starting point if you are interested in this topic. The ducky itself interacts as rigid body with these particles where buoyancy had been implemented explicitly. Play with Erik Neumann’s demo to have fun with rigid body physics. These concepts had been adjusted and combined with the accelerometer and touch sensors built into the iPhone to let the user interact with the simulation.

Different techniques had been applied to realize the illusion of a ducky swimming in water

Different techniques had been applied to realize the illusion of a splashing ducky

Having just dots and circles as one could look at the physics engine was obviously not the ultimate goal. From the raw data of the simulation the water surface area had to be derived, the ducky had to be put in shape and some smooth animations and sounds were needed to round out the illusion of an interactive bathtub.

Without going into every detail I want to emphasize that the iPhone is not a MacBook Pro. Where you traditionally use marching cubes/squares to convert distinct particles into a cohesive area the processing power of mobile devices requires you to squeeze out every cycle by thinking outside the box and taking advantage of hardware acceleration. In this case, OpenGL ES offers a variety of techniques including framebuffers, blending functions and alpha tests to perform the needed steps by the GPU.

metaball technique from particles using blending and alpha functions

metaball technique from particles using blending and alpha functions

Some other findings during the project include the unreliability of sensor data as well as users’ unpredictable behavior. Be aware that humans and machines act differently under certain circumstances. For applications where the interaction between those both is crucial you should do usability tests early, often and extensively before delivery, again.

The iPhone is different from other mobile devices or the emulator. Generally, floating point arithmetic will be evaluated more efficient than fixed-point. Some GPU operations are executed faster on the device than on the emulator, others are of poor performance though. Therefore, you should profile on the device to test different approaches of your design regularly. And: You must not forget to do so with sound enabled since sound processing might take more than 30% of your overall processing power.

So, go ahead and grab your version of the Burlington Duck on the app store:

If you are interested in details (e.g. “unpredictable human factor”, production of the screencast, etc.), please let me know and use the comment function of this post.

Support my Work

Writing an article like the one you have just read takes me quite an amount of my personal time. Way too often, I invest this time in different interests and decide against another blog post. On the other hand, you can motivate me with your feedback, your thoughts and your ideas. Please leave a comment below or flattr this post if you think it's worth it.

Comments

  1. Oliver Reinhard says:

    Hey Heiko
    Thanks for this article. Good work (the duck as well as the blog). Keep it up!
    I’ll try the Burlington Duck on my iPod touch tonight.

    oliver

  2. Tom Irving says:

    I’m wondering if you’d be willing to share the source code for this app?
    Out of personal interest I’ve been wondering how to create a liquid which reacts to the phones orientation.

    I understand if not though.

    Tom.

  3. Thank you, Oliver.

    Tom,
    I am not sure what you are asking for. The water effect uses the idea of metaballs and a derivation of marching squares to convert particles that comply to some rules to a fluid area. One of these rules is gravity where the actual vector is given by the data of the accelerometer. In the mentioned paper Matthias Müller subsums gravity under “external forces”. Does this make sense?

  4. Tom Irving says:

    I meant making the app open source.
    Thanks for the info as well though! Really great post.

    Tom.

  5. Mr-sk says:

    Nice writeup – any chance of open sourcing the application?

  6. Tom, Mr-sk,

    I’m afraid I cannot make this work open source. Feel free to ask questions on a conceptual level, though. I’ll be glad to give answers.

  7. Big Pig says:

    Hey Heiko,

    Could you possibly share how you captured teh video and how did you rotate the iPhone simulator so smoothly (I can only rotate it 90 degrees at a time…).

    Thanks!

  8. Hey Big Pig, I am planning a blog post and an article (German Magazine) about this. If you need further information quickly, let me know and I could give you a call.

  9. Matthew says:

    Hi Heiko,

    I’m impressed with the effect but understand that you can’t open source the app. I’m really interested to replicate a similar effect and would appreciate further details as far as you are comfortable to release.

    I’m also interested in the screencast production. It looks really good!

    Cheers

  10. Thank you for the kudos, Matthew.

    The MacDeveloper Magazine (German) will publish an article about the production of screencasts for the iPhone I wrote last week. Aroud the 27th I complement that text with a short blog post to provide links to the tools I wrote about. Hopefully, this will help you.

    Please let me know which further details -apart from code- you need to understand the liquid effect.

  11. Christian says:

    Heiko,
    Excellent app!
    Will there be an iPad version, too?

  12. Hey Christian,

    at the moment I am not planning to do a new version of the effect. The original client hasn’t ordered such an enhancement.

  13. Imran says:

    nice work dude. I have one question for you: Do you have any idea how to fill up an arbitrary shape of glass with liquid in iphone, like pouring drink into glass?

  14. In general, it should work in a similar way. The particles have to be restricted by the complex shape instead of a simple rectangle. Second, the derived area (metaballs) should be masked with the shape to provide hard edges.

Leave a Reply