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

2024-01-01 15:40

本文主要是介绍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]);}}
}

转载请注明出处。



这篇关于AS3 (BitmapData perlinNoise)模糊动态云、烟效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/559731

相关文章

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》:本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点:switch中的生成我们的label事件接着,

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

Nginx实现动态封禁IP的步骤指南

《Nginx实现动态封禁IP的步骤指南》在日常的生产环境中,网站可能会遭遇恶意请求、DDoS攻击或其他有害的访问行为,为了应对这些情况,动态封禁IP是一项十分重要的安全策略,本篇博客将介绍如何通过NG... 目录1、简述2、实现方式3、使用 fail2ban 动态封禁3.1 安装 fail2ban3.2 配

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态