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 :
I feel like this is the start of something big…
[UPDATE] See part 2 – Animated Perlin Clouds in Papervision3D
Related posts:
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.
really nice. has an organic feel.
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:
http://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
Nice
Wow, I never thought the class would be fast enough to animate like that!
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.
Glad you liked it
Definitely looking forward to seeing where you are taking it in 3D – especially now Ron has optimised the class…
I just blogged my examples and updated the page with instructions for where you can find the sourcecode if anyone is interested:
http://kelvinluck.com/article/flash-on-the-beach-and-some-perlin-noise
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
Looks like a couple of people have optimized the AS perlin noise (check the comments on the original page)
[...] got interested by Robert’s mention of perlin noise. Seb Lee-Delisle posted on Sunday about 3D Perlin Noise in Flash – it looks like a really interesting way to take this further. I can’t wait to see what [...]
[...] 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 [...]