Mike T. Henderson

Interactive Design & Art Direction

Scaling Particles with PerlinNoise

Sep 3 2008

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 Posted under: BitmapData

3 Responses

  1. [...] Continuing on with my previous post on scaling particles with PerlinNoise, I decided to take it a little further by playing with each particle's rotation in relation to the white and dark values in the PerlinNoise. This is another little trick I learned from Robert Hodgin's presentation at FlashBelt on how to simulate realistic motion on how objects reacted to wind. [...]

  2. [...] In my previous experiments using Perlin Noise to create random movement, I played around with adjusting the rotation and the scale of each particle by taking the current pixel color number beneath each node and gathering a percentage of that by the maximum color number in the Perlin Noise. [...]

  3. [...] on my previous experiment, using the BitmapData.getPixel and PerlinNoise, to scale a Sprite based on the color info of [...]

Leave a Reply