For two new projects, I am working with simulating water.

Basically, the water is simulated by tesselating an image into smaller fragments, and then adjusting texture coordinates accordingly. A ripple is created with a center, and texture coordinates are then adjusted in an expanding radius around this center.

How the formula is implemented, makes the ripple simulate various materials. If the center continues to bounce undampened up and down, the material will look like a rubber sheet. The quicker the center is dampened, the lower the viscosity will seem.

A demo project for iPhone, featuring the basics of this, can be found here. If you find it useful, let me know, and I will provide updates.


This is of course very basic, so there is plenty of room for improvements.

The demo project scans the entire surface for each ripple. Only vertices inside an ongoing ripple should be scanned. This reduces the number of calculations dramatically. Next, I have added vertex lighting to make the ripples easier to see, and to emphasize multiple ripples. This makes vortexes when swirling a finger, much more distinct.

Finally, I added caustics also using vertex lighting, and subtle vertex distortion. Both caustics and distortions are dynamic, and it is easy to see how the water settles, after having been stirred.

It still needs some tweaking, and final touches will be reflection highlights, and impurities in water ( small air bubbles etc )

9 responses to “Ripples

  • ioscrybaby

    awesome! just gets better and better :)

  • astop

    hi, the ripple demo doesn’t work on cocos2d-v2.1, could you post the updated class?

  • gumc

    hello, could you post release the updated class for cocos2dv2.1, i couldn’t compile it~

  • M.

    Hi Birkemose,

    where could I find the vertex lighting and subtle vertex distortion effect? The project in github doesn’t seem to be the same as the video one.


    • Birkemose

      Sorry I did not see you question earlier.
      The project on git demonstrates the basics. The final version is payed work, and unfortunately not for public release.

  • Giovanni

    Hey thanks for sharing the code!!
    I was trying to rewrite it for my own engine using opengl but I’m having some problems. I’ve never used cc2d so I don’t know what maxS and maxT are, I guess they’re both 1.f, right? Also, when I render I get the texture flipped and when the ripple texture coords get updated, the texture is all black. Please, I’d really love some suggestions…thx in advice.

  • Pratik

    Thanks a lot Birkemose.. this is exactly what i needed for an app i am doing..
    but i am having trouble creating the complete project including the cocos2d files… please, can you upload Xcode project including both the ripple demo and cocos2d library… would be really helpful.. thank you in advance..

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

<span>%d</span> bloggers like this: