Water caustic effects with Flash/AS2
by Armand Niculescu 
There's something fascinating in looking at the way water in a pool refracts and creates patches of light.
I needed to recreate this effect (called caustic effect) in Flash. The idea was pretty simple, just use a caustic map. At first I thought about generating it on the fly but I seriously doubt this can be done in Flash in real-time (maybe in AS3 but I'm not too sure, and I needed it in AS2 anyway). After a little searching, I found a free little program called - what do you know - Caustics Generator.
Update 28 June 2006: The link I've provided is down, so here's another one.
With it I made a 16-frames animation of the caustics; to keep the file size small, the frames were rendered at half-resolution and upsampled with Actionscript.
A small screenshot of the result can be seen below:
(click on the image to see the animation)
The code is straightforward:
Follow up:
ActionScript:
import flash.filters.DisplacementMapFilter; | |
import flash.display.BitmapData; | |
import flash.geom.Point; | |
import flash.geom.Matrix; | |
| |
var frameCount:Number; | |
var caustic:BitmapData; | |
var causticResized:BitmapData; | |
| |
// create container for the background movie/image and attach it from the library | |
var backgroundContainer:MovieClip = this.createEmptyMovieClip("backgroundContainer", 1); | |
backgroundContainer.attachMovie("bkg", "bkg", 1); | |
| |
// create container for the additive layer | |
var additiveContainer:MovieClip = this.createEmptyMovieClip("backgroundContainer", 2); | |
| |
// synchronize the aeffect with the movie frame rate | |
function onEnterFrame() | |
{ | |
if (frameCount==null) frameCount = 1; | |
// always dispose bitmaps when no longer needed, otherwise memory usage will jump through the roof! | |
if (causticResized !=null) causticResized.dispose(); | |
| |
//load the needed caustic effect bitmap frame | |
caustic = BitmapData.loadBitmap(String(frameCount)); | |
// resize it - we use store it in half-resolution to conserve file size | |
causticResized = new BitmapData(760,420); | |
var transformMatrix:Matrix = new Matrix(); | |
transformMatrix.scale(2, 2); | |
causticResized.draw(caustic, transformMatrix, null, null, null, true); | |
caustic.dispose(); | |
| |
// apply caustic displacement to the background clip | |
var displacementMap:DisplacementMapFilter = new DisplacementMapFilter(causticResized, new Point(0, 0), 1, 1, 50, 50, "ignore", 1); | |
backgroundContainer.filters = [displacementMap]; | |
| |
// copy the caustic bitmap in the additive layer | |
additiveContainer.attachBitmap(causticResized, 1); | |
additiveContainer.blendMode = "add"; | |
| |
frameCount++; | |
if (frameCount>16) frameCount = 1; | |
} |
You can also download the full caustics example.
Tags: actionscript, flash
Permalink11 comments
Comment from: Mike [Visitor] · http://www.mmountain.34sp.com
I'm pretty sure you could do something similar with perlin noise completely in flash....
01/13/2006 @ 15:55
Comment from: AlexU [Visitor]
http://lab.andre-michelle.com/
>F8 Filter > water
Best,
Alex
01/13/2006 @ 18:27
Mike, it's possible to create some patches using Perlin Noise but I've been unable to create a realistic effect with it.
Real water caustics look like this:
http://www.physics.utoronto.ca/~peet/photos/test/br-WaterCaustics1.jpg
Perlin Noise is good for turbulence and smoke; a small map with low complexity will create some patches, but nothing like this.
Alex, the effect on Andre Michele's site is gorgeous, but it's something different.
Real water caustics look like this:
http://www.physics.utoronto.ca/~peet/photos/test/br-WaterCaustics1.jpg
Perlin Noise is good for turbulence and smoke; a small map with low complexity will create some patches, but nothing like this.
Alex, the effect on Andre Michele's site is gorgeous, but it's something different.
01/13/2006 @ 18:53
Comment from: Mike [Visitor] · http://www.mmountain.34sp.com
I was think of using two bmps created with perlin noise - one horizonal, one vertical - then try out different blend modes and displacement map settings on top of your 'reef'
Probably be pretty processor intensive - but you could work the perlin data small, scale up and then apply to the source image....
Probably be pretty processor intensive - but you could work the perlin data small, scale up and then apply to the source image....
01/13/2006 @ 18:59
Very interesting - I'll try that!
01/13/2006 @ 19:17
Comment from: Eric [Visitor] · http://www.unkinddesigns.com
hey guys, Lov that site.. Great work!
I was wondering how this is done step by step creating water.. I have a gif i wanted to use with this effect and seen alex work, WOW thats great.. How can i make it like that. Thanks for you time. Have a great day..
p.s what program do i use for that. I wanted to transfer this over to flash. thanks again..
I was wondering how this is done step by step creating water.. I have a gif i wanted to use with this effect and seen alex work, WOW thats great.. How can i make it like that. Thanks for you time. Have a great day..
p.s what program do i use for that. I wanted to transfer this over to flash. thanks again..
05/09/2006 @ 18:25
Eric, the water droplets effect on lab.andre-michelle.com that Alex mentioned is done in a similar fashion with the caustic effect.
All effects like this use a displacement map. I load the map from a sequence since I couldn't program the pattern. Andre most likely draws the rings with flash drawing API and renders the movie clip into a bitmap and then applies the transformation.
My suggestion to you is to learn the drawing API, how to use bitmaps and bitmaps affects. When you understand that, you'll know how to do all kind of effects.
All effects like this use a displacement map. I load the map from a sequence since I couldn't program the pattern. Andre most likely draws the rings with flash drawing API and renders the movie clip into a bitmap and then applies the transformation.
My suggestion to you is to learn the drawing API, how to use bitmaps and bitmaps affects. When you understand that, you'll know how to do all kind of effects.
05/10/2006 @ 19:28
Comment from: Eric [Visitor] · http://www.unkinddesigns.com
thanks for getting back to me.. I figured out the effect. The problem now is that When i change the color of the caustic effect to blk like yours, the graphic in flash is all of centered. If i keep it at defult it fine.. Any reason for this? Can i send you the 2 flash files to show you.. Thank you very much for all your time. Keep up the great work.
05/11/2006 @ 00:17
Comment from: Stephë Acts7 Miessner [Visitor] · http://www.sftcministries.com
eagleprop . at . hotmail.com
Above is my email address - could someone PLEASE PLEASE contact me and send me the caustics generator - their link is down but I really wanna check this out!
Thanks
Acts7
Above is my email address - could someone PLEASE PLEASE contact me and send me the caustics generator - their link is down but I really wanna check this out!
Thanks
Acts7
06/04/2006 @ 04:42
Comment from: Vinicius - WebDesigner - Brazil [Visitor]
I want download the "Caustics Generator" but the serve is down !!
Please, somebody have this program, and can send it`s for me !!!
Bye !!
Please, somebody have this program, and can send it`s for me !!!
Bye !!
06/27/2006 @ 23:28
06/28/2006 @ 08:40
Comment feed for this postLeave a comment
Aggregated by MXNA
