Mike T. Henderson

I've been playing around with PerlinNoise & DisplacementMapFilter in Flash a lot lately. I first learned about it while reading a chapter from the book Flash 8 Essentials by Paul Barnes-Hoggett. He made an example of a flame on a candle. The flame itself didn't look real, but the motion looked very real. I took that same logic and used tried to create a more realistic looking flame. This is my first attempt.

import flash.filters.*;
import flash.geom.*;
import flash.display.*;
 
init();
function init():Void {
initVars();
initStage();
onEnterFrame();
}
 
function initVars():Void {
speed = 2;
offsets = [new Point(), new Point()];
seed = 25;
octaves = 1;
yScale = 65;
xScale = 60;
imageW = mc_flame._width;
imageH = mc_flame._height;
stageW = Stage.width;
stageH = Stage.height;
imageRect = new Rectangle(0, 0, imageW, imageH);
stageMatrix = new Matrix();
stageMatrix.scale(stageW/imageW, stageH/imageH);
}
 
function initStage():Void {
// create image to displace
displaceImage = new BitmapData(imageW, imageH, false, 0xFFFFFFFF);
createEmptyMovieClip("mc_gradient", 50);
// set gradient properties
var matrix:Matrix = new Matrix();
matrix.createGradientBox(imageW, imageH, Math.PI/2, 0, 0);
// alpha gradient drawn
mc_gradient.beginGradientFill("linear", [0x000000,0x000000], [0,100], [0,215], matrix);
mc_gradient.lineTo(imageW, 0);
mc_gradient.lineTo(imageW, imageH);
mc_gradient.lineTo(0, imageH);
mc_gradient.lineTo(0, 0);
mc_gradient.endFill();
// draws gradient to BitmapData
gradientImage = new BitmapData(imageW, imageH, true, 0x00FFFFFF);
gradientImage.draw(mc_gradient, new Matrix());
// no longer need
mc_gradient.removeMovieClip();
}
 
function onEnterFrame():Void {
// moves offsets within animation
for (var i:Number = 0; i < 5; ++i){
offsets[i].y += speed;
}
//perlinNoise([baseX],[baseY],[numOctaves],[randomSeed],[stitch],[fractalNoise],[channelOptions],[grayScale],[offsets]
displaceImage.perlinNoise(30, 50, octaves, seed, false, false, 1, true, offsets);
// use gradient to tapper perlin noise
displaceImage.copyPixels(gradientImage, imageRect, new Point(), gradientImage, new Point(), true);
/*DisplacementMapFilter(mapBitmap:BitmapData, mapPoint:Point, componentX:Number, componentY:Number, scaleX:Number, scaleY:Number, [mode:String], [color:Number], [alpha:Number])*/
// available modes (wrap, clamp, color, ignore)
var dMap:DisplacementMapFilter = new DisplacementMapFilter(displaceImage, new Point(), 1, 2, xScale, yScale, "clamp");
mc_flame.filters = [dMap];
}
 
stop();

3 Comments | Posted under BitmapData