Animating a P&O Wave (or How to use Peanut Oil in a Website).

Last week we launched the new P&O Website [cue the trumpets because it took a year!] Whilst e-commerce websites aren’t generally considered somewhere you can ‘get creative’ we decided this should be an interesting challenge …which it was. When we did our early research we found some very interesting insight about that “twilight zone” where air meets water (see images below). We realised there was something here to play with and decided that if we could execute it well enough it could be an important design feature on the site… but execute it poorly and it would just look tacky. (Let us know what you think).

Above Video: The making of the wave: http://www.youtube.com/watch?v=NWCsS7W3yQk

Creating a ‘wave’ was not as simple as we first thought. Animated tests trying to simulate the wave in 3D or in Flash just didn’t cut it. We wanted something which felt as realistic as possible. We next moved to the real world but equally found that water on its own did not work well at all when we filmed it. To cut a very long story short we finally made a glass tank (very lo-tech – a vase with half a CD case fixed using a glue gun) and filled it with 50% water (tinted blue with food dye) and 50% clear peanut oil. The two substances allowed us to create and film the illusion of water moving very realistically but a much slower down rate. Some After Effects magic with the raw film and we now have a looped, low bandwidth wave for the P&O site.

image 
Final Website above: http://www.pocruises.com.au/Pages/default.aspx

image

Above: During design research we found a ton of wonderful images which were part of the inspiration for the final wave.

image

Above: Other features in the site include “Full Screen Experiences” that work without leaving the current page you are on. It’s slightly buried but an unusual feature – especially for an ecom website.

Posted by

 ~@eunmac

18 Responses to Animating a P&O Wave (or How to use Peanut Oil in a Website).

  1. Deano says:

    Now that’s what I call thinking outside the box!

    Being a flash developer myself, I can see how difficult it would have been to create that wave if you tried using vectors instead. It just wouldn’t have had the same effect.

    This site has so many hidden surprises. Seriously, I feel like joining a cruise today.

    Congrats on a job well done.

  2. Jamie says:

    Love the wave and the site! Well done guys.

  3. Adrian says:

    My actual first thought when I saw this site a week ago was that you created this effect in 3d. There are script out there that does waves and water pretty well.

    Example:
    http://www.scriptspot.com/3ds-max/wave-generator

  4. Boz says:

    Very nice effect and a good alternative to the hackneyed 3-D effects that pass for waves and swells.

    The motion on the final website is a bit too fast, however. You need to consider that the effect is aimed at being that of a light swell in a reef system. This would typically have a longer period between the crests – probably around 60-70% longer.

  5. Russell says:

    Really lovely — and was going to say exactly what Boz said. Slowing it down a bit would add verisimilitude.

  6. Sally OD says:

    Great job. Enjoyed watching the making of. Cheers! Sal

  7. Salut there Captain hows hanging these days

  8. filmmaker Top News in 2009-11-29…

    See what’s popular in filmmaker for 2009-11-29…

  9. John says:

    Nice looking site and useful technique, however Boz is right about the slight disconnect between visuals and wave speed. Also not sure about the /Pages/ thing – bad for SEO so bad for the client, and could easily be fixed by modifying routing requests.

  10. Chia Borling says:

    This is inspiring I think I will start a blog myself one day in italian of course. Great post, grazie. Ciao da Hotel Abano Terme

  11. Well every blog owner deserve a little admiration. Nice post, grazie. Ciao da Hotel Abano Terme

  12. Hey there,
    I love your weblog. Google sent me here. I found very much good imformation here.
    Will for sure visit it again.

  13. Dorla Metzga says:

    Marketing, advertising and selling consumer merchandise or services through traditional stores, direct mail catalogs and e-commerce web sites should be quite simple: “Understand the consumer wants, let them know they need it, make it available and sell it at a profit.” This philosophy use to work very well but the current market is more complex. – from Metwell Management Consultants

  14. Metwell a management consulting firm from Atlanta and New York said that clients are now using their service to steer the launch of new products, improve visibility, manage and acquire new customers, sell products and advance their market standing. Many of their clients find they get better results with outsourcing traditional in-house functions.

  15. Daily File says:

    Thank you and Please preserve updating your Net site. I are going to be stopping by each time you do .

  16. askbuyuleri says:

    Nice to get visiting your site again, it is often months to me. Well this article that i’ve been waited for such a long time. I need this information to complete my assignment within the college, and possesses same topic together with your article. Thanks, great share.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

<span>%d</span> bloggers like this: