Jump to content

Animate water ripple?


Recommended Posts

The second pen might be more relevant (Misunderstood the ripple part)....

Here is something you might be able to use instead of spritesheets:

You use the built in cosine generator and combine it with the use of bitmapdata... You should be able to make a sprite from this I believe. You can pretty much do everything that ocean waves do by hacking the numbers in the drawWaves function.... its not super pretty  in the example, but you can for example make two waves a bit below each other to get a border effect.

Link to comment
Share on other sites

I think I misunderstood the case (Was thinking of water surface wave motion instead of top down water ripple). Here is something you might be able to use:



Here you are using graphics and converting those graphics into a sprite. This is not a must though, you could also stick to the graphics circle. Then you tween the following of the sprite (or graphics circle if you like):

1: the scale of the circle
2: the alpha value. 

 Again you use cosine functions to determine the scale speed and alpha values, added with the for loop to limit  the amount of ripples added(if you keep your mouse pressed=not good)... You can probably simulate a nice ripple effect using this example as a starting point. You can for example randomize easing functions per draw or draw the graphics object with variable linewidth each time(stronger water ripple).....  You can even add a blur filter to the ripple graphics, but you will need webGLto do so... hope this helps in any case.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...