Canvasで跳ねるボールを動かす：重力と反発係数を変えるJavaScript実験

この記事について
この記事は、生成AIを活用した自動生成フローで作成しています。
MDNのCanvasアニメーション、requestAnimationFrame、動き軽減の一次資料を確認し、重力と跳ね返り係数を変えるJavaScript教材を制作しました。

検証ステータス：📘 公式情報・V8構文・数値計算確認済み／ブラウザ実機未確認
2026年10月31日、Daily Codeの3ファイルをGitHubに保存・読戻しし、落下・衝突・反発・床での静止条件を検査しました。GitHub Pages到達、WordPressの青い囲み、モバイル・印刷/PDFの実表示は未確認です。

ボールを落として跳ね返らせると、JavaScriptで速度・位置・加速度を扱う意味が目で見えてきます。重力を変えた場合と反発係数を変えた場合の違いを、一つずつ比較できる教材です。

今回できること

まず試す：ボールを跳ね返らせよう

🔷 3つの操作だけで体験
🏀 Canvas跳ね返りデモを開く（公開・ブラウザ動作未確認）
📘 完成版のHTML・JavaScript・README

1. 「再生」を押し、ボールが落下して跳ねるかを見る。
2. 「跳ね返り係数」を 0.80から0.45 に変更する。
3. 「リセット」し、同じ高さからもう一度動かす。

🟦 操作後はここを見る
描画領域の下にある「床からの高さ（px）」と「衝突回数」も確認してください。動きが見えづらいときは「0.2秒進める」で静止画として変化を追えます。

これらはコードから予想した期待結果で、実ブラウザの測定結果ではありません。 比較するたびに「リセット」で初期条件をそろえてください。

なぜボールは跳ねるのか

Canvasは円や線を描く領域です。JavaScriptがボールの現在位置を更新し、繰り返し描き直すことで動きが見えます。今回の教材は、画面内のピクセルを使った簡略化した物理モデルです。

縦方向の速度をvy、位置をy、加速度をg、経過秒数をdtとすると、処理の中心は以下です。

vy = vy + g * dt;          // 速度を更新する
y = y + vy * dt;          // 位置を更新する
if (y >= floor - radius) {
  y = floor - radius;     // 床の位置に戻す
  vy = -vy * restitution; // 反対方向へ跳ねる
}

このコードは考え方を示す抜粋であり、単独で実行できる完成版ではありません。Daily CodeのJavaScript本体には、ボールが床で静止した後に衝突回数を増やさない処理、タイマーの停止、動き軽減設定への対応などが含まれます。

flowchart LR
  A["再生・コマ送り"] --> B["速度・位置の更新"]
  B --> C{"床に接した？"}
  C -->|はい| D["反発係数で速度を反転"]
  C -->|いいえ| E["その位置を使用"]
  D --> F["Canvasに再描画"]
  E --> F
  F --> G["高さ・衝突回数を更新"]

ブラウザのrequestAnimationFrameは、次の再描画前に処理を呼び出すよう依頼するAPIです。高リフレッシュレートの画面で不自然な速さにならないよう、前回からの経過時間を使用します。画面を隠した場合は再生を停止し、大きな経過時間による急な移動も抑制します。

1か所変えて比べよう

跳ね返り係数を0.80に固定し、重力の設定だけを600 px/s²から1000 px/s²へ変更してください。毎回「リセット」して初期条件をそろえます。

ここで変えたのは重力だけです。反発係数も同時に変えると、どちらが違いを生んだのか判断しにくくなります。

px/s²はCanvas内のピクセル座標を用いた教材の単位です。地球の重力加速度をそのまま表すものではありません。現実の材料や機械の安全計算には利用できません。

動きを減らす設定も尊重する

⚠️ 連続アニメーションが苦手な場合
OSやブラウザの動き軽減設定（prefers-reduced-motion: reduce）が有効なとき、連続再生は無効になります。「0.2秒進める」で静止画を一つずつ観察できます。ページを開いただけでは再生しません。

通常モードも「停止」ボタンで中断でき、別タブへ移った場合は再生を止めます。スマートフォンでは内部Canvas座標720×360をCSSで縮小するため、画面下のpx値は画面の物理ピクセル数とは一致しません。

自分のPCで動かす

