It was a rainy Sunday and I found myself playing around with perlin noise for a couple of hours.
The idea was to create a simple flow field using the BitmapData perlinNoise method, and use this to influence the movement of autonomous agents. There is no complex vector math or steering behaviours, just some simple logic for how a particle or agent reacts to the current pixel it is positioned over.
Despite its simplicity, by changing parameters such as the level of offset per frame or the x and y frequency, it is possible to create some interesting effects which resemble the movement of flocking birds, shoals of fish or indeed more fittingly for this time of year; panicking Christmas shoppers desperately hunting for gifts.
At each update step, an agent will grab the value of the pixel it is on top of and alter its trajectory based on the brightness of the pixel. Throw in some variance relating to how strongly an individual agent will react to this value and some interesting patterns begin to emerge.
The basic logic I’m using in this demo is as follows:
// Get the pixel the agent is over
var pixel:uint = noiseBitmap.getPixel( agent.x, agent.y );
// Find the brightness of the pixel
var brightness:Number = pixel / 0xFFFFFF;
// Set the angle and the speed according to brightness
var speed:Number = brightness * agent.speed;
var angle:Number = brightness * 360 * Math.PI / 180;
// Update the agent's position / rotation
agent.x += Math.cos( angle ) * speed;
agent.y += Math.sin( angle ) * speed;
agent.rotation = brightness * 360;
Feel free to download the source code and start tweaking the many variables. Adding further life to the agents by introducing collision or allowing additional individual traits beyond simply speed and wander might be one option worth exploring.
Download: Perlin Noise Flow FieldHave fun!…
Very nice.
Great stuff – Perlin noise is such a useful generator for so many things!
rahh beautifull (i cant remember where i saw this kind of effect few days ago, if i catch it, i’ll tell you)
i guess simply adding a brightness halo under mouse cursor could do some interesting interactive effect, like making the agents flee ? only with bitmap operation… nice :)
i’ve also seen some experiments of ppls mixing this kind of effect with 3D, this gives ideas …
http://vimeo.com/1128712
http://vimeo.com/692779 (opengl)
Nice! Cheers for the links TF, I love the 2nd one in particular :)
3D is definately the next step, and I like the idea of using other bitmap effects to encourage different kinds of movement. Just need a few more rainy Sundays!
I am risking sounding like a true novice(which i am in advanced AS tbh) but getting a 1046 when trying to test the file.
1046: Type was not found or was not a compile-time constant: MovieClip.
I’m not certain why you would be receiving that error in this instance, but check that the MovieClip class is being imported.
Are you compiling from the Flash IDE?
yeah, compiling in flash. that seemed to solve it . thanks.
Good one there Justin. You kinda beat me to a CG version of something similar. Although, I might not be able to beat Robert Hodgin(flight404.com) at Nervo, but the technique you demonstrated is approximately the same used by him but with some exceptions including Boid Behavior.
If you haven’t already seen it: http://www.nervo.tv (This work is full of inspiration).
@Nitzan
Good stuff, glad you got it sorted!
@Mohammad
Yeah, Nando is the man! So too is Robert, I love his work – I heard him talk at FOTB 07 and he mentioned the Perlin Noise technique, it’s a useful method. I’m looking forward to a spare hour when I can implement 3D.
Hope papersteer is going well
Sure, I’ll be looking forward to the 3D version. I’ve been busy with my job lately and I have tons of stuff to update :(. I branched PaperSteer into pure ActionScript 3 and PV3D, and I might upload the two branches soon. Papervision was giving me a hard time with frame rates because I had to rewrite the whole drawing routine from scratch as it uses constant redrawing of meshes. All in all, PaperSteer is coming off well. It has all the plug-ins running now with no memory leaks (as far as I tested eek…) and it works pretty fast.
Let’s hope I could find some extra time to write about it and upload the build.
Re. being too busy to get those self initiated projects finished – I know what you mean and definitely sympathise!
Sounds like you’re having a nightmare with PV3D. Have you looked at using native AS3 in FP10 for the meshes (I presume the meshes are for the sake of the demo and not intrinsic to the engine, or does the core of PaperSteer handle rendering too?). Is this to do with implementing your own camera?
I had a look in November at the repository but didn’t see the new branch – I’ll check it out now though. Keep up the good work mate :)
Re: Sounds like you’re having a nightmare with PV3D. Have you looked at using native AS3 in FP10 for the meshes (I presume the meshes are for the sake of the demo and not intrinsic to the engine…
To start, the repository has been updated with the two branches. The documentation has been uploaded as well. You can check it now Justin ;). Your work gave me motivation to upload it.
Sorry for spamming your blog:
Yes, I thought that I should handle the drawing routine through the native FP10 API but then I remembered I wanted this to be done using PV3D, no matter what. This was supposed to be a PV3D King entry and I was sure I would get the first place but…. oh well. The papersteer core library does not handle the drawing routine but the Demo and Plugins do as they do in the original version.
And thanks once again for inspiring me…