Mike T. Henderson

Interactive Design & Art Direction

AS2 Perlin Noise Wave Machine

Feb 7 2007

I while back I was trying to create some realistic water motion, without having to use actual video. I had seen people use Perlin Noise to create life-like flames, so I thought I'd try that route.

Perlin noise generation algorithm interpolates and combines individual random noise functions (called octaves) into a single function that generates more natural-seeming random noise.
Adobe

Basically, you create a BitmapData object, create offsetting points array, then apply Flash's perlinNoise function to the bitmapData using your offsetting points.

This is my first attempt at creating a wave machine. It's still pretty rough, but the motion is there. I added sliders so you can see how each parameter affects it. I think I may have to go grayscale and use color overlays to get the color right.

import flash.display.BitmapData;
import flash.geom.Point;var baseX:Number = 150;
var baseY:Number = 25;
var numOctaves:Number = 2;
var randomNum:Number = Math.floor(Math.random()*10);
var stitch:Boolean = false;
var fractalNoise:Boolean = true;
var grayScale:Boolean = false;
var channelOptions:Number = 30;
var xSpeed:Number = 20;
var ySpeed:Number = 5;
 
// create the bitmap
var myBitmapData:BitmapData = new BitmapData(575, 200, false, 0x00FF0000);
 
// Create a MovieClip to hold the bitmap
var mc:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
 
// Attach the bitmap to the MovieClip
mc.attachBitmap(myBitmapData, this.getNextHighestDepth());
 
// create points to offset the noise
var point1:Point = new Point(0, 0);
var point2:Point = new Point(50, 10);
var perlinOffset:Array = [point1, point2];
 
// render
mc.onEnterFrame = function() {
perlinOffset[0].x += xSpeed;
perlinOffset[1].y += ySpeed;
myBitmapData.perlinNoise(baseX, baseY, numOctaves, randomNum, stitch, fractalNoise, channelOptions, grayScale, perlinOffset);
};
0 Posted under: BitmapData

Leave a Reply