Lets make some (perlin) noise!

[Ordinathorreur]

This thread sort of continues from this one (http://www.kirupa.com/forum/showthread.php?t=204054) 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 :love:

[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 :)

[phorte]

I reckon you should write a tutorial about all this Perlin stuff, so us uneducated people like myself can understand it. hehe :te:.. nice work.

[vandentr]

...how do you determine the "origin" or starting point and direction of the noise?

Let's say I wanted to make it start at the bottom left and move diagonally to the top right of the bitmap.

Can someome explain if and how this would be accomplished with the kirupascuba.fla example previously attached to this thread?

Best Regards,
TVB

[tedc]

I've found that you can create a cool grunge effect using your mc as a mask over the perlin noise, for example with text...

[Droid_Roid]

Here is my: Sea_bottom (http://i126.photobucket.com/albums/p100/Droid_Roid/Sea_bottomE.swf)

[Pasquale]

sweet!

[somnamblst]

Due to processor and ram intensive issues would it be irresponsible to put this on a page visited by the general public?

[joran420]

can anyoen put an example online? for somereason at work i cant play Downloaded SWF's..

[mlk]

excellent examples !

[chandings]

hey this seems to be a pretty old thread however here is what i did with the original code.

i have tried to create fire effect.



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 =10;
var baseY:Number=10;
var nOctaves:Number = 10;
var randomSeed:Number = Math.random()*10;
var bStitch:Boolean = true;
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(pic_mc._width+2,pic_mc._h eight+2,true,0xFFFFFF);

onEnterFrame=function(){
//change the values in the perlinOffset to animate each perlin layer
perlinOffset[0].y+=5;
//perlinOffset[0].x=;
//perlinOffset[1].x=;
perlinOffset[1].y+=5;
//    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)
pic_mc.filters = [dmf];
}

[ratbaggy]

that **** is PERLIN!!


great work peeps.

[AndersAnd123]

can anybody make 3 black circles on a row and then make them move like lava balls with the use of perlin?

[Ordinathorreur]

Whoa, blast from the past he he :)

[vini]

perlin is very much CPU intensive.. I wrote a water reflection, worked fine in SWf player but used to freeze IE, So i had to optimize it with lower values