When looking at my blog stats, the most popular post by far is the old Ripple effect I did some time ago, which was based on an old demoscene trick. For a while, I’ve wanted to do a more physically correct version based on shallow water equations. Since the watercolour effect I did was based on a similar variation (as well as the image bleeding in the previous post), I decided to throw together a quick test to see if it could be turned into a new iteration of the old ripple effect. It’s mainly done for sake of experimentation, and if you really want a ripple effect I suggest using the prior one. Although the dynamics are more interesting, this one is slower, but I’m pretty happy with the performance considering the amount of calculations and the grid size (the demo has a grid of 200×200).
- Demo
- Source – There’s a few parameters to play around with, but take care: the simulation might just blow up with extreme settings
Some day I might try out a sim with the real shallow water equations, just in case you haven’t gotten violently sick from all the fluid simulations lately (I haven’t, as seems) 
Robert
on Apr 23rd, 2009
@ 10:25 pm:
Looks great D!
Quite hefty on my CPU though: 60 to 70% usage, core2duo 1.8 ghz running firefox. Loading it makes the fan start blowing straight away
But that’s normal for this type of calculations I guess.
sakri
on Apr 24th, 2009
@ 5:40 am:
You are the ripple master! (and I say that with my best german accent).
That actually reminded me of the water head/snake thing from the movie The Abyss.
Willem
on Apr 24th, 2009
@ 3:15 pm:
Very nice
David
on Apr 25th, 2009
@ 6:24 pm:
Robert: Yeah, the 200×200 grid size is really pushing it, but I wanted to show the most detailed version that still achieved a reasonable frame rate. Normally, you’d probably use 128×128
Sakri: Lol, that would be a cool PapervisionX shader
Willem: Thanks!
Shell
on Apr 26th, 2009
@ 4:50 am:
This effect is really amazing and i have applied it into my
work :
http://hk.geocities.com/pb221201/Main2.swf
But it’s possible to implents the water effect using the Pixel Bender or
using the algorithm in this page :
http://freespace.virgin.net/hugo.elias/graphics/x_water.htm
(It’s in C)
Thanks again ur open source
Shell
on Apr 26th, 2009
@ 4:53 am:
http://hk.geocities.com/pb221201/Main2.swf
*Sorry , forgot to say , just play it with R T Y U I O P
D F G H J K L keys
a+d …a+l are also availble
David
on Apr 26th, 2009
@ 11:39 am:
Shell: Cool, already some use for this!
That algorithm is actually the one used in the old ripple effect I mentioned in the post (the ‘demoscene trick’) 
It’s not using Pixel Bender since it can be done in AS3, but I did a crappy version with PB before that: http://www.derschmale.com/2008/05/29/pixel-bender-and-the-old-school-water-effect-im-in-love/ . No pretty code tho 
dVyper
on Apr 26th, 2009
@ 4:14 pm:
The demo is telling me I don’t have FP10 installed when I do. This is the first time I’ve ever encountered this.
David
on Apr 26th, 2009
@ 4:23 pm:
dVyper: Probably a lower minor version (at least 10.0.12 is required). Check and/or upgrade at http://www.adobe.com/software/flash/about/
Shell
on Apr 26th, 2009
@ 10:05 pm:
WOW,that’s so cool ! The Pixel Bender version !!
@@ but so frankly public the result of ur investigation and study !!!
Flash 水面の揺れを表現するサンプル
on Apr 27th, 2009
@ 5:32 am:
[...] 私がつかったのは上記URLのバージョンなのですが、Ver2をリリースされていたみたいです。 上記Classは細かい設定ができないのですが、そのあたりが追加されているようです。 時間ができたらVer2も使ってみたいと思います。 [...]
Milan Orszagh (TheAustrianGuy)
on May 23rd, 2009
@ 3:12 pm:
Most likelly the best ripple I have seen in flash/pb so far. Mr. doob was also doing some similiar crazy stuff … but if i remember right that was rain-on-camera like effect.
Well props!
desgraci
on Jul 3rd, 2009
@ 5:36 pm:
david i cant get the code to work, it says that the import flash.events.ShaderEvent; its not in my pc, what i have to install to have it working (btw i work with flex 3.3) with sdk 3.2, have adobe flash CS4 and adobe flash player 10, so what it can be or how it is done, (a link will be enough and belive inm googling but cant find that info)
desgraci
on Jul 3rd, 2009
@ 6:02 pm:
btw my flash player is .32
David
on Jul 3rd, 2009
@ 6:32 pm:
Desgraci: Well, you need to use Flex SDK 3.3 (personally I use any above 4) or up and set FP10 as the target player in the compiler setting (usually I pick 10.0.22 there).
You can get the latest versions of the sdk here:http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4
Hope that helps!
desgraci
on Jul 3rd, 2009
@ 6:51 pm:
OF COURSE!!!!
muahahah, im going to make evil experiments using mixes of classes, ahhh i feel so happy
tx
desgraci
on Jul 4th, 2009
@ 8:38 pm:
yo david, theres a way to use this one or the older in an away3d material¿?
desgraci
on Jul 4th, 2009
@ 8:45 pm:
i mean i was doing one, with the code working as follows:
changed the source type to cube, plane whatever primitive im woriking with plane now of course.
added some perlin noise at the element that i receive.
figured out that i was doing all wrong lol, of course, the idea is to make it on a BitmapMaterial, not deforming the vert. so the problem i had mostly is parsing the flash.display objects to away3d bitmapmaterial, so i can do the ripple over the material any idea?
David
on Jul 4th, 2009
@ 8:46 pm:
Why don’t you simply use MovieMaterial, should work just fine without the hassle of updating a BitmapData object manually.
desgraci
on Jul 4th, 2009
@ 9:08 pm:
ah you mean, i make the .swf with the PB, and put it on the stage as a moviematerial, oh my god too much coffee man XD, ok im doing it :p
David
on Jul 4th, 2009
@ 9:11 pm:
No, I mean to use the instance of ShallowWaterContainer (_rippler in this source’s case) as the MovieMaterial’s movie. Should work fine.
desgraci
on Jul 4th, 2009
@ 9:33 pm:
var ripmat:MovieMaterial=new MovieMaterial(_rippler);?
but that would be an implicit coercion of value from a Rippler to a Sprite?
i was going to try :
[Embed(source="assets/Ripple.swf")]
private var RippleEmbedded:Class;
var bMaterial:MovieMaterial = new MovieMaterial(new RippleEmbedded())
i dint get the last one, sorry for beign so noobie…
David
on Jul 4th, 2009
@ 9:40 pm:
Ah, I thought you wanted to use the newer version (which extends Sprite). In case of the old Rippler class (which is a bit less intuitive in cases as this), you should use the displayObject you assign to the Rippler class. In case that’s a Bitmap (and doesn’t extend Sprite), you could wrap it in a Sprite container.
Using an embedded swf should work just as well, but is a bit cumbersome if you want to change something in there.
desgraci
on Jul 4th, 2009
@ 9:42 pm:
btw i tried [Embed(source="assets/Ripple.swf")] and dint work, the box where i putted dissaperaed, going to try making the code of the rippler inside the main.as
desgraci
on Jul 4th, 2009
@ 9:46 pm:
Let me hear me say a big D’oh
ahhh i see, i was using another library, yours extends, and youre right, nascom doesnt extends sprite, it works perfect now, finally, can get some sleep now
i owe u my rest man
Render Bender v0.1: optimizing my Flash+Pixel Bender workflow | Der Schmale - David Lenaerts's blog
on Jul 6th, 2009
@ 12:28 pm:
[...] Bender on Google Code: The code comes with an example set of kernels, which is actually this effect. Be sure to check the documentation before getting [...]
egypt web
on Nov 7th, 2009
@ 12:34 am:
so amazing
thanks very much !
Multitouch Ripple Effect (Screencast) « MultiTouchup.com
on Jan 6th, 2010
@ 6:58 pm:
[...] David’s Blog post and the source for his flash [...]
Franz
on Mar 5th, 2010
@ 9:23 pm:
Hey David,
Sweet effect… I’m trying to include the code into a framework to use the effect in a flash piece, but am having a problem using the EMBED statements since I do not compile with the Flex framework. Currently my strategy is to load the pbj’s at runtime and then fill the new Shader() calls you make with a ByteArray of the relevant loaded pbj… Does this sound reasonable?
Thanks,
Franz
David
on Mar 6th, 2010
@ 12:21 pm:
Franz: Sure, that’s a perfectly valid way to work with pbjs. They’re doing the same thing here: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WSB5D89F6A-065F-4b18-A163-D42190DB7ABE.html
Franz
on Mar 8th, 2010
@ 3:26 pm:
Super, I had found that link but not had the time yet to implement your stuff according to that method… will let you know how it goes, I can then post u back the code, just that I won’t be working with standard Flash loaders because I need to integrate this into a bigger framework which has custom loading classes already… so I guess it’s not much use to most people.
Right now I just want to show the effect, I’m not even sure if it will work with my graphics but if it does, what’s your position on commercial use? Would be more than happy to donate etc, but obviously want to check back with you first!
Great work and looking forward to having a bit more time to surf through your experiments, pixelbender is one of those things I’ve been meaning to play with for ages, but then there’s always one more SimpleButton or TweenMax to go
David
on Mar 10th, 2010
@ 11:15 am:
I have no problem with it being used in a commercial project. I don’t even have a donation system in place, since I’m more than happy with a little credit nod