Flow Fields

I have been playing with bitmapData object a lot lately, mostly because they are so cool. In this post I am going to go over working with perlin noise on a BitmapData object, and using that data to create a flow field.

Making some (perlin) noise

Drawing perlin noise onto a bitmapData object is made extremely easy by the built in function perlinNoise. The perlinNoise method has a number of parameters that describe what it will look like, rather than covering them here, refer to the ActionScript documentation for more information.

myBitmapData.perlinNoise(500,300,2,7,false,false,22,true, OFFSETS);

One parameter on the method, called offsets, as shown in the sample code above, is an array of points that offsets the data based on an x and y coordinate system. This is useful in creating an image that appears to be flowing. Using an enter frame loop, we can adjust the position of these points and see that movement reflected in the bitmapData object. so if we take an array of points:

var a:Array = [new Point(3,5),new Point(3,5)];

And increase their values on an enter frame like this:

a[0].x += 1
a[0].y += 1
a[1].x += 2
a[1].y += 2

The bitmapData object constantly moves in a smooth “flowing” motion. By applying the bitmapData object to a bitmap object, we can see this visually on the stage.

Using the Data

Ok so lets use that data to manipulate another shape. The getPixel function returns the color value of a pixel at the requests x and y position. Since color is nothing more than a number, we can use that number to manipulate any number based property on an object, such as it’s x and y position, or rotation.

A 24 bit colour (RGB) has a number range of 0 - 16777215, that’s a very large range, and difficult to work with, so we will first convert that number to a range of 0-1. In order to do that we will divide the result of the getPixel function by 16777215, which is 0xFFFFFF in hexadecimal. (pure white)

number = myBitmapData.getPixel(x, y) / 0xFFFFFF;

We can now use that number to manipulate another object. Here is a chunk of code running on an enter fram loop that moves a display object based on color values:

a[0].x += 1;
a[0].y += 1;
a[1].x += 2;
a[1].y += 2;

myBitmapData.perlinNoise(50, 50, 2, seed, false, true, 10, true, a);
speed = myBitmapData.getPixel(obj.x, obj.y) / 0xFFFFFF * 2.5 + .1;
angle = myBitmapData.getPixel(obj.x, obj.y) / 0xFFFFFF * 360 - 15;

obj.x += Math.sin(angle * Math.PI / 180) * speed;
obg.y += Math.cos(angle * Math.PI / 180) * speed;

First I shift the position of points slightly, then I redraw the bitmap, creating the flow motion. Then using getPixel, I grab the color value at my display object’s current position. Based on the this number, I create two number, speed and angle. Then with a small trig calculation, I shift my object’s x and y values by speed at the determined angle. And thats it! Here is the result:


Comment functionality has been disabled. Contact me on Twitter.

Morgan said:

That’s sweet Tyler. I actually have a version that looks almost the exact same, blue ball and everything.


Browse All >