Mike T. Henderson

I make interactive things.

Categories:


More Mike:

Scaling Particles with PerlinNoise

September 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 Comments | Posted under BitmapData Bookmark and Share

3 Comments »

  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. [...]

    Pingback by Mike T. Henderson » Rotating Particles with PerlinNoise — 9/3/08 @ 5:43 pm

  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. [...]

    Pingback by Mike T. Henderson » Moving Particles with Perlin Noise V01 — 9/11/08 @ 12:48 am

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

    Pingback by Mike t. Henderson » Halftone Pattern in AS3 with BitmapData — 2/13/09 @ 5:19 am

Leave a comment