文/michael
前言
算法或者說數(shù)學(xué)不論對于前端和后端來來說都是有用的，對于后端自然不必多說，機器學(xué)習(xí)，深度學(xué)習(xí)都考驗著我們的數(shù)學(xué)和線性代數(shù)的本事，而對于前端來說就是動畫了~
我們先講講差分方程
先看看百度百科的定義
在數(shù)學(xué)上，遞推關(guān)系（recurrence relation），也就是差分方程（difference equation），是一種遞推地定義一個序列的方程式：序列的每一項目是定義為前一項的函數(shù)。某些簡單定義的遞推關(guān)系式可能會表現(xiàn)出非常復(fù)雜的（混沌的）性質(zhì)，他們屬于數(shù)學(xué)中的非線性分析領(lǐng)域
有性質(zhì)Δk(xn+yn)=Δkxn+Δkyn，就是說最后的函數(shù)的圖形和激勵點的初始狀態(tài)有關(guān)，并影響所有的x值。我們先看看效果吧
整個效果是動畫，這里只能上傳截圖看不出來效果，我們直接上代碼，大家可以直接復(fù)制粘貼即可看到效果（瀏覽器要支持H5哦~）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>水紋的canvas(差分函數(shù))</title>
</head>
<style type="text/css">
body{
overflow: hidden;
}
.info{
position: absolute;
top: 10%;
left: 45%;
color: #777;
}
#tips{
position: absolute;
top: 26%;
left: 43%;
color: #777;
}
.info h1{
margin-left: -20px;
margin-bottom: 10px;
letter-spacing: 10px;
font-weight: lighter;
font-size: 35px;
font-family: "Microsoft Yahei";
-webkit-user-select:none;
}
span{
height:10px;
width:25px;
display:inline-block;
cursor:pointer;
transition: height 0.2s;
}
span:hover{
height:20px;
}
#blue{
background-color:#367aec;
left:30px;
}
#purple{
background-color:#E84A5F;
left:50px;
}
#black{
background-color:#52D681;
left:70px;
}
</style>
<body>
<div class="info">
<h1>水波紋</h1>
<span id="blue" onclick="blue()"></span>
<span id="purple" onclick="purple()"></span>
<span id="black" onclick="black()"></span>
</div>
<div id = "tips">點色塊改變液體顏色</div>
<canvas id="can" style="background:#fff;" height="150"></canvas>
<script type="text/javascript">
function Vertex(x,y,baseY){
this.baseY = baseY; //水紋基線
this.x = x;
this.y = y;
this.vy = 0; // 豎直方向的速度
this.targetY = 0; //目標(biāo)位置
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;
}
var canvas = document.getElementById('can')
var ctx = canvas.getContext('2d')
var wid = window.innerWidth
var height = window.innerHeight * 3/4
var blue = function(){
color1 = "#71A4F9";
color2 = "#367aec";
}
var black = function(){
color1 = "#52D681";
color2 = "#00AD7C";
}
var purple = function(){
color1 = "#FF847C";
color2 = "#E84A5F";
}
var color1 = "#71A4F9",
color2 = "#367aec";
var vertexes = [],
verNum = 200,
diff=[],
initDiff=1000;
canvas.width = wid
canvas.height = height
var vPos = verNum / 2; //震蕩點
var limitd = 20; //緩沖
//初始化
for(var i =0;i < verNum; i++){
vertexes[i] = new Vertex(wid / (verNum - 1) * i,height/2,height / 2)
diff[i] = 0
}
//鼠標(biāo)點擊事件
canvas.addEventListener('click', clickChangediff, false)
window.addEventListener('keydown', keydownChangelimitd);
//繪制
function clickChangediff(e){
var mouse = {x:null, y:null};
if(e.pageX || e.pageY){
mouse.x = e.pageX;
mouse.y = e.pageY;
}else{
mouse.x = e.clientX + document.body.scrollLeft +document.documentElement.scrollLeft;
mouse.y = e.clientY + document.body.scrollTop +document.documentElement.scrollTop;
}
//重設(shè)差分值
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;
}
console.log(mouse.x, mouse.y)
}
function draw(){
//小矩形(其實是更大的矩形)
ctx.save()
ctx.fillStyle = color1
ctx.beginPath()
ctx.moveTo(0, height)
ctx.lineTo(vertexes[0].x, vertexes[0].y)
for(var i=1; i<vertexes.length; i++){
ctx.lineTo(vertexes[i].x, vertexes[i].y)
}
ctx.lineTo(wid,height)
ctx.lineTo(0,height)
ctx.fill()
ctx.restore()
ctx.save()
//大矩形
ctx.fillStyle = color2;
ctx.beginPath();
ctx.moveTo(0, height);
ctx.lineTo(vertexes[0].x, vertexes[0].y+5);
for(var i=1; i<vertexes.length; i++){
ctx.lineTo(vertexes[i].x, vertexes[i].y+5);
}
ctx.lineTo(wid, height);
ctx.lineTo(0, height);
ctx.fill();
ctx.restore();
ctx.save();
ctx.fillStyle="#777";
ctx.font="12px sans-serif";
ctx.textBaseline="top";
ctx.fillText("點 擊 液 體 表 面",70,canvas.height/2-20);
ctx.fillStyle="#fff";
ctx.fillText("方向鍵up和down改 變 液 體 粘 度",70,canvas.height/2+15);
ctx.fillText("液體粘稠度粘稠度 / Viscosity: "+((limitd -20)).toFixed(2)+"%",wid/2.5,canvas.height-20);
ctx.restore();
}
function update(){
initDiff -= initDiff * 0.9;
diff[vPos] = initDiff ;
facter = 0.01
//左側(cè)
for(var i=vPos-1; i>0; i--){
var d = vPos-i;
if(d > limitd){
d=limitd;
}
diff[i] -= (diff[i] - diff[i+1])*(1-facter*d);
}
//右側(cè)
for(var i=vPos+1; i<verNum; i++){
var d = i-vPos;
if(d>limitd){
d=limitd;
}
diff[i] -= (diff[i] - diff[i-1])*(1-facter*d);
}
//更新Y坐標(biāo)
for(var i=0; i<vertexes.length; i++){
vertexes[i].updateY(diff[i]);
}
}
function keydownChangelimitd(e){
//up
if(e && e.keyCode== 38){
limitd = (limitd <80) ? ++limitd : 80
}
//down
if(e && e.keyCode == 40){
limitd = (limitd > 5) ? --limitd : 5
}
}
//main
(function drawframe(){
//更新坐標(biāo)點
ctx.clearRect(0, 0, wid, height)
window.requestAnimationFrame(drawframe, canvas)
update()
draw()
})()
</script>
</body>
</html>
試過了效果我來說明下代碼：
- 核心代碼：差分方程的遞歸公式
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;
}
- 設(shè)置每個點的diff值，然后改變對應(yīng)點的Y坐標(biāo)，核心理念就是n個小直線組成的震蕩，只不過我們把每條直線的空隙去掉，整體是矩形呈現(xiàn)
- 增加趣味性，還加入了可控的小參數(shù)
function Vertex(x,y,baseY){
this.baseY = baseY; //水紋基線
this.x = x;
this.y = y;
this.vy = 0; // 豎直方向的速度
this.targetY = 0; //目標(biāo)位置
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;
}
大家可以試著更改下這些參數(shù)，曲線的頻度和幅度會有所改變~
- 還有安利下window.requestAnimationFrame這個函數(shù)，在H5動畫里還是用這個，比setInterval好用,不會丟幀哦~
結(jié)語
最近入坑大數(shù)據(jù)，但苦于對于數(shù)學(xué)公式，沒有直觀的圖形體現(xiàn)，有點學(xué)不懂了，也好久沒做個demo出來了，所以來練練手，感受下數(shù)學(xué)之美，哈哈哈~
