Flow Field with Perlin Noise

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 Field

Have fun!…

Posted on 14 Dec 2008
6 Trackbacks


Perlin Noise Flow Field was posted on December 14th 2008 in the category Lab / Actionscript 3.0, Code, Flash, Lab, Open Source and tagged; , , , , , , .

You can Leave a comment.

Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 410 Gone in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203


32 Responses to Perlin Noise Flow Field

Leave a Reply

Pingbacks / Trackbacks

  1. 8 years ago Weekly Shared Items - 19. December, 2008 « toxin 2.0

    [...] Perlin Noise Flow Field [...]

  2. 8 years ago mostly a codeBlog » Webcam Flow field in Flash

    [...] was lurking about over at Justin Windle’s blog Soulwire, wish my blog had an alter ego with a cool name.. It was a bit to dark, the background is [...]

  3. 6 years ago suche einfaches partikelsystem (schwarm) mit dynamischer anzahl - Flashforum

    [...] haste dir schonmal FLINT angeschaut? oder hier ein nettes perlin noise flow field cheers, sal __________________ NKUNITED.DE – FLASH [...]

  4. 5 years ago Aerodynamik mit AS3 Ideen? - Flashforum

    [...] [...]

  1. Ken 7 years ago

    inspiring stuff.. very nice…

    Reply to this comment

  2. Denzo 7 years ago

    You are lucky there are so many rainy days in England :)

    Reply to this comment

    1. hyponiq 7 years ago

      I agree with that guy.

  3. Rik 6 years ago

    Easy way to optimize this a little bit (less cpu intensive) when you use it in projects with a high framerate:

    this.addEventListener(Event.ENTER_FRAME, go);
    var nvar:int = 0;
    function go(evt:Event):void {
    // perlinNoise stuff…

    Just a simple trick to have the noise update at a lower speed than the swf’s framerate. For best results just tweak the settings for the noise so the animation still looks “flowing” at the lowest possible framerate.

    Could’ve thought of this myself, but I read Julio Sancho’s blog before i did :P. I got this tip from: http://julifos.wordpress.com/2010/04/19/flash-bitmap-filters-ie-displacementmapfilter-perlinnoise-and-cpu-usage/

    Thanks for this great effect!

    Reply to this comment