Realistic water - Showing off DisplacementMapFilter
By Andreas, 15 July, 2010

Try moving the mouse over the water and maybe click a few times?

Been playing around with a small idea of a game and for this particular game I would like to have a great top-down watereffect to give a smooth, calm overall feeling.

This was a great way to try out a few new tricks using both the DisplacementMapFilter that has been in Flash for a while and also the lesser known ConvolutionFilter.
The DisplacementMapFilter helps to “push” the backgroundpixels in different directions due to the filtercolours which creates the distortion of the background, giving the illusion of the water breaking and distorting the light.
The ConvolutionFilter is normally used to check and alter the neighbouring pixels which in this case is used when the water rings and ripples are growing and “smoothed” out.

On top of this, I created a bitmap using PerlinNoise that also distorts the water + gives that nice lighting effect via the SUBTRACT BlendMode.

The result became surprisingly good so I decided to throw it up here right away and will, as soon as I find the time, clean the code out so I can step through it all with you once it’s done.