perlinNoise (BitmapData.perlinNoise method) -- Version 8

The Perlin noise generation algorithm interpolates and combines individual random noise functions (called octaves) into a single function that generates more natural-seeming random noise. Like musical octaves, each octave function is twice the frequency of the one before it. Perlin noise has been described as a "fractal sum of noise" because it combines multiple sets of noise data with different levels of detail.

You can use Perlin noise functions to simulate natural phenomena and landscapes, such as wood grain, clouds, and mountain ranges. In most cases, the output of a Perlin noise function is not displayed directly but is used to enhance other images and give them pseudo-random variations.

Simple digital random noise functions often produce images with harsh, contrasting points. This kind of harsh contrast is not often found in nature. The Perlin noise algorithm blends multiple noise functions that operate at different levels of detail. This algorithm results in smaller variations among neighboring pixel values.

Note: The Perlin noise algorithm is named for Ken Perlin, who developed it after generating computer graphics for the 1982 film Tron. Perlin received an Academy Award for Technical Achievement for the Perlin Noise function in 1997.

Parameters

baseX:Number - Frequency to use in the x direction. For example, to generate a noise that is sized for a 64 x 128 image, pass 64 for the baseX value.

baseY:Number - Frequency to use in the y direction. For example, to generate a noise that is sized for a 64 x 128 image, pass 128 for the baseY value.

numOctaves:Number - Number of octaves or individual noise functions to combine to create this noise. Larger numbers of octaves create images with greater detail. Larger numbers of octaves also require more processing time.

randomSeed:Number - The random seed number to use. If you keep all other parameters the same, you can generate different pseudo-random results by varying the random seed value. The Perlin noise function is a mapping function, not a true random-number generation function, so it creates the same results each time from the same random seed.

stitch:Boolean - A Boolean value. If the value is true, the method attempts to smooth the transition edges of the image to create seamless textures for tiling as a bitmap fill.

fractalNoise:Boolean - A Boolean value. If the value is true, the method generates fractal noise; otherwise, it generates turbulence. An image with turbulence has visible discontinuities in the gradient that can make it better approximate sharper visual effects, like flames and ocean waves.

channelOptions:Number [optional] - A number that indicates one or more color channels. To create this value, you can use or combine any of the four color channel values: 1 (red), 2 (green), 4 (blue), and 8 (alpha). You can combine the channel values by using the logical OR operator; for example, you can combine the red and green channels by using the following code: 1 | 2.

grayScale:Boolean [optional] - A Boolean value. If the value is true, a grayscale image is created by setting each of the red, green, and blue color channels to identical values. The alpha channel value is not affected if this value is set to true. The default value is false.

offsets:Object [optional] - An array of points that correspond to x and y offsets for each octave. By manipulating the offset values you can smoothly scroll the layers of a perlinNoise image. Each point in the offset array affects a specific octave noise function.

Example

The following example shows how to apply Perlin noise to to a BitmapData object.

import flash.display.BitmapData;

var bitmapData_1:BitmapData = new BitmapData(100, 80, false, 0x00CCCCCC);
var bitmapData_2:BitmapData = new BitmapData(100, 80, false, 0x00FF0000);

var mc_1:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc_1.attachBitmap(bitmapData_1, this.getNextHighestDepth());

var mc_2:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc_2.attachBitmap(bitmapData_2, this.getNextHighestDepth());
mc_2._x = 101;

mc_1.onPress = function() {
    var randomNum:Number = Math.floor(Math.random() * 10);
        bitmapData_1.perlinNoise(100, 80, 6, randomNum, false, true, 1, true, null);
}

mc_2.onPress = function() {
    var randomNum:Number = Math.floor(Math.random() * 10);
        bitmapData_2.perlinNoise(100, 80, 4, randomNum, false, false, 15, false, null);
}

Comments

mmountain said on Sep 21, 2005 at 6:50 AM :

An example using the offsets would be useful.

ali mills said on Sep 21, 2005 at 1:02 PM :

I just modified the example above to include offsets. The tweaked example follows:

<CODE>
import flash.display.BitmapData;
import flash.geom.Point;

var points:Array = new Array();
points.push(new Point(50, 50));
points.push(new Point(0, 0));
points.push(new Point(30, 0));
points.push(new Point(10, 70));
points.push(new Point(20, 0));
points.push(new Point(0, 20));

var bitmapData_1:BitmapData = new BitmapData(100, 80, false, 0x00CCCCCC);
var bitmapData_2:BitmapData = new BitmapData(100, 80, false, 0x00CCCCCC);

var mc_1:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc_1.attachBitmap(bitmapData_1, this.getNextHighestDepth());

var mc_2:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc_2.attachBitmap(bitmapData_2, this.getNextHighestDepth());
mc_2._x = 101;

mc_1.onPress = function() {
run();
}

mc_2.onPress = function() {
run();
}

function run():Void {
var randomNum:Number = Math.floor(Math.random() * 10);
bitmapData_1.perlinNoise(100, 80, 6, randomNum, false, true, 1, true, null);
bitmapData_2.perlinNoise(100, 80, 6, randomNum, false, true, 1, true, points);
}
</CODE>

Francis Cheng said on Sep 21, 2005 at 1:11 PM :

Thanks ali, that's great. Here's another tweaking of the example that uses onEnterFrame to give it a dynamic look:

import flash.display.BitmapData;
import flash.geom.Point;

var bitmapData_1:BitmapData = new BitmapData(100, 80, false, 0x00FF0000);
var randomNum:Number = Math.floor(Math.random() * 10);
var mc_1:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc_1.attachBitmap(bitmapData_1, this.getNextHighestDepth());

// offset parameter contents
var point1:Point = new Point(10,10);
var point2:Point = new Point(50,20);
var perlinOffset:Array = [point1,point2];

onEnterFrame = function() {
perlinOffset[0].x++;
perlinOffset[1].y++;
bitmapData_1.perlinNoise(100, 80, 4, randomNum, false, false, 15, false, perlinOffset);
}

No screen name said on Oct 8, 2005 at 9:43 PM :

Hey thanks for the starter code

look what this does to any art work when modified to work with an on stage movie clip!!!

Mine was a photo that was 980X280 so be sure to adjust the parameters for the new bit map data.

import flash.display.BitmapData;
import flash.geom.Point;
//w,h,transparency
var bitmapData_1:BitmapData = new BitmapData(900, 280, true);
var randomNum:Number = Math.floor(Math.random()*20);
cow.attachBitmap(bitmapData_1, 20);
// offset parameter contents
var point1:Point = new Point(10, 10);
var point2:Point = new Point(50, 20);
var perlinOffset:Array = [point1, point2];
onEnterFrame = function () {
perlinOffset[0].x = perlinOffset[0].x - 10 ;
perlinOffset[1].y = perlinOffset[0].y + 10 ;
bitmapData_1.perlinNoise(100, 80, 4, randomNum, true, true, 8, true, perlinOffset);
};
signed
Dan in Brooklyn NYC

HedgePedge said on Nov 27, 2005 at 2:07 AM :

It'd be nice if there were documentation that illustrates the connection
between the displacementMapFilter and the perlinNoise method.