Categories
General

3D Perlin noise in Flash

OK I admit it, Robert Hodgin got me thinking about Perlin noise. I thought it was just a nice swirly effect. Which of course it is. But it can be more than that! What if you have a particle and change its direction depending on the value of the noise? You have a nice smooth analogue movement. And what if you put a whole bunch of particles together? You get flocking that’s what!

Except of course Robert only uses Processing these days. But surely with AS3 we can do some of this stuff? Surely! So I’m now on a mission to find out.

OK so step one. Robert’s Perlin noise was all swirly and animated. But our standard Flash Perlin noise is only static. Why is that? It’s because Flash’s built-in Perlin noise is 2D. How do you make 2D Perlin noise all swooshy and lovely?

Well you actually make 3D Perlin noise and take slices along the z axis. Kind of like a brain scan. You have a big 3D blob of noise and you just take thin slices and look at each one. Each slice only changes a little so it looks like it animates all nicely! Yay!

So the built in Flash Perlin noise is no good. So let’s look at Ken Perlin’s original noise algorithm. Wow. It looks good. But I haven’t programmed in C for about 10 years and my brain hurts.

But thankfully this nice chap Ron Valstar has just converted it into AS3!

And all the parts have come together to be able to make animated Perlin noise. So here it is :

[kml_flashembed movie=”/wp-content/uploads/manual/2007/perlinnoise.swf” width=”440″ height=”350″ FVERSION=”9″ QUALITY=”high” /]

I feel like this is the start of something big…

[UPDATE] See part 2 – Animated Perlin Clouds in Papervision3D

17 replies on “3D Perlin noise in Flash”

Definitely cool. I thought of converting that myself, but never got up the courage. This does take a pretty good hit at the cpu though. Sad it wasn’t built into the player.

Keith Peters : Hey Keith! yeah it’s pretty hard on the CPU, although to be honest, I never thought I’d get it running in real time, I thought I’d have to precalculate the bitmaps. And it’s running at 24fps!

felix: thanks man!

I thought the same thing in Robert’s session and started playing around with it on the weekend… Was going to write a post about it but in the meantime you can see my experiments so far here:

//kelvinluck.com/assets/perlin_noise_experiments/

Just iterations developing the same idea – my favourite is around number 15. (make your browser window quite small because the swfs are just scaling and should be at something like 400×400 pixels). If anyone is interested I’ll try and write up a post with a link to the source soon…

I want to play with the animated noise now – it looks super cool 🙂

Kelvin : that’s great work, this is where i wanted to go with this, only in 3D 🙂 Watch this space…

bozboz : Thanks 🙂

Ron : Hey Ron! Great to see you – thnks so much for converting Ken Perlin’s function into AS3, it seems to work really well huh?

I also thought it’d never run that fast – I was originally working on caching several frames and looping it, but I found that with the right settings, and a small enough bitmap, it seemed to work just fine! Cool huh? But I couldn’t have done it without you 🙂

Heh, thanks… but you really should thank Ken Perlin for putting that code up. Hell, I can’t even begin to figure out where to put in an extra dimension in that code of his.
Btw, I’ve updated the class: there was a slight error in the falloff (a higher amount of octaves dampened the result). I’ve also tried to optimize it a bit: precalculated the Math.pow and used multiplication instead of division.

Ron : thanks for that, I’ve just integrated the new version and it definitely seems improved. I’m still working and should have couple more examples ready over the next few days.

Kevin : great work… keep sending this through. And I hope you’ll like what I’m about to post… watch this space 🙂

Hi Seb,

Your 3D Perlin noise example is just breathtaking.

I have been trying to implement the z slicing technique to animate the noise while using Ron’s class but to no avail. Ron’s example has the Perlin.noise(x, y, z) static method return a Number …. when I onEnterframe with a recall to Perlin.noise with a change in the z parameter I just get a really jerky anim and nowhere near as good looking as yours.

Is there a way to just call Perlin.noise once and then slice from there?

May you please provide some more tips or source code.

thanks again,

Evan

Hey Evan!

2, suggestions for you to try :

1. Make sure your bitmap is REALLY small, I think mine is actually only about 100-200 pixels wide, and then blown up with smoothing on.

2. Make sure the z-steps are REALLY small! I can’t remember how much I’m changing every frame but I think it’s only around 0.1 or 0.01.

Oh and also maybe I’ll post the code sooner or later!?

cheers

Seb

Hey Seb,

I had the same question as Evan. I solved it the same way, but used a blur filter over a container. Turning on smoothing makes a lot more sense. Why do I always overcomplicate things.

Thanks Seb… AND RON… for the inspiration! This is just beautiful and I can’t wait to see other implementations of this!

Eric Bowers

hey Eric, yeah any noise algorithm that requires a blur filter kinda defeats the object! In fact that’s one of Ken Perlin’s main motivations was to avoid the need for CPU expensive blurring. So very glad I could help 🙂

cheers

Seb

[…] the runtime visibility map I’ve used the ever amazing perlin noise effect. Since perlin noise works with a phase I can use that to animate perlin noise and apply the results […]

Comments are closed.