ActionScript3游戏中的图像编程(连载九十三,第4章完)

总目录:http://blog.csdn.net/iloveas2014/article/details/38304477

4.5.7 卷积矩阵的高级技巧及其原理

很多图形学教程或者书籍都习惯于在给出矩阵公式以后就直接列出几个常用的,并且看起来比较有趣的滤镜效果,这是“授之以鱼”的做法,而笔者更倾向于“授之以渔”,所以,我不打算沿用他们的套路,而是打算通过介绍算法技巧使笔者在阅读完本节之后可以学以致用,举一反三。

网上那些老掉牙的例子都比较倾向于用方阵,所以此处笔者打算先制作一个行数和列数不等的阵来制作效果,比如下面的代码就创建了一个15*1的模糊矩阵:

var con:ConvolutionFilter = new ConvolutionFilter(15, 1, [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], 15, 0, false);

这个卷积滤镜的运行结果如图 4.73所示,它只在x方向上模糊。可以看到比较明显的振铃现象。

图 4.73 15*1的矩阵

虽然它对于模糊来说并不友好,但这并不代表它一无是处,而且有时我们还更加希望振铃的感觉更加明显。

我们已经知道,振铃是模糊区域过大,轮廓出现交叉所致,那么,我们可以利用这一点加强这种振荡的效果:

var con:ConvolutionFilter = new ConvolutionFilter(15, 1, [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1], 8, 0, false);

交叉读取周边像素,会使像素的交互产生跳跃式的融合,振铃现象得到进一步的增强,就像弹簧片或者橡皮条在振动一样(图 4.74)。

图 4.74 交叉融合的矩阵

这样的图虽然没啥美观度可言,但您可以把它放到一些趣味百科的专题网站,论坛或者微薄上给网民们普及振铃方面的知识,因为这张静态图可以使肉眼产生振动的错觉,有一定的奇妙之处。

言归正传,振动只引起x方向的模糊显得有点不自然,我们希望y方向也有一定程度的模糊,比如上下1像素,这时候我们就可以在现有基础上将其扩展为15*3的矩阵:

