Mike T. Henderson

While attending FlashBelt this past June, I was left in complete awe by the presentation Robert Hodgin put together, and his ability to create life-like motion using PerlinNoise.

While Robert uses Processing over Flash, the logic is much the same. Use PerlinNoise, BitmapData, and getPixel to manipulate the way your objects move.

This is my first attempt at exploring this idea. Below is a very simple example of scaling particles using PerlinNoise. The basic idea of this experiment is that the lighter the pixel value in the PerlinNoise is, the larger the particles will scale. Then the darker the pixel data in the Noise is, the smaller the particles will scale. Use the controls to play with the parameters of the noise.

import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
 
// set up Properties
var perlinW:int = stage.stageWidth;
var perlinH:int = 250;
var baseX:int = 275;
var baseY:int = 275;
var octaves:int = 1;
var seed:int = Math.floor(Math.random()*100);
var stitch:Boolean = false;
var fractal:Boolean = false;
var grayScale:Boolean = true;
var channels:int = 1;
var xSpeed:int = 15;
var ySpeed:int = 15;
var tnodes:int = 1500;
 
// create offset
var point1:Point = new Point(0, 0);
var point2:Point = new Point(0, 0);
var offset:Array = [point1, point2];
 
// create bitmapData object
var myBD:BitmapData = new BitmapData(perlinW, perlinH);
var myImage:Bitmap = new Bitmap(myBD);
addChild(myImage);
 
// create nodes
for (var i:int = 0; i < tnodes; i++) {
var myNode:Sprite = new Sprite();
 
// draw circle
myNode.graphics.lineStyle( 10, 0, 1);
myNode.graphics.moveTo(0, 0);
myNode.graphics.lineTo(1, 1);
addChild(myNode);
 
myNode.x = Math.random() * perlinW;
myNode.y = Math.random() * perlinH;
 
myNode.addEventListener(Event.ENTER_FRAME, scaleNode);
}
 
// run perlin noise
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event) {
offset[0].x += xSpeed;
offset[0].y += ySpeed;
myBD.perlinNoise(baseX, baseY, octaves, seed, stitch, fractal, channels, grayScale, offset);
}
 
// scale each node
function scaleNode(e:Event):void {
var pixelColor:Number = myBD.getPixel(e.currentTarget.x, e.currentTarget.y);
e.currentTarget.scaleX = pixelColor * .0000001;
e.currentTarget.scaleY = pixelColor * .0000001;
}
 
// hide noise
myImage.visible = false;

3 Comments | Posted under BitmapData