Perlin noise – more experiments

Mark Knol — Fri, 07 Nov 2008 23:00:42 +0000

After writing this post of using perlin noise, I’ll did some more experiments making cool things. I draw lines using Perlin noise as input. Check this out:

I was also experimenting/figuring out how to convert a actionscript generated movie to video. I never knew it was possible (or that easy) with the Flash CS3 (maybe because I never tried). Just choose file > export movie > and choose .mov extension. The video isn’t smooth, because (when I save it) it is not really rendering, it’s just like an invisible screencapture, I guess. So I can’t use more heavy CPU things. Thats a pity.

But maybe I could use my ImageSaver Class to create a movie-sequence by saving frame by frame as PNG.

Make things less static, add some movement with Perlin Noise

Mark Knol — Thu, 06 Nov 2008 01:03:45 +0000

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.
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:
.. 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. 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 );
         
     }
 }
  

or create circle movements like this: ..the code:

 // replace :
 // shape.graphics.drawRect( 20+ (i*25) , 40+ calculation, 24, 10-calculation );
 // to :
 shape.graphics.drawCircle( 20+ (i*25) , 40+ calculation/2, 10-calculation );

..or make santa jump!? I created a MovieClip with some motion (100 frames) and used the seed as input for the gotoAndStop() function.

santaMc.gotoAndStop( int (100/(totalColors/color)) )

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?

Stroep » noise

Perlin noise – more experiments

Make things less static, add some movement with Perlin Noise