Lets make some (perlin) noise!

[Ordinathorreur]

This thread sort of continues from this one but concentrates on some of the funky stuff we can do with the new Flash 8 perlin noise function, like create clouds, wood, water and other cool new things.

Edit: Please experiment and add your creation! You can find a playground .fla a couple of posts down...

Here's a perlin noise generated displacement map warping an image:

import flash.display.BitmapData;
import flash.geom.Point;
import flash.filters.DisplacementMapFilter;
import flash.filters.DropShadowFilter;
Stage.scaleMode="noScale";
// Perlin noise variables, I encourage you to play around with these...
var baseX              :Number = 200;
var baseY              :Number = 200;    
var nOctaves           :Number = 1; 
var randomSeed         :Number = Math.random()*10;
var bStitch         :Boolean = false;
var bFractalNoise      :Boolean = true;
var nChannels          :Number = 1;
var bGreyScale      :Boolean= false;
// Offset array for perlin function
var p1 = new Point(45, 34);
var p2 = new Point(50, 60);
perlinOffset = new Array(p1, p2);
// Create the bitmapdata we are going to change with the perinNoise function        
bmp = new flash.display.BitmapData(400,300,true,0x00000000);

onEnterFrame = function (){
    //    change the values in the perlinOffset to animate each perlin layer
    perlinOffset[0].y-=2;
    perlinOffset[0].x-=2;
    perlinOffset[1].x+=1;
    perlinOffset[1].y+=1;
    //    apply perlin noise to our bitmapdata
    bmp.perlinNoise(baseX, baseY, nOctaves, randomSeed, bStitch, bFractalNoise, nChannels, bGreyScale, perlinOffset);
    //
    //    Uncomment the following line to see the generated perlin noise
    //_root.attachBitmap(bmp, 1, "auto", true);
    //
    //    Now use the bitmapdata in bmp as a base for the distortion
    dmf = new DisplacementMapFilter(bmp, new Point(0, 0), 1, 1, 20, 20, "color");
    //    and apply it to our pic (instance name sourcePic)
    sourcePic.filters = [dmf];
}

[hybrid101]

cool effect, distorting that octopus!

[Ordinathorreur]

The octopus is actually the logo of Humanworkshop records. A great up and coming label from holland. www.humanworkshop.com

I can't wait to see what the other members are going to do with perlin noise!

[boohaha]

Nice job Ordinathorreur, though you push me (indirectly) to buy some more RAM...

[Ordinathorreur]

If you want to use this in your own projects, lower the baseX and baseY values to spare ram.

[Seb Hughes]

I have 2gb or ram so life is good there, and i have to say, that kicks *** man, nice good, keep it up

[icio]

That's really cool, dude. I'll see if I'm able to do anything with perlin later on. Your idea was that everyone post their (perlin) noise in this thread, right?

[Pattt]

Well I post my first texture again, a data chip!


ActionScript Code:

import flash.display.BitmapData;
var bmp:BitmapData = new BitmapData(300, 300, false, 0x000000);
this.attachBitmap(bmp, 1);
// - - - - - - - - - - - - -
bmp.perlinNoise(10, 10, 5, 10, false, false, 1, true);

[Ordinathorreur]

Patt, do you think you could post a .swf for those who don't have Flash 8?

And Icio, post away!

Here's a .fla for those of you who want to learn a bit more about what each variable does.
I replaced the octopus with a creation of my own and added a quick hack so if you click the pic you can see the perlinnoise you generate too. This one also has 2 octaves instead of one.

Edit: Some cool suggestions:
Change baseX or baseY to 0 for a flag/banner effect.
Change the perlinOffset[0] or [1] x and y values to a higher number for a faster animation.
Set bFractalNoise to false

[Pattt]

sure!

[treatkor]

displacement map with transparent png.
i thought about adding a second, slower and softer displacement map for the background, which i think would be a cool effect, but since this is processor intensive, i didn't.

[Seb Hughes]

^^^^Nifty

[icio]

Here's how to use perlinNoise with offsets to create a cloud-scrolling effect:

Stage.scaleMode = "noScale";

import flash.display.BitmapData;
import flash.geom.Point;

var xpos:Number = Math.floor(Math.random()*100);
var ypos:Number = Math.floor(Math.random()*100);
var seed:Number = Math.floor(Math.random()*10);

var p:Point = new Point(xpos, ypos);
var offsetArray:Array = [p, p, p, p, p];

var bitmap:BitmapData = new BitmapData(300, 300, false, 0); _root.attachBitmap(bitmap, _root.getNextHighestDepth());
bitmap.perlinNoise(bitmap.width, bitmap.height, 5, seed, true, true, 8, true, offsetArray);

function onEnterFrame() {
    xpos += Math.floor((_xmouse-Stage.width/2)/2);
    ypos += Math.floor((_ymouse-Stage.height/2)/2);
    
    var p:Point = new Point(xpos, ypos);
    offsetArray = [p, p, p, p, p];
    
    bitmap.fillRect(bitmap.rectangle, 0);
    bitmap.perlinNoise(bitmap.width, bitmap.height, 5, seed, true, true, 8, true, offsetArray);
}

[Ordinathorreur]

Sweet!

[icio]

Thanks, I really like the displacement stuff that you've done