一种实现图像雨滴滴落、划动波纹特效的方法及系统与流程

本发明涉及视觉特效技术，具体涉及一种实现图像雨滴滴落、划动波纹特效的方法及系统。

背景技术：

目前，在这个移动互联网盛行的时代，电子移动终端得到普及，基于移动终端的图像处理应用越来越受大众欢迎。同时，用户也越来越注重体验。那些能给用户带来好的视觉感受的产品，往往能占据很大的市场。结合目前的各种短视频社交app，制作有趣的特效视频，可以有效的提升用户体验效果。

公开号为cn101814006a的发明专利申请公开了一种实现水波纹特效的方法和装置，该方法包括：在界面设定水波纹特效的矩形区域，获取所述矩形区域内的图像作为原图像；设置原图像所有顶点的初始水波高度值及石头的参数；在移动终端的界面上有点击发生时，以被点击的顶点位置作为投石点，周期性产生下一帧驱动消息，在每次下一帧驱动消息产生时，获得下一帧图像各顶点的水波高度值并记录；根据下一帧图像各顶点的水波高度值，获取顶点偏移量，将原图像各顶点按照顶点偏移量重新进行位置排列得到下一帧图像，并显示。当界面是触摸屏幕时，图像会根据用户触碰的点产生水波纹的视觉特效，从而能够与用户产生交互，具有较好的用户体验。

然而，上述发明仅能在限定的矩形区域实现水面投石的特效，而不能在图像或视频的任意区域实现相应的特效。此外，现有的图像特效实现方法单一，不能实现丰富多样的特效，用户体验效果差。

因此，如何实现丰富的图像特效，提升用户的体验，这是本领域亟待解决的问题。

技术实现要素：

本发明的目的是针对现有技术的缺陷，提供了一种实现图像雨滴滴落、划动波纹特效的方法及系统。通过为图像实现雨滴滴落、划动波纹特效，丰富了图像特效，提升了用户体验。

为了实现以上目的，本发明采用以下技术方案：

一种实现图像雨滴滴落、划动波纹特效的方法，包括：

s1、从图像或视频中选取任意图像作为初始水面纹理图；

s2、定义水波高度网格模拟水面，初始化每个顶点的水波高度值为0，模拟平静的水面；

s3、当用户选择雨滴滴落特效类型时，检测屏幕是否发生点击操作，若是，在随机位置滴落雨滴，以点的形式存储各雨滴位置和时间，各雨滴的初始位置作为中心点；当用户选择划动波纹特效类型时，检测屏幕是否发生划动操作，若是，以点的形式存储滑动位置和时间，各滑动触摸初始位置作为中心点；

s4、在水波在传导过程中，所有点随时间推移而改变，根据波的传播公式计算下一帧图像每个顶点的水波高度值；

s5、根据水波高度值，获取相应像素偏移量，将原图像各像素按照像素偏移量发生形变，从而得到下一帧图像。

进一步地，所述水波高度值为：

h(x)＝f(x)/(k1/time)/(radius*k2)²

其中，k1和k2分别为调节系数，time为水波传播时间，randius为水波半径，具体为：

randius＝len(positionhit-positon)

len为两点之间欧式距离函数，positionhit为中心点的坐标位置，position为采样点坐标位置；f(x)为：

f(x)＝-a*cos(x*b+c)+d

其中，系数a控制振幅，系数b控制周期|频率，系数c控制x轴方向位移，系数d控制控制y轴方向位移。

进一步地，对于雨滴滴落特效，所述步骤s5具体为：

采样上下左右四个点计算水平和垂直方向的高度值计算该点所在三角面的法线向量，采上下左右四个点的位置具体为：

left＝position(x-offset,y)

right＝position(x+offset,y)

up＝position(x,y+offset)

down＝position(x,y-offset)

其中，x和y分别为该顶点的横纵坐标，offset为偏移量；

假设平行光垂直射入水面，法线的计算公式如下：

normal＝cross((right-left),(up-down))

其中，cross(·,·)为向量叉积计算；

通过向量叉积计算法线向量normal后，根据法向量计算光的折射向量，根据折射向量对顶点位置作相应的偏移。

进一步地，对于划动波纹特效，所述步骤s5具体为：

将每个顶点的左右两个顶点的水波高度值的差值右移指定位，作为水平偏移量，上下两个顶点的水波高度值的差值右移指定位，作为垂直偏移量，下一帧图像中，每个顶点都由该顶点的坐标加上相应的水平偏移量和垂直偏移量后，所对应的原图像上的顶点填充。

进一步地，所述步骤s3还包括：

当出现多个滴落位置或多个触摸位置时，通过h(x)依次叠加每个中心点在当前顶点产生的水波高度值，作为该顶点的最终高度值。

进一步地，所述方法还包括：

用户对水波的大小参数进行设置；

将特效化后的图像保存或分享到社交平台。

本发明还提出一种实现图像雨滴滴落、划动波纹特效的系统，包括：

加载模块，用于从图像或视频中选取任意图像作为初始水面纹理图；

初始化模块，用于定义水波高度网格模拟水面，初始化每个顶点的水波高度值为0，模拟平静的水面；

触发检测模块，用于当用户选择雨滴滴落特效类型时，检测屏幕是否发生点击操作，若是，在随机位置滴落雨滴，以点的形式存储各雨滴位置和时间，各雨滴的初始位置作为中心点；当用户选择划动波纹特效类型时，检测屏幕是否发生滑动操作，若是，以点的形式存储滑动位置和时间，各滑动触摸初始位置作为中心点；

水波高度计算模块，用于在水波在传导过程中，所有点随时间推移而改变，根据波的传播公式计算下一帧图像每个顶点的水波高度值；

偏移处理模块，用于根据水波高度值，获取相应像素偏移量，将原图像各像素按照像素偏移量发生形变，从而得到下一帧图像。

进一步地，所述水波高度值为：

h(x)＝f(x)/(k1/time)/(radius*k2)²

其中，k1和k2分别为调节系数，time为水波传播时间，randius为水波半径，具体为：

randius＝len(positionhit-positon)

len为两点之间欧式距离函数，positionhit为中心点的坐标位置，position为采样点坐标位置；f(x)为：

f(x)＝-a*cos(x*b+c)+d

其中，系数a控制振幅，系数b控制周期|频率，系数c控制x轴方向位移，系数d控制控制y轴方向位移。

进一步地，对于雨滴滴落特效，所述偏移处理模块包括：

采样上下左右四个点计算水平和垂直方向的高度值计算该点所在三角面的法线向量，采上下左右四个点的位置具体为：

left＝position(x-offset,y)

right＝position(x+offset,y)

up＝position(x,y+offset)

down＝position(x,y-offset)

其中，x和y分别为该顶点的横纵坐标，offset为偏移量；

假设平行光垂直射入水面，法线的计算公式如下：

normal＝cross((right-left),(up-down))

其中，cross(·,·)为向量叉积计算；

通过向量叉积计算法线向量normal后，根据法向量计算光的折射向量，根据折射向量对顶点位置作相应的偏移。

进一步地，对于划动波纹特效，所述偏移处理模块包括：

将每个顶点的左右两个顶点的水波高度值的差值右移指定位，作为水平偏移量，上下两个顶点的水波高度值的差值右移指定位，作为垂直偏移量，下一帧图像中，每个顶点都由该顶点的坐标加上相应的水平偏移量和垂直偏移量后，所对应的原图像上的顶点填充。

经由上述的技术方案可知，与现有技术相比，本发明提出了一种实现图像雨滴滴落、划动波纹特效的方法及系统，克服了现有技术中实现的特效效果单一的问题，通过实现丰富多样的特效，进一步提升了用户的体现。同时，为用户提供交互接口，用户可以自定义设置波纹大小等，提高了用户的参与感，能够为不同的用户个性化定制相应的特效效果，满足人们的创作需求和作品欣赏。

附图说明

图1是实施例一提供的一种实现图像雨滴滴落、划动波纹特效的方法流程图；

图2是实施例二提供的一种实现图像雨滴滴落、划动波纹特效的水波高度网格图。

图3是实施例二提供的一种实现图像雨滴滴落、划动波纹特效的系统结构图。

具体实施方式

以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。

需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构想，遂图式中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。

下面结合附图和具体实施例对本发明作进一步说明，但不作为本发明的限定。

实施例一

如图1所示，本实施例提出了一种实现图像雨滴滴落、划动波纹特效的方法，包括：

s1、从图像或视频中选取任意图像作为初始水面纹理图；

本发明用户通过与移动终端界面进行交互，选择输入作为特效的水面纹理文件，文件可以为图像或视频。用户通过编辑界面输入图像或视频文件，该输入文件作为水波纹特效的水面纹理。视频文件可视为多帧的图像，本发明对每帧图像文件的处理进行说明。用户可以通过相应的编辑界面面进行选择加载本地文件，也可以直接拍摄生成相应的文件。

s2、定义水波高度网格模拟水面，初始化每个顶点的水波高度值为0，模拟平静的水面；

