AS3 (BitmapData perlinNoise)模糊动态云、烟效果
2013-01-01 20:02
351 查看
其实这东西只要会用了就没有多复杂。主要就是 BitmapData的perlinNoise方法。
API:
Perlin 杂点生成算法会内插单个随机杂点函数名为 octave 并将它们组合成一个函数,该函数生成多个看起来很自然的随机杂点。就像音乐上的八音度,每个 octave 函数的频率都是其前面一个 octave 函数频率的两倍。Perlin 杂点被描述为“杂点的碎片总和”,因为它将多组杂点数据与不同级别的细节组合在一起。
您可以使用 Perlin 杂点函数来模拟自然现象和风景,例如,木材纹理、云彩或山脉。在大多数情况下,Perlin 杂点函数的输出不会直接显示出来,而是用于增强其它图像并为其它图像提供伪随机变化。
简单的数字随机杂点函数通常生成具有粗糙的对比度点的图像。这种粗糙的对比度在自然界中通常是找不到的。Perlin 杂点算法混合了在不同的详细级别上进行操作的多个杂点函数。此算法在相邻的像素值间产生较小的变化。
布林噪波:
bitmap.perlinNoise(baseX,baseY, octaves, seed, stitch, fractal,channels,grayscale, offsets);
前6个参数是必须的,后3个可选
小例子:
baseX和baseY 决定图案的大小,这里设置成100,如果改成200和50,则会在水平上进行拉伸,效果如下:
octaves 参数是个整数,决定噪波的迭代次数,数值越大,产生越细的噪波,花费的时间也长一些。
seed参数和noise( )方法中的一样意思,如果用同样的随机种子,产生的是同一个图案。
stitch参数为true时,图案四周相互协调,能使位图很小能平铺,看下面的代码:
ractal 参数为true时,图案被光滑且模糊化:
设置fractal为true:
这样的效果看起来像云
后面2个参数为通道和灰度,和noise( )方法类似。其值是BitmapDataChannel类的RED, GREEN,BLUE, 和ALPHA常量
下面的代码产生彩色的图案:
布林噪波还可建立在alpha通道上,这样可以创建透明的云彩或雾效果。
最后的参数表示偏移量,是个Point 对象数组,每个点指定单个分形的x,y坐标偏移量,如果布林噪波有多个分形(第三个参数代表分形),那么数组的长度就等于分形的数量,下面的例子创建了两个分形布林噪波图案在x轴上拉伸:
转载请注明出处。
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]); } } }
转载请注明出处。
相关文章推荐
- AS3 BitmapData.perlinNoise()方法的用途
- AS3(BitmapData pixelDissolve) 照片淡出效果
- AS3 使用Bitmap+Matrix实现的:径向+转旋+叠加图层效果的模糊效果
- Android毛玻璃(磨砂)效果(静态&动态背景图模糊 收集)
- 教你一分钟实现动态模糊效果
- as3 影片剪辑(MovieClip)转换为位图(BitmapData)
- 教你一分钟实现动态模糊效果
- Android动态模糊效果的快速实现方法
- 教你一分钟实现动态模糊效果
- [ViewPager、一]ViewPager和PagerAdapter做动态加载页(类似listView适配根据data新增的效果)
- RenderScript:简单实现动态模糊效果
- as3中bitmapData中draw方法重新理解
- AS3]Bitmap序列化(将BitmapData保存为原生Binary/ByteArray)
- AS3 Bitmapdata brush!
- 使用bitmapData简单实现涂鸦中的橡皮功能(as3)
- 教你一分钟实现动态模糊效果
- css动态模糊效果
- AS3取bitmapdata透明通道
- as3利用Bitmap做图片倒影效果
- 【转】AS3用BitmapData制作倒影