Tyler-Egeto-Design-Flash-Experiment-Blog

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;

myObject.x += Math.sin(angle * Math.PI/180) * speed;
myObject.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:

Source files coming soon.

This week I decided to go over creating a basic particle system. Particle systems are fun to play with, and as you will soon find out, easy to start experimenting with.

the Particle Object

First we will create a particle object. For our particle object, we will extend the Bitmap Class. We could alternatively extend sprite, movieclip or shape for our particle object. Bitmap is good in this case because we don’t need any of the functionality that the other objects offer, and helps us to keep the resource needs down. Lets look at the Particle object.

public function Particle(bitmapData:BitmapData, speed):void
{
super(bitmapData);
this.speed = speed;
}

As you can see from this constructor function, the particle object is an extremely simple object. All we are adding to the standard Bitmap object is the speed variable. By adding this to our particle object, each instance of it can have a unique speed value. This is helpful in creating a more organic feel in our system.

setting it up

The next step is to create multiple instances of particle object, storing each one in an array for access later on. In the code below, I assign the variable speed a random number. I then use that same value to affect the scale of the particle objects. The result of this is that bigger particles will move faster, (due to there higher speed value), which creates the illusion of depth in the system. I am also spreading out the particles randomly across the x and y axis of the stage. If we don’t do this they will all be created on top of one another.

var p:Particle = new Particle(myBitmapData, Math.random()*5+2);
p.x = Math.random()*myStageWidth;
p.y = Math.random()*myStageHeight;
p.scaleX = p.scaleY = p.speed/10
_particles.push(p);
addChild(p);

animating it

Now that all the particles are created all that is left to do is update their individual positions on a enterframe loop as seen in the code below.

var l:int = _particles.length;
for(var i:int=0; i
{
var p:Particle = _particles[i] as Particle;
if(p.y > myStageHeight) p.y = -30;
if(p.x > myStageWidth) p.x = -10;

p.y += p.speed;
p.x += p.speed;
}

A quick if statement checks to see if the particle has left the stage area, if so, it is repositioned on the stage where it can fall back into view. Afterwards each particle’s position is update based on its speed value, resulting in the example below.

Grab the example files here.

We have just recently launched a new project at work for the BC Dairy Foundation. The site, Calcium Calculator, helps users judge if they have enough calcium in their diet. You can check it out here: Calcium Calculator

Technical notes: AS2, (*probably* the last one of those!)