由于水面和地形本质类似，都可以通过网格来表示，不同之处是水面有起伏。如图2所示，初始化的水面纹理文件加载后，可以对水面纹理图建模，设置覆盖整个文件的水波高度网格。网格的长和宽计算公式如下：

w＝width/n

h＝height/n

其中，width和height分别为水波纹特效的水面纹理的宽和高,n为比例系数。

若初始水波高度值设定不为0，则会对最终的水波纹产生干涉的效果。因此，本发明将每个顶点的水波高度值初始化0，模拟平静的水面。

s3、当用户选择雨滴滴落特效类型时，检测屏幕是否发生点击操作，若是，在随机位置滴落雨滴，以点的形式存储各雨滴位置和时间，各雨滴的初始位置作为中心点；当用户选择划动波纹特效类型时，检测屏幕是否发生滑动操作，若是，以点的形式存储滑动位置和时间，各滑动触摸初始位置作为中心点；

本发明实现雨滴滴落、划动波纹特效，对于雨滴滴落，在随机位置滴落雨滴，生成水滴滴落波纹。对于划动波纹，根据滑动触屏的轨迹产生一系列位置形成水面划动波纹。

两种特效的触发方式不同。对于雨滴滴落特效类型，用户通过点击的方式触发，用户触发后，通过随机的方式随机位置滴落雨滴，并记录各雨滴的初始位置和时间，对于单个雨滴，其初始位置和时间表示为vec3(x,y,t)，其中x为雨滴的x坐标，y为y坐标，t为初始的时间。对于划动波纹特效类型，用户通过滑动触屏触发，用户触发后，记录滑动触摸的位置和时间，单个触摸的位置和时间为vec3(x,y,t)。使用pts[]数组的方式存储多个点的位置和时间。当水波纹正在进行的同时，又有新的雨滴或触摸位置出现时，同样的方式记录并添加到数组中。随着水波的传导，周期性的更新每个触发点所产生的波的传播时间，因此该数组存储了所有随时间推移所产生的一系列消息。

s4、在水波在传导过程中，所有点随时间推移而改变，根据波的传播公式计算下一帧图像每个顶点的水波高度值；

根据波的传播原理，在自然界中显然水波是圆形的，因此采样点到中心点的距离就是圆的半径，半径随着时间扩大，振幅随时间和和半径的扩大而削减。本发明采用余弦函数模拟水波的传导，根据波的传导公式依次叠加每个雨滴滴落点或滑动触摸点在当前顶点产生的水波高度值，作为该顶点的最终高度值，依次类推得到网格中所有顶点的水波高度值。

具体地，对于滴落雨滴特效，各雨滴的初始位置和时间作为中心点，对于划动波纹特效，单个触摸的位置和时间作为中心点。水波在传导过程中，所有点随时间推移而改变，波的高度值传播公式为：

f(x)＝-a*cos(x*b+c)+d

其中，系数a控制振幅，系数b控制周期|频率，系数c控制x轴方向位移，系数d控制控制y轴方向位移；

半径随着时间扩大，所述半径的计算公式如下：

randius＝time*speed

其中，time为时间，speed为波的传播速度，半径randius随时间扩大。

采样点到中心点的距离就是圆的半径，距离计算公式计算如下：

randius＝len(positionhit-positon)

其中，len为两点之间欧式距离函数，positionhit为中心点的坐标位置，position为采样点坐标位置，根据欧式距离计算采样点到投石点的距离计算产生圆形波半径长度randius。

波的高度值计算公式如下：

h(x)＝-a*cos(d*b-randius)

其中，系数b为控制频率，系数a控制振幅，半径randius由randius＝len(positionhit-positon)计算所得；

振幅随时间和和半径的扩大而削减，削减计算公式如下：

a(time)＝f(x)/(k1/time)

a(randius)＝-a*cos(d*b-randius)

其中，a(time)、a(randius)分别为振幅随时间、半径的削减。

由此，得到波的高度计算公式如下：

h(x)＝f(x)/(k1/time)/(radius*k2)²

其中，k1和k2分别为调节系数。

水波在传导过程中，随时间推移而改变，周期性的更新每个中心点所产生的波的传播时间，当出现多个滴落位置或多个触摸位置时，通过h(x)依次叠加每个中心点在当前顶点产生的水波高度值，作为该顶点的最终高度值。依次类推得到网格中所有顶点的水波高度值得到网格中每个顶点的高度值。

s5、根据水波高度值，获取相应像素偏移量，将原图像各像素按照像素偏移量发生形变，从而得到下一帧图像。

雨滴滴落特效与划动波纹特效计算顶点偏移量的方式不同。对于雨滴滴落特效，根据光折射原理，高低起伏的水面导致光的折射方向不一。采样上下左右四个点计算水平和垂直方向的高度值计算该点所在三角面的法线向量，采上下左右四个点的位置具体为：

