1 / * *
2 * 2019年6月19日ON EricXieによって作成。
3。 * /
4。エクスポート デフォルトクラス頂点{
5。 静的BASE_Y = 150 ;
6 静的base_r = 10 ;
7 静止摩擦から= 0.1; // の波形ジッタリターン正常状態速度指数
8。 静的な減速= 0.95 ;
9 静的SPEED_OF_BASE_WAVE = 3 ;
10 シータ= 0 ;
11 goalY = 0 ;
12は、 アンプ= 0 ;
13であり ; X
14 Y。
15
16 コンストラクタ（PRMID、親）{
17。 この、θPRMID * = 360 /（parent.NUM - 1）; // ラジアン角。NUM NUMの値は、ステージ上のブロックを分割し、ステージが完了した波形だけ静かな期間であるように、次に、各ブロックの2πラジアンに割り当てます。
18は この .X = PRMID parent.STAGE_W * /（parent.NUM - 1。）;
19。 この .Y = Vertex.BASE_Y * + Vertex.BASE_R Math.sin、（これはにMath.PI * / 180 [、θ ）;
20である }
21れます
22 // 関数波形変動をさせ、絶えずyは各点の座標を更新し
23である updatePos（diffVal）{
24 本、θ+ = Vertex.SPEED_OF_BASE_WAVE;
25 IF（この、θ> = 360 ）{
26は 、この、θ - = 360 ;
27 }
28 この .goalY = Vertex.BASE_Y * + Vertex.BASE_R Math.sin、（これは、θにMath.PI * / 180 ）;
29 この .goalY + = diffVal;
30 この .amp + = この .goalY - この.Y;
31は、 この + = .Y この .amp * Vertex.FRICTION; // Yは正常状態バッファに摩擦バッファ率を調整する
32 本 .amp * = Vertex.DECELERATION;
33である }
34です }
/ **
* 2019年6月19日ON EricXieによって作成。
* /
インポート頂点"./Vertex.js"から、
エクスポート波デフォルトクラス{
STAGE_W = 800;
STAGE_H = 300;
NUM = 800;
MOUSE_DIFF_RATIO = 1;
AUTO_INTERVAL = 3000;
頂点= [];
mdlPt = [];
diffPt = []、[]];
のstartIndex = [0,0];
mouseOldY;
mouseNewY;
mouseDiff = 0; // mouseDiffGoalバッファ
mouseDiffGoal = 0; //マウスドラッグ位相差の後に産生されたビット
autoTimer;
autoDiff = 0; //タイマー自動的に生成された位相差
mouseYの= 0;
= 0するmouseX;
コンストラクタ（）{
この.INIT（）。
this.canvas this.createCanvas =（）;
this.ctx = this.canvas.getContext（ "2D"）。
this.animation（）;
}
createCanvas（）{
IF（this.canvas）戻りthis.canvas。
聞かせてキャンバス=のdocument.createElement（ "キャンバス"）;
Object.assign（canvas.style、{
幅： "800ピクセル"、
高さ"300ピクセル"
のbackgroundColor： "＃1 FFFFFF"、
マージン： "AUTO"
}）。
canvas.addEventListener（ "MOUSEMOVE"、this.mouseHandler.bind（この））;
キャンバスを返します。
}
mouseHandler（E）{
this.mouseX = e.clientX。
this.mouseY = e.clientY。
}
parent.appendChild（this.canvas）。
requestAnimationFrameの（this.animation.bind（この））;
this.updateMouseDiff（）;
this.updateWave（）;
}
のinit（）{
{（; I <this.NUM I ++は、I = 0を聞かせて）ための
頂点=新しい頂点（I、この）とします。
this.vertexes.push（頂点）。
//中点作成
IF（I> 1）{
this.mdlPt.push（{X：（this.vertexes [I-1]・X + this.vertexes [I] .X）* 0.5、Y：（ここ。頂点[I-1]・Y + this.vertexes [I] .Y）×0.5}）。
}
//差分
this.diffPt [0] .push（0）。
this.diffPt [1] .push（0）。
}
this.mouseNewY = this.mouseY。
IF（this.mouseNewY <0）{
}
this.mouseNewY = 0;
}もしそうでなければ（this.mouseNewY> this.STAGE_H）{
this.mouseNewY = this.STAGE_H。
}
this.mouseOldY = this.mouseNewY。
setInterval（this.generateAutoWave.bind（本）、this.AUTO_INTERVAL）。
}
updateMouseDiff（）{
this.mouseOldY = this.mouseNewY。
this.mouseNewY = this.mouseY。
IF（this.mouseNewY <0）{
this.mouseNewY = 0。
}もしそうでなければ（this.mouseNewY> this.STAGE_H）{
this.mouseNewY = this.STAGE_H。
this.mouseDiffGoal =（this.mouseNewY - this.mouseOldY）* this.MOUSE_DIFF_RATIO。
}
updateWave（）{
this.ctx.clearRect（0,0、this.STAGE_W、this.STAGE_H）;
this.mouseDiff - =（this.mouseDiff - this.mouseDiffGoal）* 0.3;
this.autoDiff- this.autoDiff * = 0.9; //波形自動速度変動とき
LET MX = this.mouseX;
IF（MX <0）{
MX = 0;
}そうでなければ（MX IF> this.STAGE_W-2）{
MX = this.STAGE_W-2;
}
this.startIndex [0 ] = 1 + Math.floor（（this.NUM -2）* MX / this.STAGE_W）; //のstartIndex [0] の波形図を示し、Math.floor有するマウスドラッグであり、
this.diffPt [1]〜[this.startIndex [ 1] - =（this.diffPt [ 1] [this.startIndex [1] - this.autoDiff）* 150。
//はx座標NUMが現在のマウスのx座標よりも小さい点取ることができるための最大値
this.diffPt [0] [this.startIndex [0]] - =（this.diffPt [0] [this.startIndex [0]] - this.mouseDiff）* 150。
//自动波
}
Dましょう。
私は聞かせて。
以下のための（I = this.startIndex [0] -1; I> = 0; i--）{
D = this.startIndex [0] -i。
IF（D> 15）{
D = 15。
}
this.diffPt [0] [1] - =（this.diffPt [0] [I] - this.diffPt [0] [I + 1]）*（1から0.01 * D）。
}
のための（I = this.startIndex [0] +1; I <this.NUM; iは++）{
D = I-this.startIndex [0]。
IF（D> 15）{
D = 15。
this.diffPt [0] [1] - =（this.diffPt [0] [I] - this.diffPt [0] [I-1]）*（1から0.01 * D）。
}
のための（I = this.startIndex [1] -1; I> = 0; i--）{
D = this.startIndex [1] -i。
IF（D> 15）{
D = 15。
}
this.diffPt [1] [1] - =（this.diffPt [1]〜[I] - this.diffPt [1]〜[I + 1]）*（1から0.01 * D）。
}
のための（I = this.startIndex [1] +1; I <this.NUM; iは++）{
D = I-this.startIndex [1]。
IF（D> 15）{
D = 15。
}
this.diffPt [1] [1] - =（this.diffPt [1]〜[I] - this.diffPt [1]〜[I-1]）*（1から0.01 * D）。
}
のための（i = 0; I <this.NUM; iは++）{
this.vertexes [I ] .updatePos（this.diffPt [0] [ I] + this.diffPt [1]〜[I]）; // 各点の更新相波形で、位相差はジッタと自動的に生成されたマウスと同じである、すなわちdiffPt [ 0] [I] + diffPt [1]〜[I]
}
（i = 0; I <this.NUM-2; I ++の）のために{
this.mdlPt [I] .Y =（this.vertexes [I + 1] .Y + this.vertexes [I + 2]・Y）* 0.5; //更新波形图上两点中点的位相、使波形图看起来更流畅
}
this.drawWave（）。
}
drawWave（）{
this.ctx.fillStyle = "＃666666"。
this.ctx.beginPath（）;
this.ctx.moveTo（this.STAGE_W、this.STAGE_H）。
this.ctx.lineTo（0、this.STAGE_H）。
this.ctx.lineTo（this.vertexes [0] .X、this.vertexes [0]・Y-50）;
this.ctx.quadraticCurveTo（this.vertexes [I] .X、this.vertexes [I]・Y-50、this.mdlPt [1- .Y-50 1] .X、this.mdlPt [I-1]）。
}
[1] [1] this.ctx.quadraticCurveTo（this.vertexes .X、this.vertexes .Y-50、this.mdlPt [0] .X、this.mdlPt [0 ] .Y-50）。
（LET I = 2、I <this.NUM-2; iは++）{ため
this.ctx.quadraticCurveTo（this.vertexes [this.NUM-2] .X、this.vertexes [this.NUM-2]・Y-50、this.vertexes [this.NUM-1] .X、this.vertexes [this.NUM-1]・Y-50）;
this.ctx.closePath（）;
this.ctx.fill（）;
}
generateAutoWave（）{
this.autoDiff = 200; //自动生成100的位相差
this.startIndex [1] =恐らくMath.round（Math.random（）*（this.NUM-1））。
}
}
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>タイトル</ TITLE>
</ HEAD>
<BODY>
<スクリプトタイプ= "モジュール">
輸入ウェーブ「./js/wave.js」。
聞かせて波 = 新しいウェーブ（）;
wave.appendTo（document.body）。
</スクリプト>
</ BODY>
</ HTML>