AS3 (BitmapData perlinNoise)模糊动态云、烟效果

其实这东西只要会用了就没有多复杂。主要就是 BitmapData的perlinNoise方法。

API:

Perlin 杂点生成算法会内插单个随机杂点函数名为 octave 并将它们组合成一个函数，该函数生成多个看起来很自然的随机杂点。就像音乐上的八音度，每个 octave 函数的频率都是其前面一个 octave 函数频率的两倍。Perlin 杂点被描述为“杂点的碎片总和”，因为它将多组杂点数据与不同级别的细节组合在一起。

您可以使用 Perlin 杂点函数来模拟自然现象和风景，例如，木材纹理、云彩或山脉。在大多数情况下，Perlin 杂点函数的输出不会直接显示出来，而是用于增强其它图像并为其它图像提供伪随机变化。

简单的数字随机杂点函数通常生成具有粗糙的对比度点的图像。这种粗糙的对比度在自然界中通常是找不到的。Perlin 杂点算法混合了在不同的详细级别上进行操作的多个杂点函数。此算法在相邻的像素值间产生较小的变化。

布林噪波：

bitmap.perlinNoise(baseX,baseY, octaves, seed, stitch, fractal,channels,grayscale, offsets);

前 6 个参数是必须的，后 3 个可选

小例子：

bitmap = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xff000000);
bitmap.perlinNoise(100, 100, 1, 1000, false, false, 1, true, null);
var image:Bitmap = new Bitmap(bitmap);
addChild(image);

效果图：

baseX和baseY 决定图案的大小，这里设置成100，如果改成200和50，则会在水平上进行拉伸，效果如下：

octaves 参数是个整数，决定噪波的迭代次数，数值越大，产生越细的噪波，花费的时间也长一些。

seed参数和noise( )方法中的一样意思，如果用同样的随机种子，产生的是同一个图案。

stitch参数为true时，图案四周相互协调，能使位图很小能平铺，看下面的代码：

bitmap = new BitmapData(100, 100, false, 0xff000000);
bitmap.perlinNoise(100, 100, 2, 1000, true, false, 1, true);
graphics.beginBitmapFill(bitmap);
graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
graphics.endFill( );

ractal 参数为true时，图案被光滑且模糊化：

bitmap = new BitmapData(stage.stageWidth, stage.stageHeight,
false, 0xff000000);
bitmap.perlinNoise(200, 100, 5, 1000, false, false, 1, true, null);
var image:Bitmap = new Bitmap(bitmap);
addChild(image);

设置fractal为true:

bitmap.perlinNoise(200, 100, 5, 1000, false, true, 1, true, null);

这样的效果看起来像云

后面2个参数为通道和灰度，和noise( )方法类似。其值是BitmapDataChannel类的RED, GREEN,BLUE, 和ALPHA常量

bitmap.perlinNoise(200, 100, 5, 1000, false, true,
BitmapDataChannel.RED, false, null);

下面的代码产生彩色的图案：

bitmap.perlinNoise(200, 100, 5, 1000, false, true,
BitmapDataChannel.RED |
BitmapDataChannel.GREEN |
BitmapDataChannel.BLUE,
false, null);

布林噪波还可建立在alpha通道上，这样可以创建透明的云彩或雾效果。

最后的参数表示偏移量，是个Point 对象数组，每个点指定单个分形的x，y坐标偏移量，如果布林噪波有多个分形（第三个参数代表分形），那么数组的长度就等于分形的数量，下面的例子创建了两个分形布林噪波图案在x轴上拉伸：

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	/**
	 * @author GavinGao
	 */	
	public class CloudsTest extends Sprite
	{
		private var _bitmap:BitmapData;
		//偏移
		private var _xoffset:int = 1;
		public function CloudsTest()
		{
			_bitmap = new BitmapData(stage.stageWidth, stage.stageHeight,
				true, 0xffffffff);
			var image:Bitmap = new Bitmap(_bitmap);
			addChild(image);
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onEnterFrame(evt:Event):void{
			_xoffset+=10;
			var point:Point = new Point(_xoffset, 0);
			_bitmap.perlinNoise(200, 100, 2, 1000, false, true,1, true, [point, point]);
		}
	}
}

转载请注明出处。