left＝position(x-offset,y)

right＝position(x+offset,y)

up＝position(x,y+offset)

down＝position(x,y-offset)

其中，x和y分别为该顶点的横纵坐标，offset为偏移量。

假设平行光垂直射入水面，法线的计算公式如下：

normal＝cross((right-left),(up-down))

其中，cross(·,·)为向量叉积计算。

通过向量叉积计算法线向量normal后，根据法向量计算光的折射向量，根据折射向量对顶点位置作相应的偏移。

对于划动波纹特效，将每个顶点的左右两个顶点的水波高度值的差值右移指定位，作为水平偏移量，上下两个顶点的水波高度值的差值右移指定位，作为垂直偏移量，下一帧图像中，每个顶点都由该顶点的坐标加上相应的水平偏移量和垂直偏移量后，所对应的原图像上的顶点填充。

例如，该顶点的坐标设为(x,y)，将坐标为(x-1,y)和(x+1,y)的两个顶点的水波高度值的差值右移指定位，作为水平偏移量dx；将坐标为(x,y+1)和(x,y-1)的两个顶点的水波高度值的差值右移指定位，作为垂直偏移量dy，下一帧图像中，坐标为(x,y)的顶点由原图像坐标为(x+dx，y+dy)的顶点填充。

此外，为了满足不同的用户需求，用户可以对水波的大小参数进行设置，以实现不同的水波效果。此外，对于特效化后的图像，可以将其保存或分享到qq、微信等社交平台，增加相应平台的趣味性。

实施例2

如图3所示，本实施例提出了一种实现图像雨滴滴落、划动波纹特效的系统，包括：

加载模块，用于从图像或视频中选取任意图像作为初始水面纹理图；

本发明用户通过与移动终端界面进行交互，选择输入作为特效的水面纹理文件，文件可以为图像或视频。用户通过编辑界面输入图像或视频文件，该输入文件作为水波纹特效的水面纹理。视频文件可视为多帧的图像，本发明对每帧图像文件的处理进行说明。用户可以通过相应的编辑界面面进行选择加载本地文件，也可以直接拍摄生成相应的文件。

初始化模块，用于定义水波高度网格模拟水面，初始化每个顶点的水波高度值为0，模拟平静的水面；

由于水面和地形本质类似，都可以通过网格来表示，不同之处是水面有起伏。初始化的水面纹理文件加载后，可以对水面纹理图建模，设置覆盖整个文件的网格。网格的长和宽计算公式如下：

w＝width/n

h＝height/n

其中，width和height分别为水波纹特效的水面纹理的宽和高,n为比例系数。

若初始水波高度值设定不为0，则会对最终的水波纹产生干涉的效果。因此，本发明将每个顶点的水波高度值初始化0，模拟平静的水面。

触发检测模块，用于当用户选择雨滴滴落特效类型时，检测屏幕是否发生点击操作，若是，在随机位置滴落雨滴，以点的形式存储各雨滴位置和时间，各雨滴的初始位置作为中心点；当用户选择划动波纹特效类型时，检测屏幕是否发生滑动操作，若是，以点的形式存储滑动位置和时间，各滑动触摸初始位置作为中心点；

本发明实现雨滴滴落、划动波纹特效，对于雨滴滴落，在随机位置滴落雨滴，生成水滴滴落波纹。对于划动波纹，根据滑动触屏的轨迹产生一系列位置形成水面划动波纹。

两种特效的触发方式不同。对于雨滴滴落特效类型，用户通过点击的方式触发，用户触发后，通过随机的方式随机位置滴落雨滴，并记录各雨滴的初始位置和时间，对于单个雨滴，其初始位置和时间表示为vec3(x,y,t)，其中x为雨滴的横坐标，y为纵坐标，t为初始的时间。对于划动波纹特效类型，用户通过滑动触屏触发，用户触发后，记录滑动触摸的位置和时间，单个触摸的位置和时间为vec3(x,y,t)。使用pts[]数组的方式存储多个点的位置和时间。当水波纹正在进行的同时，又有新的雨滴或触摸位置出现时，同样的方式记录并添加到数组中。随着水波的传导，周期性的更新每个触发点所产生的波的传播时间，因此该数组存储了所有随时间推移所产生的一系列消息。

水波高度计算模块，用于在水波在传导过程中，所有点随时间推移而改变，根据波的传播公式计算下一帧图像每个顶点的水波高度值；

