canvas实现水波纹效果

发布者:admin 发布时间:2019-10-28 04:50 浏览次数:

  本文将会从水波的基本原理开始,详细讲解在canvas中模拟水波扩散,分析并计算水波的能量分布,并通过振幅模拟水波对图像的折射效果,最后实现水波特效。

  波是指振动的传播。波的传播方向与质点振动方向垂直的为横波,相同则为纵波,水波是横波和纵波的叠加。

  圆形波:当你投一块石头到水池中时,你会看到一个以石头入水点为圆心所形成的一圈圈的水波

  衰减:因为水是有阻尼的,所以你会看到水波越往外扩散,越弱,最后消失,水面回复平静

  水波使得图像发生折射,由于水波,使得水面凹凸不平,会折射和反射水池中的图像

  衍射,波在传播中遇到有很大障碍物或遇到大障碍物中的孔隙时,会绕过障碍物的边缘或孔隙的边缘,呈现路径弯曲,在障碍物或孔隙边缘的背后展衍。

  水波纹效果反映到图像上,其本质就是像素的偏移,相当于很多缩放的结合。因此对图像的处理就转化为如何移动图像上的像素点,从而模拟和表现出水波纹的效果。下面是本文将会实现的水波纹特效:更好的效果页面

  波的本质是振动,然后传递能量,波的表现形式就是能量的分布情况,我们使用波幅(振动幅度)来描述每一点携带的能量。

  我们可以建立两个和图像一样大小width×height的数组,用来保存水面上每一个点的前一时刻和后一时刻波幅数据。或者直接使用一个 2 ×width×height的数组,分为前半部分和后半部分来保存前后时刻的波幅数据。

  水面在初始状态时是平静的平面,各点的波幅都为0,所以,数组的所有初始值都等于0。

  由上面一小节,我们可以用$X_i$来表示图像中的任意一个像素点,其中$i$的值在0到width×height之间,我们把宽度width简记为$W$,将高度height简记为$H$,则可以用下面的集合表示图像上的像素点集合

  由于波的传播特性,某一点下一时刻的振动情况,受到周围质点的振动以及自身振动情况的联合影响。为了使问题简化,我们假设$X_i$点的振幅$A_i$除了受到自身的影响外,还受到来自它周围前、后、左、右四个点$(X_{i-W},X_{i+W},X_{i-1},X_{i+1})$的影响,并且假设这四个点对$X_i$点的影响力机会均等并且线性叠加的。那么可以得到$X_i$点的振幅公式:

  假设水的阻尼为0。在这种理想条件下,水的总势能将保持不变。也就是说在任何时刻,所有点的振幅的和保持不变。那么可以得到下面能量守恒公式:

  因为$\frac{1}{2}$可以用移位运算符“”来进行,不用进行乘除法,所以,这组解是最适用的而且是最快的。那么最后得到的下一时刻的振幅公式就是:

  得到上面这个近似公式后,如果已知某一时刻水面上任意一点的波幅,就可以求出下一时刻水面上任意一点的波幅。

  然而,在实际中是存在阻尼的,否则,用上面这个公式,一旦你在水中增加一个波源,水面将永不停止的震荡下去。

  所以,还需要对波幅数据进行衰减处理,让每一个点在经过一次计算后,波幅都比理想值按一定的比例降低。这个衰减率经过测试,用$\frac{1}{32}$比较合适,也就是$\frac{1}{2^5}$,可以通过移位运算很快的获得。

  因为水的折射,当水面不与我们的视线相垂直的时候,我们所看到的水下的景物并不是在观察点的正下方,而存在一定的偏移。

  偏移的程度与水波的斜率,水的折射率和水的深度都有关系,如果要进行精确的计算的话,显然是很不现实的。同样,我们只需要做线形的近似处理就行了。

  因为水面越倾斜,所看到的水下景物偏移量就越大,最简单的做法可以近似的用水面上某点的前后、左右两点的波幅之差来代表所看到水底景物的偏移量。

  我们将原始图像的像素信息保存在两个数组中,一个用于保存原始图像数据,一个用于实时保存实时渲染数据。这里需要注意更新图像的时候,图像的恢复问题,这里我们用一个反相器来进行恢复,一个点偏移了,我们给它一个反方向的偏移来抵消就可以恢复。

  根据偏移量将原始图象上的每一个象素复制到渲染页面上,将渲染数据绘制到canvas中即可。

  为了形成波,我们必须在平静的水面上加入波源,就像向水池中投入一个石头一样,形成的波源的大小和能量与石头的半径和你扔石头的力量都有关系。

  为了模拟波源,我们只需要修改一开始初始化的波幅分布数组即可。需要注意投入石头的地方的波幅不易过小和过大。

  另外,这个波源的半径也很好控制,只要以波源为圆心,画一个圆,让这个圆内的所有点都来一个脉冲即可。

  还有很多要完善的地方,以后会更新到github,本文所有的效果代码也可以在Git上面找到,欢迎大家star。

  在水波扩散的过程中,如果遇到障碍物,水波会绕过障碍物的边缘或孔隙的边缘,呈现路径弯曲,在障碍物或孔隙边缘的背后展衍。


上一篇:制作水波纹效果图片 水波纹效果制作软件    下一篇:《三弦》技术分享—波纹效果及其实现