H5模拟水纹的变化(差分函数应用)

文/michael

前言

算法或者说数学不论对于前端和后端来来说都是有用的，对于后端自然不必多说，机器学习，深度学习都考验着我们的数学和线性代数的本事，而对于前端来说就是动画了~

我们先讲讲差分方程

先看看百度百科的定义

在数学上，递推关系（recurrence relation），也就是差分方程（difference equation），是一种递推地定义一个序列的方程式：序列的每一项目是定义为前一项的函数。某些简单定义的递推关系式可能会表现出非常复杂的（混沌的）性质，他们属于数学中的非线性分析领域

有性质Δk(xn+yn)=Δkxn+Δkyn，就是说最后的函数的图形和激励点的初始状态有关，并影响所有的x值。我们先看看效果吧

整个效果是动画，这里只能上传截图看不出来效果，我们直接上代码，大家可以直接复制粘贴即可看到效果（浏览器要支持H5哦~）

    




    
水波纹
    
    
        

点色块改变液体颜色

试过了效果我来说明下代码：

• 核心代码：差分方程的递归公式

diff[i] -= (diff[i] - diff[i+1])*(1-facter*d);

• 每次点击(click)后，这点击的地方改变震荡点的diff值。

if(mouse.y>(height/2-50) && mouse.y<(height/2 +50)){
    initDiff = 1000;
    vPos = 1 + Math.floor((verNum - 2) * mouse.x / wid);
    diff[vPos] = initDiff;
    }

• 设置每个点的diff值，然后改变对应点的Y坐标，核心理念就是n个小直线组成的震荡，只不过我们把每条直线的空隙去掉，整体是矩形呈现

• 增加趣味性，还加入了可控的小参数

function Vertex(x,y,baseY){
        this.baseY = baseY; //水纹基线
        this.x = x;
        this.y = y;
        this.vy = 0;  //    竖直方向的速度
        this.targetY = 0; //目标位置
        this.friction = 0.15;  //水的弹力
        this.deceleration = 0.95; //减缓力
    }
        
    Vertex.prototype.updateY = function(diffVal){
        this.targetY = diffVal + this.baseY;
        this.vy += (this.targetY - this.y);
        this.vy *= this.deceleration;
        this.y += this.vy * this.friction;
    }

大家可以试着更改下这些参数，曲线的频度和幅度会有所改变~

• 还有安利下window.requestAnimationFrame这个函数，在H5动画里还是用这个，比setInterval好用,不会丢帧哦~

结语

最近入坑大数据，但苦于对于数学公式，没有直观的图形体现，有点学不懂了，也好久没做个demo出来了，所以来练练手，感受下数学之美，哈哈哈~