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:

Caustic effects

The code is straightforward:

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.

Flash8 Caustic Effects (203.5 KiB, 647 hits)

Share and Enjoy:

11 responses to “Water caustic effects with Flash/AS2”

Mike
January 13, 2006 at 15:55 | Permalink

I’m pretty sure you could do something similar with perlin noise completely in flash….
AlexU
January 13, 2006 at 18:27 | Permalink

http://lab.andre-michelle.com/
>F8 Filter > water

Best,
Alex
Armand Niculescu
January 13, 2006 at 18:53 | Permalink

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.
Mike
January 13, 2006 at 18:59 | Permalink

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….
Armand Niculescu
January 13, 2006 at 19:17 | Permalink

Very interesting – I’ll try that!
Eric
May 9, 2006 at 18:25 | Permalink

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..
Armand Niculescu
May 10, 2006 at 19:28 | Permalink

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.
Eric
May 11, 2006 at 00:17 | Permalink

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.
Steph
June 4, 2006 at 04:42 | Permalink

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
Vinicius - WebDesigner - Brazil
June 27, 2006 at 23:28 | Permalink

I want download the “Caustics Generator” but the serve is down !!
Please, somebody have this program, and can send it`s for me !!!
Bye !!
Armand Niculescu
June 28, 2006 at 08:40 | Permalink

I’ve found the program on this site:
http://www.dualheights.se/caustics/#download

Water caustic effects with Flash/AS2

Armand Niculescu

11 responses to “Water caustic effects with Flash/AS2”

Last 20 posts

Tag Cloud