つみきのアプリエンジニア、鈴木慎吾です。
このブログでは様々な技術についてのレポートを公開していきたいと思いますが、まずはひとつのテーマに絞って連載をしていきます。それが「Javascriptで物理シミュレーション」です。

---

はじめての記事となる今回は物理シミュレーションの初歩として、pタグとCSSでボールをつくり、それの基本的な物理運動をJavascriptで再現してみます。

等速運動

まずは、等速運動。一定の速度で物体が移動する運動です。
Ball()はボールの座標x,y、座標を画面に反映するupdatePosition関数を値に持ったオブジェクトを返します。startAnimation()でアニメーションを開始して、setIntervalでonTimer()を定期的に実行します。onTimer()が実行されるごとにBall()で作成されたオブジェクトのx座標に速度vが加算され、画面に反映されます。

等加速運動

次は等加速運動。一定の加速度で速度が変化する運動です。
変数に加速度aを追加して、onTimer()が実行されるごとに速度vに加速度aを加算します。

初速度となるvを正の値に加速度aを負の値にすると行って戻ってくる動きになります。