Bagnall Software Consultants Ltd

"Wavy Banners"

While at Jagex, I employed a technique to make static banners come to life, as if blowing in the breeze.

Here is a demonstration of using canvas to animate a banner, as used in the RuneScape website:

The original image from the page is divided into 1px wide strips (shown wider here for clarity).

I wanted to anchor the top of the banner and so the strips needed to stretch and contract based on a sine wave.

You can see that if we make the angle a function of the distance in x of the strip from the left, we make pleats.

With the dimensions of each strip, we can copy from the image to a portion of the canvas, using the sin modified dimensions.

But we need the pleats to be travelling along.

By incrementing an angular offset with each frame, we can create the effect that the wave is a travelling wave with a horizontal velocity

We can also configure amplitude and number of pleats

But it looks a bit flat. We have a flat image with nothing that places it in a scene

Where these banners had appeared previously, we had some sort of static shadow painted on the scene behind it.

This would look a bit strange to have a static shadow with a waving banner so the solution is simple.

Simply paste strips of a semi-transparent, dropped shadow image into the canvas, before the strips of banner are pasted in.