Javascriptで物理シミュレーション(単振動をインタラクティブに)

今回は前々回の「単振動・空気抵抗」を利用してインタラクティブなコンテンツを作ってみます。

振動の支点になっていたsx,syに、今回はマウス座標を設定します。
マウス座標はmousemoveイベントから取得します。(35〜38行目)

また、複数のボールの描画にも対応できるように、
速度(vx, vy)、加速度(ax, ay)と外部から受けた力(fx, fy)はBall関数内の変数します。(74〜76行目)

速度(vx, vy)、加速度(ax, ay)と外部から受けた力(fx, fy)はBall関数内に持つことによって、 以下のように複数のBallを描画することも可能です。
ball1はマウス座標を支点として振動し、(63〜64行目)
ball2はball1座標を支点として振動します。(72〜73行目)

ここまで画面の描画にDOMを利用していたのですが、
Ballの各パラメーターの計算と、画面に描画するコードを予め分離しておけば Canvasへの移行も比較的簡単に可能です。

setStage()関数でcanvasを設定し、(55〜60行目)
取得したContextオブジェクトをBall()関数の引数に渡します。(31〜32行目)
Ballの描画は、Ball()関数が返すインスタンスに定義しているupdatePosition()関数に記述します。(141〜143行目)
また、Ballを描画する前に、前フレームでの描画をクリアします。(92行目)

また、画面をクリアする目的で使用していた

ctx.clearRect(0, 0, windowW, windowH);

ctx.fillStyle = "rgba(255, 255, 255, 0.15)"; 
ctx.fillRect(0, 0, windowW, windowH);

のように、半透明の白で描画するように変更すると面白い効果が得られます。

半透明の白を描画することで、過去の描画内容が少しづつ薄くなりつつ残り、残像のような効果を得られます。
また、半透明の白で描画する際、

ctx.globalCompositeOperation = 'lighter';//(93行目)

と減算で描画することで、微妙にCanvasに薄いグレーが残るのを防ぎます。
半透明の白を描画した後は、

ctx.globalCompositeOperation = 'source-over';//(98行目)

で描画のブレンドモードをデフォルト値に戻します。

このようにCanvasを利用することで、より幅の広い表現が可能になります。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