HTMLとJavaScriptを同じフォルダに保存し、HTMLをブラウザで開いてください。必要なら、次のコマンドでローカルサーバーを起動して localhost にアクセスします。

python3 -m http.server 8000 --bind 127.0.0.1

開くURLは http://127.0.0.1:8000/ です。WindowsでPython Launcherが利用できる場合は py -3 -m http.server 8000 –bind 127.0.0.1 でも動かせます。終了は Ctrl+C です。

うまく動かないとき

仕事・学習でどう使う？

ゲームや学習教材、状態変化を示すUIの基礎として応用できます。ただし、跳ね返りの見た目が正しいからといって現実の物理現象を検証できたことにはなりません。実務計算には実測値との照合、単位変換、境界条件、誤差評価が必要です。

床に接した瞬間の位置と速度を比べる

ボールが床に触れた瞬間は、跳ね返りの速度だけでなく、床からはみ出さない位置へ戻す処理が重要です。画面下の床へ向かって動くボールは円なので、その中心の座標を床の高さと同じにすると、下半分が床へ潜り込みます。中心の位置は床の高さから半径を引いた場所に置く必要があります。位置だけを直して下向きの速度をそのままにすると、次の更新でまた床へ入り込もうとします。反対に速度を反転して位置を直さないと、床の下から跳ね返るように見える場合があります。記事の抜粋コードが両方の処理をしているのはこのためです。

反発係数は衝突直前の速度を衝突後にどれだけ残すかを表す教材用の値です。0.80なら比較的大きな速度が残り、0.45ならより小さくなります。反発係数が半分になったからといって、跳ね上がる高さが単純に半分になるとは限りません。高さには速度や加速度、経過時間の影響もあります。同じ高さから落とし、重力を固定し、係数だけ変更したときの違いを観察してください。比較の前にリセットしていなければ、前回の速度が残って結果を読めなくなることがあります。

重力を大きくすると、床までの時間が短くなると予想できます。ただし反発係数も変えると、どちらの設定が跳ね方の違いを生んだのか分からなくなります。記事の比較表では重力を600から1000へ変える際、反発係数を0.80に固定します。このとき落下中の速度の増え方へ注目し、衝突回数だけを成功条件にしないようにします。次の実験では重力を600へ戻し、反発係数だけを0.45へ下げます。二つの実験を分ければ、加速の変化と衝突時のエネルギー損失の違いを理解しやすくなります。

時間の進め方を観察する

画面の動きは連続して見えますが、プログラムは短い時間ごとに速度と位置を更新します。経過時間を表すdtを考慮しなければ、端末の描画回数の違いで見かけの速さが変わる可能性があります。タブを切り替えて長い時間が過ぎたあと、戻った瞬間にボールが急に床を突き抜けるように動くなら、長い時間をまとめて計算した影響かもしれません。この教材ではその影響を抑える考え方を取り入れていますが、すべての環境で同じ結果を実測したわけではありません。

0.2秒進める操作では、連続した画面を眺めるのではなく、短い時間を進めた結果を静止画として観察できます。まだ床へ届いていない場合、衝突回数が増えないのは正常です。床に接したあとに衝突回数が増え続ける場合は、静止状態を毎回新たな衝突と数えていないか確認が必要です。数値だけでなく、床からの高さと同時に観察すると状態を理解しやすくなります。停止しているボールに強制的に速度を与えることと、計算結果として止まることも違います。

この教材のpx/s²はCanvas内部の座標で設定した加速度です。現実の重力や機械の材料特性の測定値ではありません。ゲームや学習教材のUIには応用できますが、現実の装置の安全性を評価する計算には使えません。動きが苦手な利用者は連続再生ではなく、コマ送りと状態表示で同じ条件を観察できます。画面の色や動きだけに重要な情報を閉じ込めないことも、実務へ応用するときの大切な観点です。

公式情報・参考資料

• MDN：Canvasの高度なアニメーション

• MDN：requestAnimationFrame()

• MDN：prefers-reduced-motion

公式資料の確認日：2026年10月31日。GitHubソース読戻しとV8構文・計算検査を実施しましたが、Pages公開と実ブラウザ動作、WordPressの青い囲み表示は未確認です。

GitHubサンプル

• Daily Code：完全版とREADME

• HTML

• JavaScript