HTML5 + Javascript + WebGL を利用した物理シミュレータを構築します。 上記の環境は、現在(2012年2月)まだ標準と言えるところまではいたっていませんが、ウェブブラウザの高機能化にともなって次世代クロスプラットフォームの基幹技術として、今後益々発展していくと考えられている技術です。 最新技術の勉強ついでに、教材目的、プレゼン目的、数値データの3次元ビューアを目的としてのツールを開発していきます。
| 分野 | 量子力学 |
| アルゴリズムの導出 | 水素原子のシュレディンガー方程式の解析解 |
| 数値積分法 | 解析解のため、数値積分なし |
| 利用 Javascript ライブラリ | Three.js (Javascript 並列化計算のための WebWorker 利用) |
↓デモ画像(「水素原子の波動関数ビューア」はこちら
(1)本ビューアは、水素原子の波動関数の解析解を用いて、波動関数の振幅に比例した確率に従って点描画しています(「赤」と「青」は波動関数の正負を表します)。
(2)「K核」「L核」「M核」「N核」の各電子状態の波動関数のそれぞれに計算し(「計算ボタン」をクリック)、「描画」チェック欄にチェックを入れることで、波動関数を描画します(再計算も可)。
(3)「Web worker」と呼ばれるJavascriptの並列化技術を用いています(計算途中でも操作可能)。
(1)摂動論を取り入れた計算 → 磁場を加えることでエネルギー縮退が取れるゼーマン効果の可視化
(2)ヘリウム原子や水素分子の電子状態の可視化
| 分野 | 電磁気学 |
| アルゴリズムの導出 | クーロンの法則 |
| 数値積分法 | 中心差分法 |
| 利用 Javascript ライブラリ | Three.js |
↓デモ画像(「点電荷による電気力線シミュレータ」はこちら
(1)点電荷からの放射状に電場の向きに応じて線(電気力線)を引いています
(2)「点電荷の設定」欄にて4つの点電荷の電荷と位置を任意に設定し、「リセット」ボタンを押すとシミュレートすることができます
ただし、電荷の単位は電気素量 1.60217733*1E-19[C]、長さの単位は 1E-6[m]です。
(3)電荷の大きさを球の大きさで表現しています。
(4)「結果出力」ボタンを押すと、電気力線の座標をスペース区切りのデータを出力します
(1)等電位面の計算と描画
(2)電荷の数の動的変更
| 分野 | 解析力学+力学系 |
| アルゴリズムの導出 | 直交座標系+ラグランジュ未定定数法 |
| 数値積分法 | 4次のルンゲクッタ |
| 利用 Javascript ライブラリ | Three.js flotr2 |
↓デモ画像(「2重振り子シミュレータ」はこちら)
(1)直交座標系で記述した2重振子を4次のルンゲクッタを用いてJavascriptで計算しています
(2)計算結果をリアルタイムにcanvas要素にWebGLを用いて描画しています (canvas要素はjavascriptで動的に生成されています)
(3)グラフ描画ライブラリ flotr2 を利用して、おもりの位置(z座標)とひもの張力をリアルタイムにグラフ描画します
(4)マウスドラックとマウスホイールで視点を移動することができます
(5)各物理量がリアルタイムに表示されます
(6)「スタート」ボタンを押すと、シミュレーションを開始します
(7)「ストップ」ボタンを押すと、仮想物理実験室の時間がストップします
(8)「リセット」ボタンを押すと、フォームで設定した初期条件にてスタートします
(9)「出力」ボタンを押すと、その時刻までの「時間」「張力」「z座標」のスペース区切りのデータを出力します
(1)初期値による「非カオス」or「カオス」の定量的議論(ヤコビ行列の固有値、リアプノフ指数)
(2)カオス時におけるマルチフラクタル解析
(3)N重振り子への拡張
本稿では新しいWEBページ用の言語であるHTML5+WebGLを利用して、
ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。
本稿では、物理シミュレータの例として、任意の初期条件に対する2重振り子の時間発展を4次のルンゲクッタ法を計算する「2重振子シミュレータ」を構築します。
また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。
物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。
■ HTML5による物理シミュレーション環境の構築 ~WebGLライブラリThree.js 入門(1/3)~
■ HTML5による物理シミュレーション環境の構築 ~WebGLライブラリThree.js 入門(2/3)~
■ HTML5による物理シミュレーション環境の構築 ~WebGLライブラリThree.js 入門(3/3)~
クォータニオンによる視点の移動 (WebGL(Three.js)) 2012.04.16 【遠藤 理平|WebGL|仮想物理実験室】
N重振り子のアルゴリズムとシミュレータ 2012.04.10 【藤原 亮|仮想物理実験室|計算物理学】
HTML5による物理シミュレーション環境の構築水素原子の波動関数ビューア 2012.04.06 【遠藤 理平|仮想物理実験室|計算物理学】
HTML5による物理シミュレーション環境の構築点電荷による電気力線シミュレータ 2012.03.11 【遠藤 理平|WebGL|仮想物理実験室】
HTML5による物理シミュレーション環境の構築 ~WebGLライブラリThree.js 入門(2/3)~ 2012.02.25 【遠藤 理平|OpenGL入門|TIPS 集|WebGL|仮想物理実験室】
HTML5による物理シミュレーション環境の構築 ~WebGLライブラリThree.js 入門(1/3)~ 2012.02.20 【遠藤 理平|OpenGL入門|TIPS 集|WebGL|仮想物理実験室】
WebGLを使ってみる―2次元ガウス分布を描画― 2012.02.01 【遠藤 理平|TIPS 集|仮想物理実験室】
プランクの放射法則4.任意の温度に対する完全導体中の電磁波シミュレーション 2012.01.06 【遠藤 理平|仮想物理実験室|計算物理学】
プランクの放射法則3.完全導体で囲まれた空洞における各電場モード振幅の温度依存性 2011.12.30 【遠藤 理平|仮想物理実験室|計算物理学】
プランクの放射法則1.プランクの法則の解析解 2011.12.30 【遠藤 理平|仮想物理実験室|計算物理学】
異なる媒質の境界における電磁波と電子波【2-6】境界面における平面波電子波の時間発展 2011.12.21 【遠藤 理平|仮想物理実験室|計算物理学】
異なる媒質の境界における電磁波と電子波【2-5】境界面における平面波電磁波の時間発展 2011.12.21 【遠藤 理平|仮想物理実験室|計算物理学】
プランクの放射法則2.完全導体で囲まれた空洞における電磁波の基本モード 2011.12.14 【遠藤 理平|仮想物理実験室|計算物理学】
異なる媒質の境界における電磁波と電子波【2-3】電子波に対する透過係数と反射係数の導出 2011.12.08 【遠藤 理平|仮想物理実験室|計算物理学】
異なる媒質の境界における電磁波と電子波【2-2】電磁波に対する透過係数と反射係数の導出 2011.12.05 【遠藤 理平|仮想物理実験室|計算物理学】
異なる媒質の境界における電磁波と電子波【2-1】異なる媒質の境界における波動の一般論 2011.12.01 【遠藤 理平|仮想物理実験室|計算物理学】
2次元量子力学における調和振動子任意の初期空間分布+任意の中心運動量に対する時間発展 2011.11.25 【遠藤 理平|仮想物理実験室|計算物理学】
1次元量子力学における調和振動子任意の初期空間分布+任意の中心運動量に対する時間発展 2011.11.23 【遠藤 理平|仮想物理実験室|計算物理学】
1次元量子力学における調和振動子任意の初期運動量分布+任意の初期中心座標に対する時間発展 2011.11.23 【遠藤 理平|仮想物理実験室|計算物理学】
解析力学の勉強会の案内 2011.11.22 【遠藤 理平|仮想物理実験室|計算物理学】
1次元量子力学における調和振動子任意の初期運動量分布に対する時間発展 2011.11.22 【遠藤 理平|仮想物理実験室|計算物理学】
1次元量子力学における調和振動子n励起状態の運動量表示 2011.11.16 【遠藤 理平|仮想物理実験室|計算物理学】
1次元量子力学における調和振動子コヒーレント状態の時間発展 2011.11.13 【遠藤 理平|仮想物理実験室|計算物理学】
1次元量子力学における調和振動子コヒーレント状態の空間分布 2011.11.12 【遠藤 理平|仮想物理実験室|計算物理学】
1次元量子力学における調和振動子任意の初期状態に対する時間発展 2011.11.08 【遠藤 理平|TIPS 集|仮想物理実験室|計算物理学】
1次元量子力学における調和振動子単一エネルギーの時間発展 2011.11.08 【遠藤 理平|TIPS 集|仮想物理実験室|計算物理学】
任意の関数をエルミート多項式で展開する 2011.11.05 【遠藤 理平|TIPS 集|仮想物理実験室|計算物理学】
エルミート多項式の規格化 2011.11.05 【遠藤 理平|TIPS 集|仮想物理実験室|計算物理学】
エルミート多項式の直交性を確かめる 2011.11.04 【遠藤 理平|TIPS 集|仮想物理実験室|計算物理学】
Open Dynamics Engine 入門【9日目】3DポリゴンファイルSTLの取り込み 2011.02.28 【遠藤 理平|ODE入門|仮想物理実験室】
Open Dynamics Engine 入門【8日目】デモ「バスケットボール」 2011.02.27 【遠藤 理平|ODE入門|仮想物理実験室】
Open Dynamics Engine 入門【7日目】落下するうさぎ 2011.02.25 【遠藤 理平|ODE入門|仮想物理実験室】
Open Dynamics Engine 入門【6日目】円柱と球 2011.02.22 【遠藤 理平|ODE入門|仮想物理実験室】
Open Dynamics Engine 入門【5日目】デモ「こま」 2011.02.16 【遠藤 理平|ODE入門|仮想物理実験室】
Open Dynamics Engine 入門【4日目】デモ「いもむし」 2011.02.13 【遠藤 理平|ODE入門|仮想物理実験室】
Open Dynamics Engine 入門【3日目】デモ「カードタワー」 2011.02.13 【遠藤 理平|ODE入門|仮想物理実験室】
Open Dynamics Engine 入門【2日目】オブジェクトのジョイント 2011.02.12 【遠藤 理平|ODE入門|仮想物理実験室】
Open Dynamics Engine 入門【1日目】球の描画と衝突判定 2011.02.11 【遠藤 理平|ODE入門|仮想物理実験室】
2重振子のC++プログラムソース(直交座標系+ルンゲクッタ) 2010.12.24 【遠藤 理平|仮想物理実験室】
gnuplotでアニメーションgnuplotでフラクタル(Tree) 2010.12.07 【遠藤 理平|TIPS 集|仮想物理実験室】
gnuplotでアニメーションgnuplotでルンゲクッタ法 2010.12.06 【遠藤 理平|TIPS 集|仮想物理実験室】
【波動論4】任意の周期関数をフーリエ変換+逆フーリエ変換する 2010.10.26 【遠藤 理平|TIPS 集|仮想物理実験室】
【波動論3】ステップ関数のフーリエ級数展開 2010.10.22 【遠藤 理平|TIPS 集|仮想物理実験室|備忘録】
【波動論4】デルタ関数の定義 2010.10.16 【遠藤 理平|TIPS 集|仮想物理実験室】
シュレディンガー方程式に従う粒子の時間発展無限に深い2次元井戸型ポテンシャル3 2010.10.13 【遠藤 理平|仮想物理実験室】
シュレディンガー方程式に従う粒子の時間発展無限に深い2次元井戸型ポテンシャル2 2010.10.13 【遠藤 理平|仮想物理実験室】
シュレディンガー方程式に従う粒子の時間発展無限に深い2次元井戸型ポテンシャル 2010.10.13 【遠藤 理平|仮想物理実験室】
【波動論2】フーリエ級数展開2:f=x^2 2010.10.12 【遠藤 理平|TIPS 集|仮想物理実験室】
【波動論1】フーリエ級数1:f=x 2010.10.09 【遠藤 理平|TIPS 集|仮想物理実験室】
シュレディンガー方程式に従う粒子の時間発展2次元自由粒子 2010.09.27 【遠藤 理平|仮想物理実験室】
シュレディンガー方程式に従う粒子の時間発展無限に深い井戸型ポテンシャルの時間発展2 2010.09.25 【遠藤 理平|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室シュレディンガー方程式に従う粒子の時間発展2:無限に深い井戸型ポテンシャルの時間発展 2010.09.22 【遠藤 理平|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室波動方程式のテスト 2010.09.17 【遠藤 理平|TIPS 集|仮想物理実験室】
夏休みコンピュータ・シミュレーション講座の課題 2010.08.18 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【3-4】円柱と球の衝突(2次元) 2010.06.11 【遠藤 理平|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【3-2】壁と球の衝突 2010.06.11 【遠藤 理平|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【3-5】球と球の衝突(1次元) 2010.05.01 【遠藤 理平|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【3-7】球と球の衝突(3次元) 2010.04.28 【遠藤 理平|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【3-6】球と球の衝突(2次元) 2010.04.28 【遠藤 理平|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-5】等加速度円運動 2010.03.31 【遠藤 理平|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-4】等速度円運動 2010.03.30 【遠藤 理平|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-11】ばね弾性力+重力がある場合の運動:多重連結ばねの運動 2010.03.21 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-10】ばね弾性力+重力がある場合の運動:単振動運動(3次元) 2010.03.06 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-9】ばね弾性力による運動:単振動運動(2次元) 2010.03.01 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-3-4】等加加速度直線運動の解析解の導出 2010.02.27 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-3-3】等加加速度直線運動のグラフ化 2010.02.25 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-8】ばね弾性力による運動:単振動運動(1次元) 2010.02.23 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-2-8】微分・積分を利用した等加速度直線運動の解析解の導出 2010.02.21 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-7】重力+空気抵抗力による運動:斜方投射運動 2010.02.18 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-6】重力+空気抵抗力による運動:自由落下運動 2010.02.06 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-5】重力による運動:斜方投射運動2 2010.01.27 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-2-4】階差数列を用いた等加速度直線運動の解析解の導出 2010.01.24 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-4】重力による運動:斜方投射運動 2010.01.20 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-1-5】等差数列を用いた等速度直線運動の解析解 2010.01.18 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-1-4】等速度直線運動のグラフ化 2010.01.13 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-3】重力による運動:水平投射運動 2010.01.13 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-2】重力による運動:鉛直投射運動 2010.01.12 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-1】重力による運動:自由落下運動 2010.01.11 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【2-1-1】加速度・力・質量の関係:ニュートンの運動方程式 2010.01.10 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-2-3】等加速度直線運動をグラフ化する 2010.01.02 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【0.1日目】グラフ作成ソフト gnuplot のインストールと使い方 2009.12.31 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-1-3】等速度直線運動のシミュレーション 2009.12.28 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室【1-1-2】等速度直線運動のアルゴリズムの導出 2009.12.28 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
VisualC++ と OpenGL を利用した仮想物理実験室仮想物理実験室の構築 (ver1.0) 2009.12.09 【遠藤 理平|コンピュータ・シミュレーション講座 授業日誌|仮想物理実験室】
ガウシアン型の平面波を誘電体円柱にぶつけてみたときの様子 2009.10.22 【遠藤 理平|仮想物理実験室】
|
|
学都「仙台・宮城」サイエンス・デイ2012ホームページをリニューアルしました! 2012.05.14 【遠藤 理平|学都「仙台/宮城」サイエンス・デイ2012】 |
|
|
やってみようさんの集中講座(小学校4~6年生・中学生対象) ライントレースカーを作ってみよう! 2012.05.01 【八重樫 和之|入門編】 |
|
|
やってみようさんの集中講座(小学生高学年対象) 7セグメントLEDで好きな数字を表示させよう!(小学生高学年対象) 2012.05.01 【八重樫 和之|入門編】 |
|
|
やってみようさんの集中講座(小学生低学年対象) LEDで絵や文字をつくってみよう! 2012.05.01 【八重樫 和之|入門編】 |
|
|
gnuplot の進化? gnuplot の HTML5 (canvas 要素)化について 2012.04.24 【遠藤 理平|TIPS 集】 |
|
|
クォータニオンによる視点の移動 (WebGL(Three.js)) 2012.04.16 【遠藤 理平|WebGL|仮想物理実験室】 |
|
|
N重振り子のアルゴリズムとシミュレータ 2012.04.10 【藤原 亮|仮想物理実験室|計算物理学】 |
![]() |
Javascript マルチスレッド処理技術 WebWorkerのサンプル 2012.04.10 【遠藤 理平|TIPS 集】 |
|
|
HTML5による物理シミュレーション環境の構築水素原子の波動関数ビューア 2012.04.06 【遠藤 理平|仮想物理実験室|計算物理学】 |
|
|
トランジスタを用いたモータ駆動 2012.04.05 【八重樫 和之|センサーの開発|実験装置開発】 |
|
|
【2012.05.18】筋電位を測定する 2012.05.18 【佐瀬 一弥|授業日誌(259)】 |
|
|
【2012.05.18】人に伝える能力も身につけましょう 2012.05.18 【ワンシット|授業日誌(259)】 |
|
|
【2012.05.17】ひとに伝えることを意識して作ろう 2012.05.17 【佐瀬 一弥|授業日誌(259)】 |
|
|
【2012.05.16】LEDの極性に注意しましょう 2012.05.16 【ワンシット|授業日誌(259)】 |
|
|
【2012.05.15】電子工作の基礎から学ぼう 2012.05.15 【ワンシット|授業日誌(259)】 |