根据波的传播原理，在自然界中显然水波是圆形的，因此采样点到中心点的距离就是圆的半径，半径随着时间扩大，振幅随时间和和半径的扩大而削减。本发明采用余弦函数模拟水波的传导，根据波的传导公式依次叠加每个雨滴滴落点或滑动触摸点在当前顶点产生的水波高度值，作为该顶点的最终高度值，依次类推得到网格中所有顶点的水波高度值。

具体地，对于滴落雨滴特效，各雨滴的初始位置和时间作为中心点，对于划动波纹特效，单个触摸的位置和时间作为中心点。水波在传导过程中，所有点随时间推移而改变，波的高度值传播公式为：

f(x)＝-a*cos(x*b+c)+d

其中，系数a控制振幅，系数b控制周期|频率，系数c控制x轴方向位移，系数d控制控制y轴方向位移；

半径随着时间扩大，所述半径的计算公式如下：

randius＝time*speed

其中，time为时间，speed为波的传播速度，半径randius随时间扩大。

采样点到中心点的距离就是圆的半径，距离计算公式计算如下：

randius＝len(positionhit-positon)

其中，len为两点之间欧式距离函数，positionhit为中心点的坐标位置，position为采样点坐标位置，根据欧式距离计算采样点到投石点的距离计算产生圆形波半径长度randius。

波的高度值计算公式如下：

h(x)＝-a*cos(d*b-randius)

其中，系数b为控制频率，系数a控制振幅，半径randius由randius＝len(positionhit-positon)计算所得；

振幅随时间和和半径的扩大而削减，削减计算公式如下：

a(time)＝f(x)/(k1/time)

a(randius)＝-a*cos(d*b-randius)

其中，a(time)、a(randius)分别为振幅随时间、半径的削减。

由此，得到波的高度计算公式如下：

h(x)＝f(x)/(k1/time)/(radius*k2)²

其中，k1和k2分别为调节系数。

水波在传导过程中，随时间推移而改变，周期性的更新每个中心点所产生的波的传播时间，当出现多个滴落位置或多个触摸位置时，通过h(x)依次叠加每个中心点在当前顶点产生的水波高度值，作为该顶点的最终高度值。依次类推得到网格中所有顶点的水波高度值得到网格中每个顶点的高度值。

偏移处理模块，用于根据水波高度值，获取相应像素偏移量，将原图像各像素按照像素偏移量发生形变，从而得到下一帧图像。

雨滴滴落特效与划动波纹特效计算顶点偏移量的方式不同。对于雨滴滴落特效，根据光折射原理，高低起伏的水面导致光的折射方向不一。采样上下左右四个点计算水平和垂直方向的高度值计算该点所在三角面的法线向量，采上下左右四个点的位置具体为：

left＝position(x-offset,y)

right＝position(x+offset,y)

up＝position(x,y+offset)

down＝position(x,y-offset)

其中，x和y分别为该顶点的横纵坐标，offset为偏移量。

假设平行光垂直射入水面，法线的计算公式如下：

normal＝cross((right-left),(up-down))

其中，cross(·,·)为向量叉积计算。

通过向量叉积计算法线向量normal后，根据法向量计算光的折射向量，根据折射向量对顶点位置作相应的偏移。

对于划动波纹特效，将每个顶点的左右两个顶点的水波高度值的差值右移指定位，作为水平偏移量，上下两个顶点的水波高度值的差值右移指定位，作为垂直偏移量，下一帧图像中，每个顶点都由该顶点的坐标加上相应的水平偏移量和垂直偏移量后，所对应的原图像上的顶点填充。

例如，该顶点的坐标设为(x,y)，将坐标为(x-1,y)和(x+1,y)的两个顶点的水波高度值的差值右移指定位，作为水平偏移量dx；将坐标为(x,y+1)和(x,y-1)的两个顶点的水波高度值的差值右移指定位，作为垂直偏移量dy；下一帧图像中，坐标为(x,y)的顶点由原图像坐标为(x+dx，y+dy)的顶点填充。

此外，为了满足不同的用户需求，用户可以通过初始化模块对水波的大小参数进行设置，以实现不同的水波效果。此外，对于特效化后的图像，系统还可以包括分享模块，用于将其保存或分享到qq、微信等社交平台，增加相应平台的趣味性。

由此可知，本发明提出的实现图像雨滴滴落、划动波纹特效的方法及系统，克服了现有技术中实现的特效效果单一的问题，通过实现丰富多样的特效，进一步提升了用户的体现。同时，为用户提供交互接口，用户可以自定义设置波纹大小等，提高了用户的参与感，能够为不同的用户个性化定制相应的特效效果，满足人们的创作需求和作品欣赏。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。