var con:ConvolutionFilter = new ConvolutionFilter(45, 1,
[1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1,
1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1,
1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
24, 0, false);

但可惜我们并没有如愿实现y方向模糊的效果,取而代之的是色彩的变淡(图 4.75)。

图 4.75 y方向扩展到3

原因很好找,就是因为中间像素点与左上方,右下方等位置的像素也进行了融合,所以结果显示出来会比原来模糊,但不设置上下方的像素,又无法在y方向上进行模糊,怎么办?

遇到这种两者相互冲突的情况,笔者最喜欢做的事情就是尽可能地把两个行为进行分离,避免让它们之间直接接触,此处我继续沿用此法,具体的实现自然就是多定义一个纵向的卷积滤镜了。

var con:ConvolutionFilter = new ConvolutionFilter(15, 1, [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1], 9, 0, false);
var con2:ConvolutionFilter = new ConvolutionFilter(1, 3, [1, 1, 1], 3, 0, false);
main_txt.filters = [bev, con, con2];

得到的结果非常干净,如图 4.76所示。

图 4.76 将纵横两方向分离

如果觉得纵向模糊幅度太小,就可以将第二个卷积滤镜的高度调大一些,比如9:

var con2:ConvolutionFilter = new ConvolutionFilter(1, 5, [1, 1, 1, 1, 1], 5, 0, false);

得到的效果如图 4.77所示。

图 4.77 y方向继续拉长

矩阵的乘法将单像素通道间的数据有机结合在一起,而卷积更是充分调度了像素间的数据交互,增强了程序对色彩的可控性,给设计者提供了更广阔的发展空间,矩阵数学的艺术性再次得到了充分的体现。

时间: 2024-08-05 11:52:40

ActionScript3游戏中的图像编程(连载九十三,第4章完)的相关文章

ActionScript3游戏中的图像编程(连载十九)

1.4 浅析亮度与灰度/明度的关系 进入正题之前,先来了解一下灰度/明度. 1.4.1 灰度/明度的概念及其与HSB亮度的异同 在很多场合,灰度与明度的概念完全等价. “灰度”最初来源于摄影领域,在彩色显像技术问世以前,拍摄出来的照片只有黑,白,灰三类颜色,在这种黑白照片里,只有白色.黑色以及灰色的点能完好无损地显示出来,其它颜色将根据其亮度呈现出不同深度的灰色.亮度越大灰色越浅,反之越深.把黑与白色之间分成若干级,称为“灰度等级”.能呈现的灰度等级愈多,画面的层次感就愈丰富. 所以,从彩色转黑

[原创]ActionScript3游戏中的图像编程(连载二十九)

2.2.2 Photoshop投影大小的模拟 投影没有之前那么浓了,但是跟Photoshop里的效果差别还挺大,因为在Photoshop里我们还设置了另外一个属性:大小. Flash里似乎找不到它的影子,我们用排除法来进行定位,Photoshop投影样式的大小属性以像素为单位,Flash投影滤镜的选项只有距离和那对被“手铐”扣住的模糊属性符合条件,而Photoshop里也有一个距离,所以我们定位到模糊属性(图 2.15). 图 2.15 Flash投影的模糊属性 分别调整Photoshop的大小

《ActionScript3游戏中的图像编程》(连载十九)

1.4 浅析亮度与灰度/明度的关系 进入正题之前,先来了解一下灰度/明度. 1.4.1 灰度/明度的概念及其与HSB亮度的异同 在很多场合,灰度与明度的概念完全等价. "灰度"最初来源于摄影领域,在彩色显像技术问世以前,拍摄出来的照片只有黑,白,灰三类颜色,在这种黑白照片里,只有白色.黑色以及灰色的点能完好无损地显示出来,其它颜色将根据其亮度呈现出不同深度的灰色.亮度越大灰色越浅,反之越深.把黑与白色之间分成若干级,称为"灰度等级".能呈现的灰度等级愈多,画面的层次

ActionScript3游戏中的图像编程(连载二十九)

2.2.2 Photoshop投影大小的模拟 投影没有之前那么浓了,但是跟Photoshop里的效果差别还挺大,因为在Photoshop里我们还设置了另外一个属性:大小. Flash里似乎找不到它的影子,我们用排除法来进行定位,Photoshop投影样式的大小属性以像素为单位,Flash投影滤镜的选项只有距离和那对被"手铐"扣住的模糊属性符合条件,而Photoshop里也有一个距离,所以我们定位到模糊属性(图 2.15). 图 2.15 Flash投影的模糊属性 分别调整Photosh

ActionScript3游戏中的图像编程(连载九)

1.2.3 线性/倍乘提高降低亮度 线性提高亮度(图 1.4):_myColorTransform.redOffset = _myColorTransform.greenOffset = _myColorTransform.blueOffset = 100; 线性降低亮度(图 1.5):_myColorTransform.redOffset = _myColorTransform.greenOffset = _myColorTransform.blueOffset = -100; 倍乘提高亮度(

ActionScript3游戏中的图像编程(连载三十九)

2.3.1 用方块观察斜面样式与斜角滤镜作用方法的差异 在Photoshop和Flash里都各自建一个500*500的空白文件,然后各自在画布中心画上一个纯蓝的(#0000FF),100*100大小的方块,(如果不懂得如何完成以上操作,可自行翻阅相关的入门教材)然后Flash里再多做一步,按F8转换为元件,类型选择"影片剪辑". 为了最大程度上减少对本课题研究的干扰,我们创建的投影力求做到最简单,最干净.为此,我把Flash里的投影滤镜中的模糊设置成0,并且把颜色调亮(#00cc00)

ActionScript3游戏中的图像编程(连载二十)

1.4.2 灰度的计算方法 回过头来看RGB,站在科学的角度来解释,它们确实也有更明亮的理由,因为下面一排色彩反射出来的色光总量是上一排色的两倍.      为此,作者曾自作聪明地发明了一条“原创”的灰度公式: Gray=(r+g+b)/3 哈哈,用色光总量来表达颜色的灰度想必就比较准确了吧!沾沾自喜一番以后,我还试着用这条自创的定律来转换这张测试图片,上下色块的灰度果然拉开了,可是很不幸地,左右相邻,边界分明的色块依然粘连在一块(图 1.30). 图 1.30 笔者“自创”的灰度转换 显然此法

ActionScript3游戏中的图像编程(连载二十一,第1章完)

1.4.3 用灰度/明度指导色彩搭配 试着只通过调整不等于0的通道,让上一排的色彩在灰度上保持一致,把三个颜色分别代入到心理学公式.得 Gray(red) = r * 0.299      Gray(green) = g * 0.587      Gray(blue) = b * 0.114 让它们灰度相等,则 r * 0.299 = g * 0.587 = b * 0.114 可见,b值一定最大,不妨让b取最大值255,求得r=97, g=50.把这两个值分别应用到红和绿两个色块上. 绿色不再

[原创]ActionScript3游戏中的图像编程(连载三十二)

2.2.5 投影距离的模拟 Photoshop投影样式面板的下一个属性是距离,它也存在于Flash的投影滤镜选项中.两者初始值一致,经笔者测试,两者在效果实现和数值意义方面基本一致.Flash不需要对默认参数进行更改. 下一项是扩展,乍一看,在Flash中并没有找到对应项.但仔细观察,在Photoshop投影样式的基础选项里,除了alpha以外,就只剩该属性用了百分比. [原创]ActionScript3游戏中的图像编程(连载三十二),布布扣,bubuko.com

[原创]ActionScript3游戏中的图像编程(连载三十)

2.2.3 Photoshop/Flash中的投影品质 与Photoshop不同,Flash的滤镜在输出的作品中仍会实时通过FlashPlayer进行渲染,所以性能显得尤为重要,在迫不得已的情况下还要以牺牲品质作为代价.所以,Flash的品质下拉框引起了我的注意,我试着把品质调整为“高”,效果就可以跟Photoshop的媲美了.(图 2.18) 对于品质,Flash的帮助文件也给出了解释,品质的高低差别在FlashPlayer内部是通过对低品质滤镜的使用次数不同来进行控制的,低品质只模糊1次,高