Make things less static, add some movement with Perlin Noise

Perlin noise? What is that? Well, if you are using PhotoShop, you should know the ‘clouds’-effect. That is Perlin noise. You could used it with Actionscript too.
[kml_flashembed movie=”http://projects.stroep.nl/perlinTest/example0.swf” height=”180″ width=”420″ scalemode=”showall” /]Example of how Perlin noise looks like

What could we do with Perlin noise? Well, we could use it as random factor in movements.

For example: when we need a nice transition of rainbow colors, Perlin noise is an anwer. Let’s visualize that in a movie:
[kml_flashembed movie=”http://projects.stroep.nl/perlinTest/example1.swf” height=”180″ width=”420″ scalemode=”showall” /].. and this is the code. It’s not very hard, just take a look at it.
var xPos = 0;
// new bitmadata named noise
var noise:BitmapData = new BitmapData( 900, 10 );
// create some fractal perlin noise
noise.perlinNoise ( 50, 3, 3, Math.random()*100, true, true );
// add it to the stage
this.addChild ( new Bitmap( noise ) );

// create shape
var shape = new Shape();
shape.filters = [ new GlowFilter(0xFFFFFF), new GlowFilter(0) ];
this.addChild ( shape );

// add enterframe event
this.addEventListener ( Event.ENTER_FRAME, update );
function update( e:Event ):void {
// move xPos every frame 1px to the left. (When reached the the width of noise, set to zero)
xPos = ( xPos > noise.width ) ? 0 : xPos + 1;
// get the color of the noise using the xpos.
var color:uint = noise.getPixel( xPos,0 );

//clear previous rectangle, we don’t like 100% CPU ;)
shape.graphics.clear();
// Use the colors & draw a rectangle!
shape.graphics.beginFill( color, 1 );
shape.graphics.drawRect( 40, 40, 470, 200 );
}This is what happens: We create a counter called xPos. Every frame it’s moving more to the right. We use the getPixel(x:xPos, y:0)-function to get the color value of the Perlin noise. This color value is used to draw a rectangle using graphics.drawRect()

Okay, pretty simple eh..? Well, make it better! Let’s create a moving bar, a catchy useless item for every website. More darkness means larger bars, more light means smaller bars.[kml_flashembed movie=”http://projects.stroep.nl/perlinTest/example2.swf” height=”180″ width=”420″ scalemode=”showAll” /]You can copy/paste this code into a new flash document on the timeline.
var xPos = 0;
// new bitmadata named noise
var noise:BitmapData = new BitmapData( 900, 10 );
// create some fractal perlin noise
noise.perlinNoise ( 50, 3, 3, Math.random()*100, true, true );
// add it to the stage
this.addChild ( new Bitmap( noise ) );

// create shape
for (var i:int = 0; i < 15 ; i++ ) { var shape = new Shape(); shape.name = "shape"+i; this.addChild ( shape ); } // add enterframe event this.addEventListener ( Event.ENTER_FRAME, update ); function update( e:Event ):void { // move xPos every frame 1px to the left. (When reached the the width of noise, set to zero) xPos = ( xPos > noise.width) ? 0 : xPos + 1;

for (var i:int = 0; i < 15 ; i++ ) { // get the color of the noise using the xpos. var color:uint = noise.getPixel( xPos+(i*2),0 ); var shape = this.getChildByName( "shape" + i ); //clear previous rectangle, we don't like 100% CPU 😉 shape.graphics.clear(); // Use the colors & draw a rectangle! shape.graphics.beginFill( color, 0.7 ); var calculation:Number = (360000000/color); shape.graphics.drawRect( 20+ (i*25) , 40+ calculation, 24, 10-calculation ); } } [/as]or create circle movements like this:[kml_flashembed movie="http://projects.stroep.nl/perlinTest/example3.swf" height="180" width="420" scalemode="showall" /]..the code:[as] // replace : // shape.graphics.drawRect( 20+ (i*25) , 40+ calculation, 24, 10-calculation ); // to : shape.graphics.drawCircle( 20+ (i*25) , 40+ calculation/2, 10-calculation );[/as] ..or make santa jump!? 😛 I created a MovieClip with some motion (100 frames) and used the seed as input for the gotoAndStop() function. [kml_flashembed movie="http://projects.stroep.nl/perlinTest/example4.swf" height="180" width="420" scalemode="showall" /][as]santaMc.gotoAndStop( int (100/(totalColors/color)) )[/as] Conclusion; we should use Perlin noise more as random factor. Try to create your own way on how to use it. Tip of the day: Make things less static, add some random movement with Perlin Noise. Where do you use Perlin noise for?