A better flag ripple using Perlin noise
More experimenting with BitmapData to improve on a previous idea
Published at 19:15 on Friday 28th November 2008 by xerode
Filed under Animation, Experiments, Flash, Laboratory
Since my last post on animating a flag using ActionScript, I’ve been looking at how to improve the effect. The answer? Scrap my initial idea and use some of Flash’s classes.
I used BitmapData’s perlinNoise function to generate a grayscale image and played with the values until I found something useful. This image was merged with the flag to provide shading and then used as a displacement map for a DisplacementMapFilter applied to the shaded flag.
The effect was animated by changing the offsets of the Perlin noise, constantly increasing the x offset to provide the scrolling while using Sine waves on the y offset to simulate turbulence. Sine waves were also used to modulate the DisplacementMapFilter’s x and y displacement values to make the animation less uniform. The frame was then merged with the previous frame, to slightly soften the output.
I’m more satisfied with this result than my original attempt – it’s higher quality and renders faster. Although I pretty much had to disregard my previous work and it’s still a pretty useless effect, I’ve learnt more about some classes that’ll be useful when I come to look at particles and sprite rendering in games.
Discussion
You can leave a response or trackback from your own site
4 replies to “A better flag ripple using Perlin noise”
You can follow any responses to this post by subscribing to the RSS 2.0 feed
Mojito
19/02/09
wow!! really amazing... do you know where can i get some bitmapdata tutorials for dummies???
xerode
19/02/09
Thanks! :)
I don't really know any good places for tutorials, as I've yet to find any "teach yourself Flash" sites worth rating. So many of them still use code embedded on the timeline and other bad practises. That said, I've not really looked recently so there may be some excellent sites out there that I'm missing!
I'd recommend Moock's Essential ActionScript 3 book, it's how I got started toying with BitmapData. Curiosity, the in-built Flash help and blog posts found on Google took me further. I put the source code up for a later version of this flag script, it's not amazingly well written but might help you out a little.
Good luck and let me know how you get on!
Mark
15/06/09
Hi,
love the effect.
I was wondering if you had any ideas on how to go about a concentric circle ripple effect?
I need to do one on the background of a site, that background is 100 percent browser size.
That is swf is set to 100% and noscale.
thanks for the great blog
xerode
24/06/09
Well, there are two tutorials that might help here and here. I wouldn't normally recommend FlashKit as the site is filled with very bad coding and worst practises, but I remember being linked to one of those tutorials at university.
What exactly is this for? There's a different way I'd do it, using DisplacementMapFilter to get a more realistic effect but I don't think it'd be a good idea to use it at 100% browser window.
Reply