振り子 - Three.js を用いた力学シミュレーション

サンプル: 振り子

課題

デモを動かしてみよう
デモでエネルギーの保存が成り立っていることを確認しよう
ソースコードをダウンロードして, ローカル環境で動かしてみよう
ボールの質量を変えてみよう
紐の長さを変えてみよう (ボールの初期位置か紐の支点のどちらかを変更します)
ボールの初速度を変えてみよう
棒人間を変更してみよう
霧 (フォグ) を追加してみよう

このサンプルで使われている技術について

プログラミング言語: javascript と coffeescript

javascript は web ページで動的な内容を表すのに標準的に用いられるスクリプト言語です. あらゆる web ページで用いられていますが, 例を挙げると Google マップなど.

C 言語などと比較すると速度は遅いですが, 各ブラウザ・メーカーが競って高速化を進めてきたため初期に比べれば非常に高速に動作するようになっています. また何より web ブラウザがあれば実行できるので, 今回のような実験のためには手軽です.

coffeescript は javascript の文法を改良した言語で, 実行時には (自動で) javascript に変換された上でブラウザ上で動きます.
(注意: coffeescript は最近は使われなくなってきているので, これから勉強する場合は代わりに typescript などの言語を学ぶのがおすすめです)

javascript の参考リンク:

coffeescript の参考リンク:

CoffeeScript入門（前編） ― CoffeeScriptの基本構文 - Build Insider --- 日本語の紹介記事
The Little Book on CoffeeScript --- 日本語の書籍
CoffeeScript --- 公式サイト. "TRY COFFEESCRIPT" から coffeescript を試すことができる

3次元描画: Three.js

web ブラウザ上で 3 次元描画などを行うための規格である WebGL を, javascript から簡単に操作できるようにしたライブラリ. 以下の公式サイトでは様々なサンプルを見ることができる.

three.js - Javascript 3D library --- 公式サイト

ソースコードについて

ソースコードの zip ファイルには以下のファイルが含まれています.

pendulum/
- index.html -- このファイルをブラウザで開いて下さい. すると以下のファイルは自動で読み込まれます
- coffee/
  - Ball.coffee -- ボールを表す
  - Floor.coffee -- 床を表す
  - GUI.coffee -- GUI (マウス操作や, FPSモニタやコントロールなどの画面表示) を担当する
  - Human.coffee -- 棒人間を表す
  - Main.coffee -- メイン (ここからプログラムの実行が開始される)
  - Mixin.coffee -- (補助用のクラス)
  - ThreeExts.coffee -- (補助用のクラス)
  - Trail.coffee -- ボールの軌跡を表す
  - Verlet.coffee -- 力学の数値計算用の関数を含む
- js/ -- Three.js などのライブラリが入っているフォルダ

下記を参考に chrome を --allow-file-access-from-files オプションをつけて起動したら, ドラッグ & ドロップして index.html を開いてみましょう. web 上でのデモと同じように表示されるはずです.

そのあとプログラム (*.coffee ファイル) を変更してみましょう. 変更を保存した後 chrome で F5 キーを押してページを再読み込みすると変更内容が反映されます. (プログラムを一度にいろいろ変更しようとすると, うまく動かなくなった時にわけがわからなくなってしまうので, 少し変更したらすぐに F5 で確認するようにしましょう)

解説: 「ニュートンの運動方程式を数値計算により解く」とは?

このソースコードでは「ニュートンの運動方程式を数値計算により解く」ことにより物体の運動をシミュレーションしています. 以下ではその意味を簡単に説明します. 詳しい説明は前述の参考サイトの以下の項などをみて下さい.

速度が位置の時間微分 , 加速度が速度の時間微分であることを思い出すと, 加速度は位置の2階微分だから, ニュートンの運動方程式 F = ma は

と書ける. このような微分を含む方程式のことを微分方程式と呼ぶ. "微分方程式の解" とはこの方程式を満たす関数 x(t) のことで, つまり物体の運動である.

もっと簡単な微分方程式の例として,

を考えよう.

上記の微分方程式が v = 1, すなわち速度 1 の等速度運動を表していることに気づけば,

x(t) = t + x₀ ( x₀ は定数 (最初の位置を表す) )

が解だとわかる. 実際, これが解であることはもとの微分方程式に代入すればすぐに確かめられる.

しかしここでは別の考え方 (数値解法) をしてみる. まず, もとの微分方程式の中の微分を単なる分数 dx÷dt だと思ってしまって, 方程式を以下のように変形する:

dx = dt .

これは, 「わずかな時間 dt 経過したら, 位置 x も同じだけ増加する (x の増加分 dx が dtと等しい)」と読めるので, 「少し時間がたつたびに, 次の位置を求め」ながら位置をアップデートしてゆくという目的に使うことができる.

このように, 微分方程式の数値解法とは, 実際にわずかに t を変化させ (例えば 0.001秒), そのたびごとに次の位置 x を計算で求めながら実際の運動 x(t) を構成してゆく手法である. 今回の力学シミュレーションでも, 1秒のうちに何百回もこのような計算を繰り返すことで, ニュートンの運動方程式を解きながらアニメーションを描画している. (Verlet.coffee で数値解法アルゴリズムの Verlet 法を定義し, Ball.coffee から呼び出して使っています. 興味のある人は見てみて下さい)