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

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

4.5.6 卷积运算对像素的影响机制

在外力影响较小的情况下,物质间会不断地均匀扩散着(包括固体也能扩散,只是固体分子的距离较小,引力较大,所以一般感觉不出来,比如煤炭放墙边一段时间后,墙也会慢慢变黑,哈,扯远了),而我们也知道,外力无时无刻不在影响着这个世界。比如,人会往高处走,水会往低处流。而在社会学上,囤积居奇,劫贫济富这样的不道德行为我们也都司空见惯了。所以,处理图像像素间关系,实现色彩分配的卷积矩阵也同样具备着使颜色实现不均匀分布的本领,也就是增强对比度,使图像变得清晰的能力。

首先,我们来分析一下模糊矩阵如何让图像变得模糊,我们假设图像上有一个3*3的区域,里面9个点的颜色为:

那么,中间的像素点a与周边任何一个点的对比度都是(a-b),下面我们用3*3的模糊矩阵 对中间的点进行卷积运算,得到的结果是(8b+a)/9。这时候,对比度就变成了(8b+a)/9 – b = a/9 – b/9 = (a-b)/9,对比度比原来下降了8/9,加上结果色融入了周边像素的数值,所以卷积以后的图像就变得模糊了。

在结果式(8b+a)/9中,a和b是图像固有的颜色,所以不能修改,分母9是divisor,在确保让它等于矩阵元素总和的前提下最好也先别进行改动,而8则是卷积矩阵中周边8个点的总和,可被随意修改,而a前面的系数1就正好等于矩阵中间的元素值,也允许修改。所以,我们就把重点落到b和a前面的系数上。

从计算的过程来看,之所以导致对比度降低,是因为卷积后的结果,b所占的比例太高,导致与周边的色彩b对比减弱。现在a和b在结果色中所占的比例为1:8,我们要把a调大或者b调小,比如让b=4,那么结果将等于(4b+a)/5,与周边像素的对比度就从(a-b)/9上升到(a-b)/5了,这时候的矩阵看起来应该是这个样子:

 (把4平均分配到周边8个点上)

如果b的系数继续减少,那么对比度将会继续增强,直到b=0,结果色就等于a了,它将不对图像进行任何变换,对比度不发生变化。此时的矩阵除中间的元素是1之外,其它都是0,也就是我们之前讲到的无变换矩阵了。

按照这样的趋势,如果b<0,那么结果就是对比度增强的矩阵了,让b=-8,卷积矩阵就等于。用for循环实现这个矩阵的代码如下:

var value:Number = -1;
//是否位于中心点(对于偶数矩阵,这样的点有4个,而奇数矩阵则只有1个)
if(Math.abs((matrixSize + 1) * 0.5 - matrixX) < 1 && Math.abs((matrixSize + 1) * 0.5 - matrixY) < 1){
 value = 1;
}

如果对文本应用getConFilter(5, 0, false)滤镜,就会得到如图 4.64的效果。

图 4.64 测试对比度增强矩阵

看到了一个类似于浮雕描边的效果,但总体来说,边缘还是变得比较模糊,如果把matrixSize调大,模糊的效果就更明显了(图 4.65)。

图 4.65 matrixSize设置为9时的效果

是matrix是负数divisor引起的吗?我们不妨计算一下。

这时候,外面的8个点等于-1,所以结果色等于(-8b+a)/(-7),对比度=(-8b+a)/(-7)-b=(b-a)/7,对比度仍然比原来的(a-b)减弱了不少。但是这种对比是反向的,所以a和b的色彩有发生交换的趋势,于是形成了描边。

究其原因,就是负数系数的b除以负数divisor之后得到了一个比较大的正数,于是结果色中b的成分仍然较大。

之前已经验证过,b>0时,对比度一定减弱,b=0时对比度不变,现在连b<0也无法把对比度增强,那看来只能在a上做文章了。

现在的主要矛盾在于b系数与divisor总是同号,致使b始终是正数,无法与a拉开差距。所以,我们得把a的系数调上去,比如9,就得到矩阵,此时的divisor等于1。

9刚好等于矩阵元素的数量,但对于行数为偶数的矩阵(如4*4)来说,中心元素包含4个,所以这时候中心元素的值就不能简单地等于4*4=16了,而是要先算出周边元素的总和:-1*(4*4-4)=-12,然后中心元素的总和就应该等于13了,再平均分配到4个中心元素中,得到13/4。

对于偶数方阵,总的运算公式是(1 + (matrixSize*matrixSize – 4)) / 4,因此核心算法应修改如下:

var value:Number = -1;
if(Math.abs((matrixSize + 1) * 0.5 - matrixX) < 1 && Math.abs((matrixSize + 1) * 0.5 - matrixY) < 1){//是否位于中心点(对于偶数矩阵,这样的点有4个,而奇数矩阵则只有1个)
 value = (matrixSize | 1) ? (matrixSize * matrixSize) : ((1 + matrixSize * matrixSize - 4) / 4);
}

修改以后,运行效果如图 4.66所示。

图 4.66 修正divisor后的效果

的确得到了与模糊扩散相反的效果,边缘的像素往内收缩了一圈,但不是很明显,可能是由于色彩过于简单,这样的变换起到的作用不大。

我们尝试把文本的色彩弄丰富一点,在不依赖素材的情况下,可以考虑将第3章的纹理滤镜用到这里,同时给文本填充上紫色#9966FF:

_main_txt.defaultTextFormat = new TextFormat("Microsoft YaHei", 80, 0x9966FF, true);
var con:ConvolutionFilter = getConFilter(9, 0, false);
var bev:BevelFilter = new BevelFilter(-17, 205, 0xFFCC00, 1, 0x660000, 1, 10, 10);
_main_txt.filters = [bev];

不使用ConvolutionFilter的情况下,斜角滤镜的运行效果如图 4.67所示。

图 4.67 用滤镜填充纹理

我们对这个带纹理填充的文本应用ConvolutionFilter,即把con滤镜追加到bev之后,就得到如图 4.68的效果。

图 4.68 对纹理文本使用卷积滤镜

很多像素被挖空了,导致我们很难从中找到啥规律出来。不过此处我们可以把preserveAlpha改成true,因为文本的色彩丰富了,不处理alpha通道也一样能看到比较明显的效果(图 4.69)。

图 4.69 设置preserveAlpha=true

很多像素变成了白色(这绝非透明,因为preserveAlpha不会影响alpha通道),跟纹理的对比相当强烈,但似乎有点过度了,导致文本的底色彻底消失,所以我们不妨将矩阵的尺寸调小一点,比如3*3(图 4.70)或者5*5(图 4.71)。

图 4.70 3*3锐化矩阵的效果

图 4.71 5*5锐化矩阵的效果

显然,随着矩阵尺寸的增大,色彩之间的差距逐渐被拉开,同时纹理边缘的清晰度也在不断提高,其作用与模糊恰好相反,数学上通常称之为模糊矩阵的反卷积矩阵,而图形学上则称之为锐化。

在锐化矩阵中,矩阵元素总和和divisor都等于1,实际上,还有一种很特殊的卷积矩阵,矩阵元素的总和等于0,这个时候,相信大家都能猜到大概的效果了,对比度较弱的地方,将会呈现为黑色(preserveAlpha=true的情况下)。

这个矩阵是,与锐化矩阵相比,它仅仅是中间点的数值少了1,所以元素的总和是0,使得图像容易出现黑色。

getConFilter的写法调整为:

value = (matrixSize | 1) ? (matrixSize * matrixSize - 1) : ((matrixSize * matrixSize - 4) / 4);

这时候,divisor将等于0,不过大家不必担心,遇到这样的情况,Adobe会自动按1来处理。

运行效果如图 4.72所示。

图 4.72 矩阵元素总和为0

单从这一例子来看,把矩阵元素总和设置为0的意义似乎不是很大,而实际上,把色彩变成纯黑或者纯白,并且抽离出纹理的边缘之后,我们就可以用它来制作素描,浮雕等Photoshop滤镜效果,如果再与混合模式配合使用,其创造力更会大大增强。

时间: 2024-10-16 18:12:04

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

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游戏中的图像编程(连载十九)

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

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

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

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

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

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

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

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

2.2.4 Photoshop转Flash的投影角度换算 继续往下看,Photoshop不透明度选项下面是投影角度,默认值是120°,而Flash里角度是45°,两者相差将近90°,投影角度却相近,为什么?让我们把Flash的投影滤镜也设置成120°.(图 2.20) 图 2.20 角度值等于120的Flash投影 投影跑左边去了,x方向与Photoshop里的投影位置截然相反.经观察,Flash投影的角度与ActionScript的坐标系完全一致,它等于当前方向与水平线的夹角,顺时针为正,逆时

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

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

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

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游戏中的图像编程(连载二)

内容编排 本套教程共分3部分. 第一部分介绍色彩的相关知识及Flash,Photoshop等可视化软件在图形图像处理方面的一些特性,包括常用的色彩模式,Photoshop图层效果,ActionScript滤镜,混合模式等知识,并指出这些特性在不同软件下的异同. 第二部分以应用数学为思想,以BitmapData,像素为工具,深入剖析各种图像处理技术的工作原理,让读者可以深入到算法的层面上认识图像处理,在ActionScript乃至其它支持像素级编程的语言中实现与Photoshop等专业图像软件相媲