Make things less static, add some movement with Perlin Noise (9)

, under actionscript.

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.[as]
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 );
}[/as]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.[as]
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?

9 responses to “Make things less static, add some movement with Perlin Noise”

  1. ricardo says:

    Thanks! good stuff

    Can you explain this line of code?

    var calculation:Number = (360000000/color);

    Thanks again

  2. Mark Knol says:

    @ricardo: This actually is the trick, I’ll try to explain it to you. Imagine; a white color (rgb) in actionscript is (255*255*255 = ) 16.581.375. Actionscript internaly uses this number for calculation.

    So if the perlin noise got a white color, the calculation would be:
    36.000.000 / 16581375 = 2.17;

    But when we have a nice orange color (255*153*30 =) 1.170.450.
    The calculation:
    36.000.000 / 1.170.450 = 30,75;

    These numbers are nice factors to caculate with, isn’t it? Yes, you could raise this number more or less to get other factors to count with. I’ll did some trial/error and discovered 36.000.000 was a good number 😉 Just do some trial/error, trace some calculations, or write it down.

  3. Ashley says:

    Hi,
    I am new to ActionScript and wanted to ask if you knew of a way to use perlin noise to create organic random movement around the stage e.g. a shape that moves around the stage. I know how to get this in processing but cant work it out in Flash. Any help would be much appreciated.

    Kind Regards

  4. Mark says:

    Hi Ashley, I hope this blogpost helps. Let me know when you need some help.

  5. sahila says:

    hi

    i need color for perlin noise, how can i set for that one…

  6. Thank you Mark! It helped a lot!

    You wrought very easily understandable.

    I used wiggle in After Effects and wanted to make wiggling objects in AS3 and couldn’t find good info about it in net.

    It wasn’t easy to find your post. I think there are people like me who are googling for wiggle in AS3. Maybe if you mention wiggle and After Effects somewhere in text, some folks could than find your post easily.

Say something interesting

Please link to code from an external resource, like gist.github.com.