Till now, all methods for simulate 2D water ripples that I found in actionscript, are based on the same principle.

A simple and relatively fast algorithm, that I found here.

The base of this algorithm, is the relation between the speed of the wave and their previous values of position. For that, we need to store the last two states of the water in two arrays.

This relations can be represented in pseudocode as:

// velocity position relation
Velocity(x,y) = -Buffer2(x,y)
// spread out the waves ( smooth values )
Smoothed(x,y) = ( Buffer1(x-1,y) + Buffer1(x+1,y) +
Buffer1(x,y-1) + Buffer1(x,y+1) ) / 4
// final height of the wave
NewHeight(x,y) = Smoothed(x,y) + Velocity(x,y)
// Ripples lose energy
NewHeight(x,y) = NewHeight(x,y) * damping
// swap the buffers
bufferTmp = buffer1;
buffer1 = buffer2;
buffer2 = bufferTmp;

And this is the result:

Click here to see the demo. ( Requires Flash )

This, in flash, can be simplify with the use of filters:

// spread out the waves ( smooth values )
water.applyFilter(buffer1, bounds, origin, convolutionFilter );
// final height of the wave
water.draw( water , matrix , null , 'add' );
// velocity position relation
water.draw( buffer2 , matrix , null , 'difference' );
// Ripples lose energy
water.draw( water , matrix , damp );
// swap the buffers
buffer2 = buffer1;
buffer1 = water.clone();

This generates the next water effect, that can be use as a displacement filter to create a more realistic effect.

Click here to see the demo. ( Requires Flash )

Now thanks to Petri Leskinen algorithm, we can use an isometric proyection, to create a fake 3d effect who makes our water look more realistic:

## Comments

## Leave a CommentCancel Comment

## Saving Your Comment...