Webブラウザ上で物が飛んだり、弾んだり、重力に従って落ちたりするアニメーションを見たことはありませんか？

外部の巨大な物理エンジンライブラリ（Matter.jsやBox2Dなど）を使わなくても、JavaScriptとHTML5 Canvasを使えば、基礎的な物理演算シミュレーションは驚くほど簡単なコードで実装することができます。

物理シミュレーションの3大要素

2Dの世界で物をリアルに動かすには、以下の3つの変数を毎フレーム（1秒間に60回など）更新していくのが基本です。

• 位置（x, y）：オブジェクトが現在どこにいるか
• 速度（vx, vy）：オブジェクトがどの方向にどれくらいの速さで動いているか
• 加速度・重力（gravity）：速度に毎フレーム足される力

基本のループコード

最もシンプルな「物が重力に従って落ちる」コードは以下のようになります。requestAnimationFrame を使ってこの処理を毎フレーム呼び出します。

// 変数の初期化
let y = 100;    // 現在の高さ
let vy = 0;     // 縦方向の速度
const gravity = 9.8; // 重力加速度
const dt = 0.016; // 1フレームあたりの時間（秒）

function updatePhysics() {
    // 1. 速度に重力を足す
    vy -= gravity * dt; 
    
    // 2. 位置に速度を足す
    y += vy * dt;
    
    // 3. 地面（y=0）でのバウンド判定
    if (y <= 0) {
        y = 0;
        vy *= -0.8; // 速度を反転させつつ、少し減速（反発係数）
    }
}

たったこれだけの計算で、ボールがスーパーボールのようにバウンドしながら落ちていくリアルな挙動を再現できます。

風圧や回転（トルク）を加える

さらにリアルさを追求する場合、「質量（重さ）」という概念を導入し、外部から加わる「力（Force）」を質量で割って速度に変換します。

爆風のような外力がかかった時、「軽いものは高速で吹き飛び、重いものはゆっくりとしか動かない」という表現ができ、よりシミュレーションの説得力が増します。さらに回転（rotation）の概念を加えれば、オブジェクトが空中で回転したり、建物が横に倒れたりする（Topple）挙動も作れます。

実際のシミュレーションツールで体験！

TOOL FARMでは、こうしたCanvasによる独自の物理演算エンジンをブラウザ上に実装し、様々なシミュレーションを公開しています。実際にパラメータを変えながら、ブラウザ上で何万ものオブジェクトがリアルタイムに物理演算で弾き飛ばされる様子を体験してみてください！