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?


1 Answer 1


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

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

enter image description here

  • 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 :

enter image description here

  • \$\begingroup\$ 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!! \$\endgroup\$
    – Ciarán
    Nov 22, 2012 at 18:29
  • \$\begingroup\$ Right, though the waves in Worms are clearly not merely sines but more complex; very possibly just superpositions of sines. \$\endgroup\$ Nov 22, 2012 at 20:02
  • 1
    \$\begingroup\$ @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. \$\endgroup\$
    – Fake Name
    Nov 22, 2012 at 20:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .