水波特效实现的原理

这个文章是我于2014年7月发布到qq空间里的。我已经忘记从哪转载，如果侵犯了原作者的权益请联系我删除。本着共享技术的心理发布出这篇文章，望理解

水波特效实现的原理

 //计算出下一个时刻非边缘处像素的新的波幅值
 for(int x=1; x<_waveWidth -1; x++)
 {
     for(int y=1; y<_waveHeight -1; y++)
     {
         //模板如下：
         //[1 1 1]        [0  0 0]
         //[1 0 1] /4 +   [0 -1 0]
        //[1 1 1]        [0  0 0]
        _waves[x,y,newBuffer] = (short)(
                                ((_waves[x-1,y-1,_activeBuffer] +
                                _waves[x,y-1,_activeBuffer] +
                                _waves[x+1,y-1,_activeBuffer] +
                                _waves[x-1,y,_activeBuffer] +
                                _waves[x+1,y,_activeBuffer] +
                                _waves[x-1,y+1,_activeBuffer] +
                                _waves[x,y+1,_activeBuffer] +
                                _waves[x+1,y+1,_activeBuffer]) >> 2) - _waves[x,y,newBuffer]);
        
        //damping , 使振幅衰减！ 即原来的振幅*（1-1/16）
        if(_waves[x,y,newBuffer]!=0)
        {
            _waves[x,y,newBuffer] -= (short)(_waves[x,y,newBuffer] >> 4);                wavesFound = true;
        }
    }

其次我们需要触发一个水波，也就是投入一个初始的值到wave数组中，在自然界中显然水波是圆形的，所以我们在图形中的一个圆形区域内给它一初值。然后让wave数组进行迭代，计算出新的时刻的wave数组。

//设置x，y位置的wave值
for(int i = -radius; i<=radius; i++)
{
    for(int j = -radius; j<=radius; j++)
    {
        if(((x+i>=0) && (x+i<_waveWidth-1)) && ((y+j>=0) && (y+j<_waveHeight-1)))
        {
            dist = Math.Sqrt(i*i +j*j);
            if(dist<radius)
                _waves[x+i,y+j,_activeBuffer] = (short)(Math.Cos(dist*Math.PI  / radius) * height);
        }
    }
}

最后，我们需要在视觉效果上反应水波，我们的wave数组这时用来计算像素的偏移。这个假设就是水波特效的原理：wave数组的同行相邻元素的差值反应了水平偏移量，同列相邻元素的差值反应了垂直偏移量。这里得到偏移量以后，和photoshop中的置换滤镜方式就完全一样，查找到偏移后的位置，并进行边界判断，然后复制源图中该位置的像素，这部分代码不帖了。

对以上的过程，最神奇的是用递推式计算出下一时刻的wave数据，并且实际效果证明这种模拟效果很好。但是对于这一步，只能从感觉上理解，我尚没能够从用数学验证它。

这里同时也在photoshop领域衍生了一种新的应用，即制作水波效果的置换图。关于置换滤镜的原理，涉及到了photoshop领域里面比较深入的部分，不是三言两语能讲清的，这里暂时不详细讲解，直接给出结果吧：

我们用以下代码来生成置换图：

//如果依然有水波！
 if(_weHaveWaves)
{
 this.ProcessWaves();
 
 BitmapData bmData =this.m_Bitmap.LockBits(
     new Rectangle(0,0,this.m_Bitmap.Width,this.m_Bitmap.Height), 
     ImageLockMode.ReadWrite,
     PixelFormat.Format24bppRgb);    //注意用24bpp格式！！！

int stride=bmData.Stride;    

//以下是不安全代码！！！
unsafe
{
    byte* p=(byte*)(void*)bmData.Scan0;
    for(int i=1;i<this.m_Bitmap.Width-1; i++)
    {
        for(int j=1; j<this.m_Bitmap.Height-1; j++)
        {
            //scale是缩放倍数！
            int waveX = (int)i >> _scale;
            int waveY = (int)j >> _scale;

            //check bounds
            if(waveX <= 0) waveX = 1;
            if(waveY <= 0) waveY = 1;
            if(waveX >= _waveWidth-1) waveX = _waveWidth-2;
            if(waveY >= _waveHeight-1) waveY = _waveHeight-2;

            //this gives us the effect of water breaking the light
            xOffset = (_waves[waveX-1,waveY,_activeBuffer] -_waves[waveX+1,waveY,_activeBuffer]) >> 3;
            yOffset = (_waves[waveX,waveY-1,_activeBuffer] -_waves[waveX,waveY+1,_activeBuffer]) >> 3;

            //根据偏移值，我们计算出置换图R和G通道！！！！
            //R通道！！！
            p[j*stride + i*3 + 2]=(byte)(xOffset%128+128);
            //G通道！！！
            p[j*stride + i*3 + 1]=(byte)(yOffset%128+128);
        }
    }
}

this.m_Bitmap.UnlockBits(bmData);

这样我们可以把这个置换图保存为Photoshop的PSD格式，即可被置换滤镜拿来置换了，下面是用这个置换图和它在photoshop中应用的效果，当然了，和这个控件产生的效果应该是差不多的。

这是生成置换图的工具：

这是使用代码生成的置换图：

应用于photoshop的置换滤镜以后，显然，它是预料中的结果~：

【注】上文中的水波置换图生成工具的源代码（位于菜单中）：
http://files.cnblogs.com/hoodlum1980/PsFilters.rar

今天的文章水波特效实现的原理分享到此就结束了，感谢您的阅读。