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

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 '12 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\$ – leftaroundabout Nov 22 '12 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 '12 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.