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!…
just cool~love it!
RESPECT !!!
Its a beautiful example of an application a perlin noise fractals!
Hey :)
I’ve just discovered your blog and you’ve got some cool stuff – great work :)
I did something similar to this example after seeing seeing Robert Hodgin talk at FOTB 07 – check it out here:
http://www.kelvinluck.com/2007/11/flash-on-the-beach-and-some-perlin-noise/
Just under the image is a link to a page where you can see the steps I went through to get there which is also quite interesting…
Keep up the good work,
Kelvin :)
I saw your music visualization work. This combined with that might be very useful for children with ASD. Have you seen the work of Hailpern, Karahalios and Halle.
this is supercool especially the blitted version. perlin noise ftw!
Love your work. Its beautiful. I was keen to get under the hood and have a play but the file my Flash CS3 exports from your FLA is only 24k (Compared to the 72k of the pre-exported .swf in your download) and does nothing.
I read through above and no one else seems to have had this problem which makes me feel pretty stupid. I am still learning AS3, am I missing sometihing really obvious?
Thanks.. I really enjoy your site. Very inspiring stuff.
B.
Cheers Brent. Sounds like you might having problems with your document class. In the properties menu for your FLA, hit the pen icon next to the document class (which should say FlowField). If it complains that it can’t find it then browse to the file. If it opens in the IDE it’s something else, but the filesize issue suggests something isn’t being compiled into the swf you’re creating.
wow. this is pretty inspiring stuff. I’m new at actionscript and I couldn’t help notice that the version online constantly adds new agents to the stage, while the version in the source files runs out of agent after a while. Would you be able to share how one might go about make the program constantly add more agents to the stage?
Hi Jan, thanks for the comment.
It should be keeping the agents within the stage bounds. perhaps they’re getting stuck as It’s these lines that are handling the boundaries (they check if the agent is off the left of stage and if so move it to the right of stage – same principle with the Y axis)
It’s pretty rudimentary. If you want to add your own logic it works along these lines though – i.e. check an agents position and if its x is less than the left of stage – its width, either remove it and spawn a new one or move it somewhere on stage.
Soulwire, your blog is just a trunk with treasures.
Thank you so much.
Hello
Should try Perlin Noise function using frocessing library ( frocessing.math.PerlinNoise )
It’s a simple mathematic function that do the same , much more faster !
[...]I’m new at actionscript and I couldn’t help notice that the version online constantly adds new agents to the stage, while the version in the source files runs out of agent after a while.[...]
If your bandwidth profiler is up then this would cause the problem due to the stage bounds being offset when the profiler opens and the constraints written in the code relating to the initial stage size.
I love this, very interesting using brightness to offset movement. Would be interesting to see generated art over a photograph or other piece of art. Maybe mix with music to generate over the course of a song for velocity and direction using brightness and color change. hmm…