DAY 24
0
Modern Web

## 參考資料

### 三次方貝茲曲線 Cubic Bezier Curves

``````function vector(x, y){
this.x = x;
this.y = y;
}
function bezierCurves(x0, y0, x1, y1, x2, y2, x3, y3){
this.p0 = new vector(x0, y0);
this.p1 = new vector(x1, y1);
this.p2 = new vector(x2, y2);
this.p3 = new vector(x3, y3);
this.timestamp = Date.now();
}
``````

``````bezierCurves.prototype.Path = function(){
let P = function(a, b){
return Math.pow(a, b);
}
return {'x': x0 * (-1 * P(t ,3) + 3 * P(t ,2) - 3 * P(t ,1) + 1 )
+x1 * ( 3 * P(t ,3) - 6 * P(t ,2) + 3 * P(t ,1))
+x2 * (-3 * P(t ,3) + 3 * P(t ,2))
+x3 * ( 1 * P(t ,3)),
'y': y0 * (-1 * P(t ,3) + 3 * P(t ,2) - 3 * P(t ,1) + 1 )
+y1 * ( 3 * P(t ,3) - 6 * P(t ,2) + 3 * P(t ,1))
+y2 * (-3 * P(t ,3) + 3 * P(t ,2))
+y3 * ( 1 * P(t ,3))}
}
``````

``````bezierCurves.prototype.NextFrame = function(){
// 計算下一偵的位置(0~1)
let dT = (Date.now() - this.timestamp) / 1000 / this.lifeTime;
if(dT <= 1){
let point = bezierCurves.prototype.Path(dT);
context.save();
context.translate(pointX, pointY);
context.drawImage(mouseImg, -mouseImg.width/2, -mouseImg.height/2);
context.restore();
}
else{
// 製作一個閉環
let newObject = new bezierCurves(this.p3.x, this.p3.y,
this.p3.x * 2 - this.p2.x,
this.p3.y * 2 - this.p2.y,
this.p0.x * 2 - this.p1.x,
this.p0.y * 2 - this.p1.y,
this.p0.x, this.p0.y);
let index = animeList.indexOf(this);
delete animeList[index];
animeList[index] = newObject;
}
}
``````

``````bezierCurves.prototype.Velocity = function(){
let P = function(a, b){
return Math.pow(a, b);
}
return {'x': x0 * (-3 * P(t ,2) +  6 * P(t ,1) - 3 )
+x1 * ( 9 * P(t ,2) - 12 * P(t ,1) + 3 )
+x2 * (-9 * P(t ,2) +  6 * P(t ,1))
+x3 * ( 3 * P(t ,2)),
'y': y0 * (-3 * P(t ,2) +  6 * P(t ,1) - 3 )
+y1 * ( 9 * P(t ,2) - 12 * P(t ,1) + 3 )
+y2 * (-9 * P(t ,2) +  6 * P(t ,1))
+y3 * ( 3 * P(t ,2))}
}
bezierCurves.prototype.Acceleration = function(){
let P = function(a, b){
return Math.pow(a, b);
}
return {'x': x0 * ( -6 * P(t ,1) +  6 )
+x1 * ( 18 * P(t ,1) - 12 )
+x2 * (-18 * P(t ,1) +  6 )
+x3 * (  6 * P(t ,1)),
'y': y0 * ( -6 * P(t ,1) +  6 )
+y1 * ( 18 * P(t ,1) - 12 )
+y2 * (-18 * P(t ,1) +  6 )
+y3 * (  6 * P(t ,1))}
}
bezierCurves.prototype.Jerk = function(){
let P = function(a, b){
return Math.pow(a, b);
}
return {'x': x0 * ( -6 )
+x1 * ( 18 )
+x2 * (-18 )
+x3 * (  6 ),
'y': y0 * ( -6 )
+y1 * ( 18 )
+y2 * (-18 )
+y3 * (  6 )}
}
``````