# Re-create 2D side-on wave effect from Worms game

I'm trying to recreate the waves/water effect from Worms ( see here http://youtu.be/S6lrRqst9Z4?t=31s ) From what I understand its not actually a sprite, its procedurally generated by something like a sin wave.

Has anyone created something like this before? or any idea how I would go about it?

-

Yes, you are right, this 2D water effect can be simulated using math sine function :

``````wave = sin(phase + t * frequency) * amplitude
``````

• `phase` is a constant, put whatever you want.
• set `t` to horizontal position of pixel/vertex you are processing : `t = x;`
• change `amplitude` over the time (that will make the waves moving up and down) :

`amplitude = sin(t * wave_speed) * wave_height`

• combine several waves to get a more relastic effect :

`wave_final = wave0 + wave1 + ...` .

For each wave, change some parameters a little bit (eg: phase, frequency,...).

Here is a quick example i made, using only two waves :

http://glslsandbox.com/e#4988.0 (require recent browser and WebGL enabled)

NOTE : this is a shader, but doing this using 2D primitives is the same approach .

EDIT : you dont specify any framework or 2d rendering system, but here is how it could be rendered using polygons / triangle strips :

-
Wow, that's an awesome answer, thanks for the very comprehensive answer. Yea I'm using HTML5 Canvas api for rendering. Thanks again for that, extremely helpful!! – Ciarán Nov 22 '12 at 18:29
Right, though the waves in Worms are clearly not merely sines but more complex; very possibly just superpositions of sines. – leftaroundabout Nov 22 '12 at 20:02
@leftaroundabout - Techincally, every wave function is really just a superposition of an infinite number of sines. Practically, this is still true, but more crude approximations may make your life easier. – Fake Name Nov 22 '12 at 20:25