人間が床の線に沿って進むためには、足元の線を見ながら歩く必要があります。では、ロボットを線に沿って進ませるためには、どのような回路が必要でしょうか。本講座では、必要最小限の部品を用いて、床に引かれた線に沿って進むライントレースカーを制作します。本講座を通して、ライントレースカーが線の上を走る仕組みを理解し、そこに使われるトランジスタやセンサの仕組みを学ぶことを目的とします。
| 開講日： （２時間×４回） |
２０１２年５月２５日～６月１５日 毎週金曜日 １９：００～２１：００ ※連続してこれない場合には、平日夜に補講を行います |
| 場所： | FiveBridge（仙台市青葉区北目町４－７HSGビル３階）地図 |
| 費用： |
8,000円（2時間×4回・部品代、テキスト代、保険代込み） ※はんだごてセット（はんだごて、はんだ、はんだ吸収線、こて先クリーナー）をお持ちでない方は、別途購入（2,000円）が必要となります。 |
| 対象： | 電子工作経験のある小学校4～6年生・中学生 |
| 主催： | NPO法人 natural science |
| 後援： | 仙台市教育委員会 |
| お問い合せ： | 022-721-2035 |
| 小学校4～6年生・中学生対象 ライントレースカーを作ってみよう！ |
開講日（全４回）２０１２年５月２５日～６月１５日 毎週金曜日 １９：００～２１：００ |
７セグメントLEDはデジタル時計をはじめ、私たちの身の回りの様々な場面で使われています。日常せ活でよく目にする７セグメントLEDですが、中の仕組みはどうなっているのでしょうか。本講座は、７セグメントLEDとスイッチを用いて好きな数字を表示させる回路を制作します。７セグメントLEDで数字を表示させるには、回路図を書いて考える必要があります。本講座を通して、回路図の役割を理解することを目的とします。
| 開講日： （２時間×４回） |
２０１２年５月２３日～６月１３日 毎週水曜日 １９：００～２１：００ ※連続してこれない場合には、平日夜に補講を行います |
| 場所： | FiveBridge（仙台市青葉区北目町４－７HSGビル３階）地図 |
| 費用： |
8,000円（2時間×4回・部品代、テキスト代、保険代込み） ※はんだごてセット（はんだごて、はんだ、はんだ吸収線、こて先クリーナー）をお持ちでない方は、別途購入（2,000円）が必要となります。 |
| 対象： | 電子工作未経験の小学校4～6年生 |
| 主催： | NPO法人 natural science |
| 後援： | 仙台市教育委員会 |
| お問い合せ： | 022-721-2035 |
| 小学生高学年対象 7セグメントLEDで好きな数字を表示させよう！ |
開講日（全４回）２０１２年５月２３日～６月１３日 毎週水曜日 １９：００～２１：００ |
LEDは信号や電光掲示板、電球をはじめ、私たちの身の回りの様々な場面で使われています。LEDは身近にある電子部品ですが、その仕組みを知る機会は多くはありません。LEDを光らせるにはどうすればいいでしょうか。本講座は、複数のLEDを基板上に配線することで絵や文字を表示させる回路を制作します。本講座を通して、電気回路の仕組みを理解することを目的とします。
| 開講日： （２時間×４回） |
２０１２年５月２２日～６月１２日 毎週火曜日 １７：００～１９：００ ※連続してこれない場合には、平日夜に補講を行います |
| 場所： | FiveBridge（仙台市青葉区北目町４－７HSGビル３階）地図 |
| 費用： |
8,000円（2時間×4回・部品代、テキスト代、保険代込み） ※はんだごてセット（はんだごて、はんだ、はんだ吸収線、こて先クリーナー）をお持ちでない方は、別途購入（2,000円）が必要となります。 |
| 対象： | 電子工作未経験の小学校1～3年生 |
| 主催： | NPO法人 natural science |
| 後援： | 仙台市教育委員会 |
| お問い合せ： | 022-721-2035 |
| 小学生低学年対象 LEDで絵や文字をつくってみよう！ |
開講日（全４回）２０１２年５月２２日～６月１２日 毎週火曜日 １７：００～１９：００ |
gnuplot もその時代の流れに乗るべく動き出したようです。 gnuplot はもともと、EPS, JPG, GIF, PNG といった静的な画象を出力することができますが、 gnuplot Ver. 4.4 から HTML5 で導入された新要素である「canvas 要素」で描画するための Javascript を出力することができるようになりました。 これにより、gnuplot を起動することなしに、ウェブブラウザだけで gnuplot のグラフを動的かつインタラクティブに扱うことがでます。
下の図は GIF や JPG などの静的画象ではなく、canvas 要素に動的に描画した図です。 gniplot を使っている方はわかると思いますが、見た目は gnuplot そのものです。 canvas 要素ないで、マウスの左ボタンでドラックすることで、拡大することができます。
①や②を押すことで、描画済みのグラフの表示・非表示を切り替えることができます。
gnuplot を使ったことがある方はわかると思いますが、 これは非常に使いにくいです。 通常の gnuplot の３次元描画結果では、マウスで視点をグリグリと動かせることができますのに対して、上記のサンプルは「拡大」しかできません。 「グリグリ」が実装されていない以上、図を張るのと大差がありません。 canvas 要素は３次元描画することも可能なので、ぜひとも「グリグリ」を実装してもらいたいですね。
上のサンプルは、本家のgnuplot demo script: hidden2.demの一つです。 任意の名前のファイルを作成して下記のコードをコピー＆ペーストして、gnuplot で「load」することで作成することができます。
set terminal canvas solid butt size 600,400 fsize 10 lw 1 fontscale 1 name "hidden2_1" jsdir "." set output 'hidden2.1.js' set style fill solid 0.50 border unset key set isosamples 25, 25 set hidden3d front offset 1 trianglepattern 3 undefined 1 altdiagonal bentover set xyplane at 0 #set title "Mixing pm3d surfaces with hidden-line plots" set cbrange [ -1.00000 : 1.00000 ] noreverse nowriteback set palette rgbformulae 31, -11, 32 f(x,y) = sin(-sqrt((x+5)**2+(y-7)**2)*0.5) GPFUN_f = "f(x,y) = sin(-sqrt((x+5)**2+(y-7)**2)*0.5)" splot f(x,y) with pm3d, x*x-y*y with lines lt 1 lc rgb "#000000", f(x,y) with lines lt -2 notitle
2012年3月に google が WebGL を利用したアプリケーションが注目を集めています。 google の検索窓に「z=x^2+y^2」などと入力すると、3次元グラフを描画することができ、マウスグラックを利用して視点自在に移動することができます。 下図はその3次元グラフのキャプチャです。
WebGL とは、canvas 要素を利用したAPIの一つで、GPU を利用したレンダリングをウェブブラウザで実行するためのライブラリです（詳細は「HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～」をご覧ください）。 google WebGL ３次元グラフビューアは今のところ、google の検索窓に打ち込んたコードを検索結果に描画するだけなので、任意のページに取り込むことはできませんが、 今後の発展次第では gnuplot を超えることも考えられますね。
]]>次の図のような、座標にある物体を、回転軸ベクトルに対して角度回転させた後の座標をとなる場合を考えます。
この回転は、回転軸ベクトル（３自由度）と回転角（１自由度）の４つのパラメータで指定することができます。 クォータニオンを利用すると、はに対して２回の演算で計算することができます。 具体的な演算方法は「７０秒で分る、使える、四元数・４元数・クォータニオン・ Quaternionで回転 （中田亨氏）」をご覧ください。ウェブページのタイトル通り確かに70秒で計算できました。
クォータニオンはコンピュータグラフィックで非常によく利用されるため、クォータニオン演算のためのライブラリも存在します。 今回は、WebGL を使用する時に必要となる行列計算を、簡単に演算することのできる「glMatrix.js」を利用します。この中でクォータニオンの演算も定義されています。
glMatrix.js でクォータニオンは
var P = new quat4.create([x,y,z,w]);
で定義することができます。x,y,z は、クォータニオンの i,j,k の係数を表し、w がクォータニオンの実数部を表します。 2つのクォータニオンの積は
var P = new quat4.create([x1,y1,z1,w1]); var Q = new quat4.create([x2,y2,z2,w2]); var R = quat4.multiply(P,Q, quat4.create());
で計算することできます。
座標ベクトル v = [vx, vy, vz] を 任意の回転軸 u = [ux, uy, uz]に対して、角度 theta 回転させた後の座標ベクトルを計算する関数を定義します。
function QuaternionRotation(theta, u, v){ //(回転角, 回転軸, 座標ベクトル)
var P = new quat4.create([v[0],v[1],v[2],0]);
var Q = new quat4.create([-u[0]*Math.sin(theta/2), -u[1]*Math.sin(theta/2), -u[2]*Math.sin(theta/2), Math.cos(theta/2)]);
var R = new quat4.create([u[0]*Math.sin(theta/2), u[1]*Math.sin(theta/2), u[2]*Math.sin(theta/2), Math.cos(theta/2)]);
var S0 = quat4.multiply(P,Q, quat4.create());
var S = quat4.multiply(R,S0,quat4.create());
var V = [S[0],S[1],S[2]];
return V;
}
この関数を利用することで、簡単に回転後の座標を計算することができます。
2012年3月に google が WebGL を利用したアプリケーションが注目を集めています。 google の検索窓に「z=x^2+y^2」などと入力すると、3次元グラフを描画することができ、マウスグラックを利用して視点自在に移動することができます。 下図はその3次元グラフのキャプチャです。
視点の移動は、マウスクリック時のマウスポインタの座標を基準として、 視点の位置ベクトルと視点の上の向きを表すベクトルが、マウスの移動量 dx, dy に応じて変更することで実現することができます。 本稿では、上記のクォータニオンを利用して、2次元平面の canvas 上をマウスドラックすることで視点の移動させることを考えます。
canvas 上を横方向（移動量 dx）と縦方向（移動量 dy）にマウスドラックさせることで視点を回転させることを考えます。 ただし、視点は原点（0,0,0）を向いているとします。 一般に視点の自由度は、視点の位置ベクトル（3自由度）と視点の上の向きを表すベクトル（3自由度）の計6自由度ですが、視点は原点（0,0,0）を向いていると条件を課すと、視点の上の向きを表すベクトルは位置ベクトルと垂直となり、実質的には１自由度となりますが、 演算の都合上ベクトルで表しておきます。
次に、マウスの移動量 dx, dy と具体的な視点の移動量との関係を、視点の位置ベクトルと上向きベクトルから一意に決定する軸による回転として得られると考えます。 視点の位置ベクトル（）と上向きベクトル（）に対する回転軸の模式図は次図のとおりです。
dx に対しては（緑）軸回転、dy に対しては（青）軸回転に対応させます。
図でも示しているとおり、とから上記の２軸は、
、
と簡単に計算することができます。ここまでくればあとは前節で触れたクォータニオンを利用して軸回転後の座標を計算することで、回転後の視点の位置ベクトルがわかります。
本稿では次のステップで計算します。
１．クリック時の視点の位置ベクトル、視点の上向きベクトルを取得する。
２．とから、２つの回転軸ベクトル,を計算する。
３．マウス移動量 dx, dy から回転角度、を計算する。
４．クォータニオンを利用して、, 軸周りに、回転後の位置ベクトルを計算する。
５．クォータニオンを利用して、視点の上方向ベクトルを計算する。
次は、本稿で作成した視点の移動のサンプルです。
HTML5 canvas 要素の WebGL（Three.jsライブラリ）を用いて、表題のテストを行います。 WebGLを利用可能な環境で下のフレーム内の図をドラックしてみてください。 視点を移動することができます。
※上記のサンプルプログラムは、HTML5 のcanvas 要素を利用した WebGL を簡単に利用するためのライブラリである Three.js を利用しています。
R = new vec3.create([camera.position.x,camera.position.y,camera.position.z]); // 視点の位置ベクトルの取得 a = new vec3.create([camera.up.x, camera.up.y, camera.up.z]); // 視点の上向きベクトルの取得
ただし、vec3 は glMatrix.js で定義されている３次元ベクトルです。 とが得られました。
u = vec3.set(a, vec3.create()); // a のコピー u = vec3.normalize(u, vec3.create()); // u の規格化 w = vec3.cross(R, u ,vec3.create()); // R × u の演算 w = vec3.normalize(w, vec3.create()); // w の規格化
glMatrix.js には vec3 で定義された３次元ベクトルの演算が定義されています。
上記は「vec3.set：コピー」「vec3.normalize：規格化」「vec3.cross：外積」を意味します。
この他にも、必要な演算が定義されています。
theta_u = dx / 100; theta_w = -dz / 100;
これは適当に決めます。もし、マウスの移動量に対して速く回転させたければ、100 → 50 とし、逆に遅くしたければ 100 → 200 としてください。
視点の位置ベクトルを、回転軸ベクトルで回転後、 さらにで回転させます。
S = QuaternionRotation(theta_u, u, [camera.position.x, camera.position.y, camera.position.z]); S = QuaternionRotation(theta_w, w, [S[0],S[1],S[2]]);
４までで視点の移動は完了していますが、このままでは「google 3Dグラフ」のような操作性は実現できません。 上の模式図を見ればわかりますが、回転軸で視点を回転させると、視点の上ベクトルも回転することがわかります。つまり、
S = QuaternionRotation(theta_w, w, [camera.up.x,camera.up.y,camera.up.z]); camera.up.set(S[0],S[1],S[2]);
で視点の上ベクトルを計算することができます。 本稿では、クオータニオンを用いて視点の回転を計算しましたが、物体そのもの姿勢制御でもクオータニオンはオイラー角に比べて簡単に実装することができます。また、以上の計算は、WebGLだけでなくどのようなプログラムにも適用することができます。 今回はこんな程度で終わりにします。
]]>ここでは，シミュレーションを行うことを前提として，N重振り子の運動方程式を記述していく． また，一般的に振り子の運動を記述するときは，剛体棒の角度などを使うが， この方法は座標の数が減り解析がしやすくなる反面， 質点が剛体棒から受ける拘束力などといった情報がカットされているのだ． したがって今回は，質点のデカルト座標系における位置と質点が剛体棒から受ける拘束力 で振り子の運動を記述してみようと思う．
運動方程式を求める前に，振り子を構成する要素に名前を付ける． 振り子が固定されている点を， 固定点から数えて番目の質点の位置を， その質点の質量をとする． また，振り子の質点の数をN，重力加速度をとする． 番目の質点には，重力と， 前の質点との間に働く張力， 後の質点との間に働く張力が作用する．
これを運動方程式に書き表すと式(1)のとおりとなる．
上式における，位置，速度，張力に含まれる係数という 7N個の変数を求めれば，振り子を再現できるのだ！！ さて，求めたい変数は7N個あるのだが，式(1)は3N本しかない． どうするのか？
まず，「一階化」というテクニックや「拘束条件」を使って式の本数を7N本とし，未知変数と式の数を一致させる． この操作をすると，位置，速度をRunge-Kutta法などの差分スキームを使って求めることができる． ただ，が決まらなければ，位置，速度は決めることができないのだ． ということで，をいかに決定するかということが，ここでのヤマ場となる． 結論からいうと，に関する連立方程式を立式するのだが， いろいろなベクトル演算のテクニックを存分に活用していくので，頑張ってついてきてくれ！！
まずは「一階化」を行う． 式(1)中にある加速度は求めたい変数ではないので，これを消去したい． ということで式(1)を，との一階微分だけで表現する． これが「一階化」なのだ！
しかし，一階化しても式(2)は6N本しかないので，まだ全ての変数を決定することはできない． そこで拘束条件を考えてみる． 各質点のあいだには質点間の距離を一定に保つ拘束条件がある． この条件式は式(3)となる．
さて，これが今回のヤマ場だ！！ 運動方程式(1)と拘束条件式(3)から， 位置と速度で表現された， 張力に含まれる係数に関する連立方程式を立式する． このさえ求められれば式(2)をRunge-Kutta法などの差分スキームで存分にブン回せるのだ！
まずは下ごしらえとして，式(3)を時刻で微分する
式(4)の両辺を2で割り，さらにもう1回で微分する．
相対位置の二階微分が出てきた！ 運動方程式(1)からも，うまくを出して消去すれば，を求められそうだぞ！ ということで，式(1)の両辺を質量で割ってみる．
さてここでを出すために，番目の式から番目の式を辺々引く．
ここではどうするんだ？と思った人がいるかもしれない． は固定点なので力がつり合っておりになっている，としておこう． ここで式(7)の両辺との内積をとる．
式(5)から導かれる関係式を使って， 式(8)の左辺にある相対位置の二階微分を消そう． これでやっと加速度を消去できたな！} ついでに，後々のために右辺と左辺を入れ替えたり係数を掛ける順番を少し入れ替えておく．
さて，これはについての連立方程式になりそうだな... とりあえず式(9)を行列化してみよう． 式(9)を下記のとおりに置き換える．
ただしここで，
なのだが，は
となる． あとは，Gauss-Jordanの消去法などを用いてを求めれば完了だ！ やっとを求められたな！！おつかれっす！！
本シミュレータは、HTML5(canvas要素)＋WebGL(Three.jsライブラリ)を用いて、プラグインなし実行することができます。 ただし、クライアントサイドのブラウザとグラフィックカードが、HTML5とWebGLに対応している必要があります。
↓デモ画像（「点電荷による電気力線シミュレータ」はこちら
マルチスレッド処理と聞くと難しく感じますが、WebWorkerを実装するのは非常に簡単です。
ライブラリを別途読み込む必要すらありません。
次の４つを行います。
１．Worker クラスのオブジェクトを宣言
２．Worker に変数を送る
３．Worker で行う処理を定義
４．Worker から処理結果を受けとる
４つとも簡単なので、
次に具体的なプログラムソースを示します。
var worker = new Worker("Worker で実行する処理を記述するファイル名");
これだけです。本サンプルでは、Worker で実行する処理を記述する外部ファイル名を「worker_test.js」とします。 もちろん、オブジェクト名「worker」は任意です。
worker.postMessage( 変数名 ); //Worker に 変数を渡す
これだけです。 「worker」は１で宣言した Worker クラスのオブジェクト名で、「postMessage」は Worker クラスオブジェクトのメソッドです。 「postMessage」に引数を設定することで、外部で実行する処理にパラメータを送ることができます。 引数には普通の変数だけでなく、配列やオブジェクト（連想配列）を与えることもできます。 オブジェクトを引数として与えた例は次のとおりです。
var AA = {n:1, l:2, m:3}; //Worker に渡すオブジェクトを宣言
worker.postMessage(AA); //Worker に オブジェクトを渡す
１で指定したファイルに、２で与えたパラメータを利用して Worker で実行する処理を記述します。
onmessage = function(event) {
var AA = event.data;
//ここに処理を記述する
var results = AA;
postMessage(results);
}
「event.data」には、２の「postMessage」の引数で設定した変数が格納されています。 さらに、「postMessage」関数を用いて処理の結果を呼び出したオブジェクトに返します。 上の例では、動作確認を目的としているので、受けた変数を何も処理をせずにそのまま返しています。
３の「postMessage」関数の引数で指定した変数を元のプログラムで受け取ります。 変数が返されると、Worker クラスオブジェクトのメソッド「onmessage」が呼び出されます。
worker.onmessage = function(event) {
var BB = event.data;
}
「event.data」には、３の「postMessage」の引数で設定した変数が格納されています。 受けた処理後のデータをあとは煮るなり焼くなりするだけです。
下のボタンを押すと、データを Worker に送った後に処理を行い、 さらに Worker から受け取ったデータを出力しています。
上記サンプルプログラムは、「メイン」と「worker_test.js」の２つのソースから成り立ちます。
var worker = new Worker("worker_test.js");
worker.onmessage = function(event) {//ワーカーから受け取り
var BB = event.data;
document.getElementById("output").innerHTML = "n = " + BB.n + "
l = " + BB.l + "
m = " + BB.m;
}
function pushButton (){ //ボタンをクリックした際の処理
var AA = {n:1, l:2, m:3};
worker.postMessage(AA); // ワーカに数値を渡す
};
onmessage = function(event) {
var AA = event.data; // event.data
//ここに処理を記述する
var results = AA;
postMessage(results);
}
・HTML5のWeb Workersを使ってみた（コイケアキヨシ blog）
・Webworker の例：HTML5による物理シミュレーション～水素原子の波動関数ビューア～
以下の図はデモ画面です → 実行ページこちら
水素原子の電子状態は、電子のように非常に小さな粒子が従うシュレーディンガー方程式を解くことで理解することができます。 電子状態を表す波動関数に対するシュレーディンガー方程式は、その他の原子の場合と異なり、解析的に解くことができます。 解析解は、主量子数, 方位量子数, 磁気量子数の３つのパラメータを用いて、
と表されます。 とは、元のシュレーディンガー方程式を変数分離した際に得られる動径方向と方位角方向の解で
と
となります。式(2),(3)にある はラゲール多項式, はルジャンドル陪関数を表し、
で定義されます。ラゲール多項式は階乗を計算できれば簡単に計算することができますが、
ルジャンドル陪関数は、複数回の微分を演算する必要があるため、簡単に計算することできません。
しかしながら、漸化式を用いることで比較的簡単に計算することができます。
※ルジャンドル陪関数については「ルジャンドル陪関数の漸化式と規格化」を参考にして下さい。
式中のは長さの表す無次元量です。 本ビューアは、を単位として、１辺の長さの立方体を描画しています。 ただし、は
で定義され、はボーア半径と呼ばれ
と定義されます。
本ビューアは「WebWorker」と呼ばれる Javascript にて並列化計算を行うための技術を利用しています。 WebWorker も WeBGL と同様に、HTML5 における Javascript の標準化技術です。
var L = 80; //系のサイズ
var n_max = 4; //主量子数の最大値
var p_max = 40000;//点の数
var p_size = 0.5; //点のサイズ
var times, timesL;
var scatterPlots = new Array(n_max+1);
var workers = new Array(n_max+1);
var $id = function(id) { return document.getElementById(id); }
function init(){
//各状態のオブジェクトとワーカーの多重配列を宣言
for (var n = 1; n <= n_max; n++) {
scatterPlots[n] = new Array(n);
workers[n] = new Array(n);
for (var l = 0; l < n; l++) {
scatterPlots[n][l] = new Array(l+1);
workers[n][l] = new Array(l+1);
for(m=0; m<=l; m++) scatterPlots[n][l][m] = new Array(3);
}
}
//ワーカーの設定
for (var n = 1; n <= n_max; n++){
for (var l = 0; l < n; l++){
for (var m = 0; m <= l; m++){
workers[n][l][m] = new Worker("worker_wave.js");
for(var i=0; i<=2; i++) scatterPlots[n][l][m][i] = new THREE.Object3D();
workers[n][l][m].onmessage = function(event) {//ワーカーから受け取り
var Ps = event.data;
var n = Ps.n; var l =Ps.l; var m =Ps.m;
var Xs = Ps.x;
var Ys = Ps.y;
var Zs = Ps.z;
var mat = new THREE.ParticleBasicMaterial({vertexColors:true, size: p_size});
var pointGeos = new Array(3);
for(var i=0; i<=2; i++) pointGeos[i] = new THREE.Geometry();
if(m==0){
for (var i=0; i< Zs.length; i++) {
pointGeos[0].vertices.push(new THREE.Vertex( new THREE.Vector3(Zs[i].x, Zs[i].y, Zs[i].z) ));
if(Zs[i].a >0 ) pointGeos[0].colors.push(new THREE.Color(0xff0000));
else pointGeos[0].colors.push(new THREE.Color(0x0000ff));
}
}else{
for (var i=0; i< Xs.length; i++) {
pointGeos[1].vertices.push(new THREE.Vertex( new THREE.Vector3(Xs[i].x, Xs[i].y, Xs[i].z) ));
if(Xs[i].a >0 ) pointGeos[1].colors.push(new THREE.Color(0xff0000));
else pointGeos[1].colors.push(new THREE.Color(0x0000ff));
pointGeos[2].vertices.push(new THREE.Vertex( new THREE.Vector3(Ys[i].x, Ys[i].y, Ys[i].z) ));
if(Ys[i].a >0 ) pointGeos[2].colors.push(new THREE.Color(0xff0000));
else pointGeos[2].colors.push(new THREE.Color(0x0000ff));
}
}
if(m==0){
scatterPlots[n][l][m][0].add(new THREE.ParticleSystem(pointGeos[0], mat));
$id("s" + n + l + m ).innerHTML = "準備完了！" ;
$id("n" + n + l + m ).style.display = 'inline';
}else{
scatterPlots[n][l][m][1].add(new THREE.ParticleSystem(pointGeos[1], mat));
$id("s" + n + l + m + "x").innerHTML = "準備完了！" ;
$id("n" + n + l + m + "x").style.display = 'inline';
scatterPlots[n][l][m][2].add(new THREE.ParticleSystem(pointGeos[2], mat));
$id("s" + n + l + m + "y").innerHTML = "準備完了！" ;
$id("n" + n + l + m + "y").style.display = 'inline';
}
}
if(m==0){
$id("n" + n + l + m ).checked = false;
$id("n" + n + l + m ).style.display = 'none';
}else{
$id("n" + n + l + m + "x").checked = false;
$id("n" + n + l + m + "x").style.display = 'none';
$id("n" + n + l + m + "y").checked = false;
$id("n" + n + l + m + "y").style.display = 'none';
}
}
}
}
}
var width, height;
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
try {renderer = new THREE.WebGLRenderer({antialias: true});} catch (e) {}
if(!renderer) document.getElementById("errer").innerHTML = '<p style="text-align:center;font-size:small; color:red">お使いの環境ではWebGLはご利用いただけません。<br />WebGLに対応していない方のためにGIFファイルを以下に用意しました。<br /><br /><img src="http://www.natural-science.or.jp/images/tutorial6.gif" alt="WEBGLデモ" /></p>';
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColorHex(0x000000, 1.0);
$id("pn").value = p_max;
$id("ps").value = p_size;
}
var camera;
var cameraL = 150;
var cameraTheta = Math.PI*(1/2-0.01);
var cameraPhi = Math.PI*(3/2-0.01);
function initCamera() {
camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.position.set(cameraL*Math.sin(cameraTheta)*Math.cos(cameraPhi),
cameraL*Math.sin(cameraTheta)*Math.sin(cameraPhi),
cameraL*Math.cos(cameraTheta));
}
var scene;
function initScene() {
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xFFFFFF, 0.0015 );
}
var light, light2;
function initLight() {
light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
light.position.set( 100, 100, 100 );
scene.add(light);
light2 = new THREE.AmbientLight(0x777777);
scene.add(light2);
}
var scatterPlot;
var axis;
function initObject(){
axis = new THREE.Object3D();
scene.add(axis);
scatterPlot = scatterPlots[1][0][0];
function v(x,y,z){ return new THREE.Vertex(new THREE.Vector3(x,y,z)); }
var lineGeo = new THREE.Geometry();
lineGeo.vertices.push(
v(-L/2, 0, 0), v(L/2, 0, 0),
v(0, -L/2, 0), v(0, L/2, 0),
v(0, 0, -L/2), v(0, 0, L/2),
v(-L/2, L/2, -L/2), v(L/2, L/2, -L/2),
v(-L/2, -L/2, -L/2), v(L/2, -L/2, -L/2),
v(-L/2, L/2, L/2), v(L/2, L/2, L/2),
v(-L/2, -L/2, L/2), v(L/2, -L/2, L/2),
v(-L/2, 0, L/2), v(L/2, 0, L/2),
v(-L/2, 0, -L/2), v(L/2, 0, -L/2),
v(-L/2, L/2, 0), v(L/2, L/2, 0),
v(-L/2, -L/2, 0), v(L/2, -L/2, 0),
v(L/2, -L/2, -L/2), v(L/2, L/2, -L/2),
v(-L/2, -L/2, -L/2), v(-L/2, L/2, -L/2),
v(L/2, -L/2, L/2), v(L/2, L/2, L/2),
v(-L/2, -L/2, L/2), v(-L/2, L/2, L/2),
v(0, -L/2, L/2), v(0, L/2, L/2),
v(0, -L/2, -L/2), v(0, L/2, -L/2),
v(L/2, -L/2, 0), v(L/2, L/2, 0),
v(-L/2, -L/2, 0), v(-L/2, L/2, 0),
v(L/2, L/2, -L/2), v(L/2, L/2, L/2),
v(L/2, -L/2, -L/2), v(L/2, -L/2, L/2),
v(-L/2, L/2, -L/2), v(-L/2, L/2, L/2),
v(-L/2, -L/2, -L/2), v(-L/2, -L/2, L/2),
v(-L/2, 0, -L/2), v(-L/2, 0, L/2),
v(L/2, 0, -L/2), v(L/2, 0, L/2),
v(0, L/2, -L/2), v(0, L/2, L/2),
v(0, -L/2, -L/2), v(0, -L/2, L/2)
);
var lineMat = new THREE.LineBasicMaterial({color: 0x444444, lineWidth: 1});
var line = new THREE.Line(lineGeo, lineMat);
line.type = THREE.Lines;
axis.add(line);
var titleX = createText2D('-X', 'gray');
titleX.position.x = -(L/2+5);
titleX.rotation.x = Math.PI/2;
axis.add(titleX);
var titleX = createText2D('X', 'gray');
titleX.position.x = (L/2+5);
titleX.rotation.x = Math.PI/2;
axis.add(titleX);
var titleX = createText2D('-Y', 'gray');
titleX.position.y = -(L/2+5);
titleX.rotation.x = Math.PI/2;
axis.add(titleX);
var titleX = createText2D('Y', 'gray');
titleX.position.y = (L/2+5);
titleX.rotation.x = Math.PI/2;
axis.add(titleX);
var titleX = createText2D('-Z', 'gray');
titleX.position.z = -(L/2+5);
titleX.rotation.x = Math.PI/2;
axis.add(titleX);
var titleX = createText2D('Z', 'gray');
titleX.position.z = (L/2+5);
titleX.rotation.x = Math.PI/2;
axis.add(titleX);
start(1, 0, 0);//n=1だけデフォルトで計算スタート
$id("n100").checked = true;
/*
var AA = {n:1, l:0, m:0, p_max:p_max, L: L};
workers[1][0][0].postMessage(AA); // ワーカに数値を渡す
$id("b100").innerHTML = "再計算"; ;
$id("s100").innerHTML = "計算中..." ;
*/
}
function start(n, l, m) {//計算開始ボタンを押した時に呼び出される関数
for(var i=0; i<=2; i++) {
scene.remove( scatterPlots[n][l][m][i]);
scatterPlots[n][l][m][i] = new THREE.Object3D();
}
p_max = parseInt($id("pn").value);
p_size = parseFloat($id("ps").value);
$id("b" + n + l + m ).innerHTML = "再計算";
if(m==0){
$id("s" + n + l + m).innerHTML = "計算中..." ;
}else{
$id("s" + n + l + m + "x").innerHTML = "計算中..." ;
$id("s" + n + l + m + "y").innerHTML = "計算中..." ;
}
var AA = {n:n, l:l, m:m, p_max:p_max, L: L};
workers[n][l][m].postMessage(AA); // ワーカに数値を渡す
}
function initEvent(){//イベントの登録
window.addEventListener("mousedown", onMousedown, false);
window.addEventListener("mouseup", onMouseup, false);
window.addEventListener("mousemove", onMousemove, false);
window.addEventListener("mousewheel", onMousewheel, false);
window.addEventListener('DOMMouseScroll', onMousewheel, false); //Firefox用（マウスホイール）
window.addEventListener("dragover", onCancel, false);
window.addEventListener("dragenter", onCancel, false);
window.addEventListener("drop", onDropFile, false);
for (var n = 1; n <= n_max; n++)
for (var l = 0; l < n; l++)
for (var m = 0; m <= l; m++)
//$id("b" + n + l + m).addEventListener("click", start(n,l,m), false); //これでは、start(n,l,m)が実行されてしまうのでダメ
//$id("b" + n + l + m).addEventListener("click", function(event) { start(n,l,m); }, false); //これでは、イベントの登録がfor文の後になるため、意図通り引き数を与えることができないダメ
$id("b" + n + l + m).addEventListener("click", (function (n_, l_, m_) { return function() { start(n_, l_, m_); } })(n, l, m) , false);
//参考ページ
//http://d.hatena.ne.jp/Syunpei/20070605/1181035316
//http://d.hatena.ne.jp/uriyuri/20081014/1223974862
}
function loop() {
for (var n = 1; n <= n_max; n++)
for (var l = 0; l < n; l++)
for (var m = 0; m <= l; m++){
if(m==0){
if($id("n" + n + l + m).checked) scene.add(scatterPlots[n][l][m][0]);
else scene.remove( scatterPlots[n][l][m][0]);
}else{
if($id("n" + n + l + m + "x").checked) scene.add(scatterPlots[n][l][m][1]);
else scene.remove( scatterPlots[n][l][m][1]);
if($id("n" + n + l + m + "y").checked) scene.add(scatterPlots[n][l][m][2]);
else scene.remove( scatterPlots[n][l][m][2]);
}
}
renderer.clear();
camera.lookAt( {x:0, y:0, z:0 } );
renderer.render(scene, camera);
window.requestAnimationFrame(loop);
}
function threeStart() {
initEvent();
initThree();
initCamera();
initScene();
initLight();
initObject();
loop();
}
function createTextCanvas(text, color, font, size) {
size = size || 24;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var fontStr = (size + 'px ') + (font || 'Arial');
ctx.font = fontStr;
var w = ctx.measureText(text).width;
var h = Math.ceil(size);
canvas.width = w;
canvas.height = h;
ctx.font = fontStr;
ctx.fillStyle = color || 'black';
ctx.fillText(text, 0, Math.ceil(size*0.8));
return canvas;
}
function createText2D(text, color, font, size, segW, segH) {
var canvas = createTextCanvas(text, color, font, size);
var plane = new THREE.PlaneGeometry(canvas.width, canvas.height, segW, segH);
var tex = new THREE.Texture(canvas);
tex.needsUpdate = true;
var planeMat = new THREE.MeshBasicMaterial({
map: tex, color: 0xffffff, transparent: true
});
var mesh = new THREE.Mesh(plane, planeMat);
mesh.scale.set(0.15, 0.15, 0.15);
mesh.doubleSided = true;
return mesh;
}
function QuaternionRotation(theta, u, v){ //(回転角, 回転軸, 任意のベクトル)
var P = new quat4.create([v[0],v[1],v[2],0]);
var Q = new quat4.create([-u[0]*Math.sin(theta/2), -u[1]*Math.sin(theta/2), -u[2]*Math.sin(theta/2), Math.cos(theta/2)]);
var R = new quat4.create([u[0]*Math.sin(theta/2), u[1]*Math.sin(theta/2), u[2]*Math.sin(theta/2), Math.cos(theta/2)]);
var S0 = quat4.multiply(P,Q, quat4.create());
var S = quat4.multiply(R,S0,quat4.create());
return S;
}
////マウスイベント////////////////////////////////////////////////////
var down = false;
var v, u, w, theta;
function onMousedown (ev){ //マウスダウン時イベント
if (ev.target == renderer.domElement) {
down = true;
sx = ev.clientX; sz = ev.clientY;
v = new vec3.create([camera.position.x,camera.position.y,camera.position.z]); //任意の点
u = new vec3.create([-v[0]*v[2],-v[1]*v[2], (v[0]*v[0]+v[1]*v[1])]);
u = vec3.normalize(u, vec3.create());
w = new vec3.create([v[1],-v[0],0]);
w = vec3.normalize(w, vec3.create());
}
};
function onMouseup (){ //マウスアップ時イベント
down = false;
};
function onMousemove (ev) { //マウスムーブ時イベント
if (down) {
if (ev.target == renderer.domElement) {
var dx = -(ev.clientX - sx);
var dz = -(ev.clientY - sz);
theta = dx/ 100;
var S = QuaternionRotation(theta, u, [camera.position.x,camera.position.y,camera.position.z]);
theta = -dz/ 100;
S = QuaternionRotation(theta, w, [S[0],S[1],S[2]]);
camera.position.set(S[0],S[1],S[2]);
sx -= dx;
sz -= dz;
}
}
}
function onMousewheel(ev){//マウスホイール時イベント
var x = camera.position.x;
var y = camera.position.y;
var z = camera.position.z;
cameraL = Math.sqrt(Math.pow(x,2)+Math.pow(y,2)+Math.pow(z,2));
cameraTheta = Math.acos(z/cameraL);
if( y >= 0 ) cameraPhi = Math.acos(x/(cameraL*Math.sin(cameraTheta)));
else cameraPhi = 2.0*Math.PI - Math.acos(x/(cameraL*Math.sin(cameraTheta)));
var delta;//回転量
if (ev.wheelDelta) {
delta = ev.wheelDelta; //Chrome用
} else if (ev.detail) {
delta = -ev.detail*20; //Firefox用
}
cameraL += delta * 0.2;
if(cameraL < 0) cameraL = 0.1;
camera.position.set(cameraL*Math.sin(cameraTheta)*Math.cos(cameraPhi),
cameraL*Math.sin(cameraTheta)*Math.sin(cameraPhi),
cameraL*Math.cos(cameraTheta));
}
var onDropFile = function(ev){ // ファイルドロップ時イベント
ev.preventDefault();
var file = ev.dataTransfer.files[0]; // File オブジェクトを取得
readFile(file); // ファイル読み込み
};
var onCancel = function(ev){ // デフォル処理をキャンセル
if(ev.preventDefault) { ev.preventDefault(); }
return false;
};
function f_write(){
var str = "";
for (var i = 0; i < N_EC; i++) {
if(!ECs[i].flag) continue;
for (var j = 0; j < n_line; j++) {
var geometry = new THREE.Geometry();
for (var k = 0; k < n_step; k++) {
if(Lines[i][j][k] != undefined && Lines[i][j][k] != undefined && Lines[i][j][k] != undefined)
str += Lines[i][j][k].x + " " + Lines[i][j][k].y + " " + Lines[i][j][k].z + "\n";
else break;
}
str += "\n";
}
}
var blobBuilder;
if ("MozBlobBuilder" in window) {
blobBuilder = new MozBlobBuilder();
} else if ("WebKitBlobBuilder" in window) {
blobBuilder = new WebKitBlobBuilder();
}
blobBuilder.append(str);
//var disp = document.getElementById("download");
if (window.URL) {
window.open(window.URL.createObjectURL(blobBuilder.getBlob()) , "New Window", "");
} else if (window.webkitURL) {
window.open(window.webkitURL.createObjectURL(blobBuilder.getBlob()), "New Window", "");
}
//disp.innerHTML = 'ファイルがダウンロードされました （t='+ t +'）';
}
///////////////////////////////////////////////////////////////////////
window.onload = function(){
init();
threeStart();
}
// WebWorker
onmessage = function(event) {
var AA = event.data;
var results = wavefunction(AA);
// 生成元に結果を返す
results.n = AA.n; //主量子数
results.l = AA.l; //方位量子数
results.m = AA.m; //磁気量子数 m = 0 ～ l
postMessage(results);
}
function wavefunction(AA){
var n = AA.n; //主量子数
var l = AA.l; //方位量子数
var m = AA.m; //磁気量子数 m = 0 ～ l
var L = AA.L; //計算する領域のサイズ
var p_max = AA.p_max; //描画する点の数
var results = {};
var points = new Array();
points[0] = new Array();
if(m>0){
points[1] = new Array();
points[2] = new Array();
}
if(n==1){
times = 5;
timesL = L/3;
}
else if(n==2){
times = 20;
timesL = L/2;
}
else if (n==3){
times = 50;
timesL = L/1.5;
}
else if (n==4){
times =70;
timesL = L;
}
//var mat = new THREE.ParticleBasicMaterial({vertexColors:true, size: p_size});
var pointCount = p_max*100;
//var pointGeo = new THREE.Geometry();
var p=0;
for (var i=0; i<pointCount; i++) {
var x = timesL/2* (Math.random() - Math.random());
var y = timesL/2* (Math.random() - Math.random());
var z = timesL/2* (Math.random() - Math.random());
var r = Math.sqrt(Math.pow(x,2)+Math.pow(y,2)+Math.pow(z,2));
var theta = Math.acos(z/r);
var phi;
if(y>=0) phi = Math.acos(x/(r*Math.sin(theta)));
else phi = 2.0*Math.PI - Math.acos(x/(r*Math.sin(theta)));
if(r==0){
theta = 0;
phi = 0;
}
var R = 2.0/Math.pow(n,2) * Math.sqrt(Factorial(n-l-1)/Factorial(n+l)) * Math.exp(-r/n) * Math.pow( 2.0*r/n,l) *Laguerre(2*l+1, n-l-1, 2.0*r/n) ;
var Y = Math.pow(-1.0, m) * Math.sqrt(l+1.0/2.0) * Factorial(l-m)/Factorial(l+m) * Legendre(m,l,Math.cos(theta));
var Psi, Psi_x, Psi_y;
Psi = R * Y;
if(Math.abs(Psi) * times <Math.random()) continue;
if(m==0) {
if(Psi>0) points[0].push({x:x,y:y,z:z,a:1});
else points[0].push({x:x,y:y,z:z,a:-1});
}else{
var Yx = Y * Math.cos(m*phi);
var Yy = Y * Math.sin(m*phi);
Psi_x = R * Yx;
Psi_y = R * Yy;
if(Psi_x>0) points[1].push({x:x,y:y,z:z,a:1});
else points[1].push({x:x,y:y,z:z,a:-1});
if(Psi_y>0) points[2].push({x:x,y:y,z:z,a:1});
else points[2].push({x:x,y:y,z:z,a:-1});
}
p++;
if(p > p_max) break;
}
if(m==0) {
results.z = points[0];
}else{
results.x = points[1];
results.y = points[2];
}
return results;
}
function Factorial(n, n1) //
{
var m = n1 || 1;
if( n<=0 ) return (1.0);
var F = 1.0;
for(var i=n; i>=2; i-=m ){
F *= i;
}
return (F);
}
function Legendre (m, l, x ) {//ルジャンドル陪関数
var mm = Math.abs(m);
if( mm>l ) return (0);
var r0, r1, r2;
r0 = 0.0;
r1 = Math.pow(1.0-x*x, mm/2.0) * Factorial(2*mm-1,2);
if( mm==l && m>=0) return (r1);
if( mm==l && m<0) return (r1 * Math.pow(-1.0,mm) * Factorial(l-mm)/Factorial(l+mm)) ;
for(var ll = mm+1; ll<=l; ll++ ){
r2 = ((2.0*ll-1.0)*x*r1 - (ll+mm-1.0)*r0)/(ll-mm);
r0 = r1;
r1 = r2;
}
if(m>=0) return (r2);
else return (r2 * Math.pow(-1.0,mm) * Factorial(l-mm)/Factorial(l+mm)) ;
}
function Laguerre(k, n, x){
var sum=0;
for(var m=0; m<=n; m++){
sum += Math.pow(-x,m)*Factorial(n+k)/Factorial(n-m)/Factorial(k+m)/Factorial(m);
}
return sum;
}
図を描画用にデータ出力用のプログラムです。
/*
水素原子の波動関数（厳密解）
(2012.03.29 公開)
*/
#include <math.h>
#include <stdlib.h>
#include <time.h>
#include <fstream>
#include <sstream>
#include <iostream>
#include <string>
#include <cstdio>
#include <iomanip>
#include <stdio.h>
#include <complex>
#if defined(_OPENMP)
#include <omp.h>
#endif
#if defined(_MSC_VER)
#include <direct.h> // Windowsフォルダ作成用
#elif defined(__GNUC__)
#include <sys/stat.h> // UNIX系ディレクトリ作成用
#endif
using namespace std;
double PI = acos(-1.0);
double Factorial(int n);
double Factorial(int n, int m);
const int n_max = 4;
const int kizami = 200;
const double L = 80.0;
double Laguerre( int k, int n, double x); //ラゲール陪関数
double Legendre( int m, int l, double x); //ルジャンドル陪関数
string folder = "Hydrogen";//作成するフォルダ名
int main(){
#if defined(_MSC_VER)
_mkdir(folder.c_str()); // Windowsフォルダ作成
#elif defined(__GNUC__)
mkdir(folder.c_str(), S_IRWXU | S_IRWXG | S_IRWXO); // UNIX系のディレクトリ作成
#endif
#if defined(_OPENMP)
omp_set_num_threads(8);
cout << "OpenMPを利用します（最大スレッド数："<< omp_get_max_threads() << "）" << endl;
#endif
double r_min = 0.0;
double r_max = 40.0;
const int Z = 1;
/*// 動径分布関数
for(int n=1; n<=n_max; n++)
{
for(int l=0; l<n; l++)
{
for(int m=-l; m<=l; m++)
{
char str[200];
string str1;
ofstream fout_s;
sprintf(str, "/R%d_%d_%d.data", n, l, m); str1 = folder + str; //動径方向
fout_s.open(str1.c_str());
for(int i=0; i<=kizami*100; i++)
{
double x = r_min + (r_max-r_min)/double(kizami*100)*double(i);
double R = 2.0/pow(double(n),2) * sqrt(Factorial(n-l-1)/Factorial(n+l)) * exp(-x/double(n)) * pow( 2.0*x/double(n),l) *Laguerre(2*l+1, n-l-1, 2.0*x/double(n)) ;
fout_s << x << " " << R << endl;
}
fout_s.close();
}
}
}
*/
for(int n=1; n<=n_max; n++)
{
for(int l=0; l<n; l++)
{
for(int m=0; m<=l; m++)
{
char str[200];
string str1;
ofstream fout_s;
sprintf(str, "/Psi%d_%d_%d.data", n, l, m); str1 = folder + str; //
fout_s.open(str1.c_str());
for(int ix=0; ix<=kizami; ix++ )
{
for(int iy=0; iy<=kizami; iy++ )
{
double x = - L/2.0 + L * double(ix)/double(kizami);
double y = - L/2.0 + L * double(iy)/double(kizami);
double z =0;
double r = sqrt(pow(x,2)+pow(y,2)+pow(z,2));
double theta = acos(z/r);
double phi;
if(y>=0) phi = acos(x/r);
else phi = 2.0*PI - acos(x/r);
if(r==0){
theta = 0;
phi = 0;
}
double R = 2.0/pow(double(n),2) * sqrt(Factorial(n-l-1)/Factorial(n+l)) * exp(-r/double(n)) * pow( 2.0*r/double(n),l) *Laguerre(2*l+1, n-l-1, 2.0*r/double(n)) ;
double Y = pow(-1.0, m) * sqrt(double(l)+1.0/2.0) * Factorial(l-m)/Factorial(l+m) * Legendre(m,l,cos(theta));
if(m==0) {
fout_s << x << " " << y << " " << R * Y << endl;
}else{
double Yx = Y * cos(double(m)*phi);
double Yy = Y * sin(double(m)*phi);
fout_s << x << " " << y << " " << R * Yx << " " << R * Yy << endl ;
}
}
fout_s << "" << endl;
}
fout_s.close();
}
}
}
}
double Laguerre( int k, int n, double x)
{
double sum=0;
for(int m=0; m<=n; m++){
sum += pow(-x,m)*Factorial(n+k)/Factorial(n-m)/Factorial(k+m)/Factorial(m);
}
return sum;
}
double Legendre( int m, int l, double x)
{
int mm = abs(m);
if( mm>l ) return 0;
double r0, r1, r2;
r0 = 0.0;
r1 = pow(1.0-x*x, double(mm)/2.0) * Factorial(2*mm-1, 2);
if( mm==l && m>=0) return r1;
if( mm==l && m<0) return r1 * pow(-1.0,mm) * Factorial(l-mm)/Factorial(l+mm) ;
for(int ll = mm+1; ll<=l; ll++ ){
r2 = ((2.0*ll-1.0)*x*r1 - (ll+mm-1.0)*r0)/(ll-mm);
r0 = r1;
r1 = r2;
}
if(m>=0) return r2;
else return r2 * pow(-1.0,mm) * Factorial(l-mm)/Factorial(l+mm) ;
}
double Factorial(int n)
{
if( n<=0 ) return 1.0;
double F = 1.0;
for(int i=n; i>=2; i--){
F *= double(i);
}
return F;
}
double Factorial(int n, int m)
{
if( n<=0 ) return 1.0;
double F = 1.0;
for(int i=n; i>=2; i=i-m){
F *= double(i);
}
return F;
}
上のプログラムで出力したデータを用いて、gif描画用のgnuplotテンプレートです。
set pm3d ## 3次元カラー表示 set pm3d map ## カラーマップ表示 set pm3d interpolate 5, 5 ## 補間 set ticslevel 10 set nokey set tics font 'Times,14' set size square ######################################################## ## gif ファイル出力の場合 ############################## ######################################################## set terminal gif optimize size 600, 480 cb = 1 ##<---------カラーバーの指定 set cbrange[-cb:cb] set palette defined ( -cb "blue" , 0 "black", cb "red") L=5.2 set xr[-L:L] ##<---------描画x軸の範囲 set yr[-L:L] ##<---------描画y軸の範囲 set output 'Psi1_0_0.gif' splot "Psi1_0_0.data" u 1:2:3 with pm3d L=10 set xr[-L:L] ##<---------描画x軸の範囲 set yr[-L:L] ##<---------描画y軸の範囲 cb = 0.2 ##<---------カラーバーの指定 set cbrange[-cb:cb] set palette defined ( -cb "blue" , 0 "black", cb "red") set output 'Psi2_0_0.gif' splot "Psi2_0_0.data" u 1:2:3 with pm3d cb = 0.1 ##<---------カラーバーの指定 set cbrange[-cb:cb] set palette defined ( -cb "blue" , 0 "black", cb "red") set output 'Psi2_1_0.gif' splot "Psi2_1_0.data" u 1:2:3 with pm3d set output 'Psi2_1_x.gif' splot "Psi2_1_1.data" u 1:2:3 with pm3d set output 'Psi2_1_y.gif' splot "Psi2_1_1.data" u 1:2:4 with pm3d cb = 0.03 ##<---------カラーバーの指定 set cbrange[-cb:cb] set palette defined ( -cb "blue" , 0 "black", cb "red") L=20 set xr[-L:L] ##<---------描画x軸の範囲 set yr[-L:L] ##<---------描画y軸の範囲 set output 'Psi3_0_0.gif' splot "Psi3_0_0.data" u 1:2:3 with pm3d set output 'Psi3_1_0.gif' splot "Psi3_1_0.data" u 1:2:3 with pm3d set output 'Psi3_1_x.gif' splot "Psi3_1_1.data" u 1:2:3 with pm3d set output 'Psi3_1_y.gif' splot "Psi3_1_1.data" u 1:2:4 with pm3d set output 'Psi3_2_0.gif' splot "Psi3_2_0.data" u 1:2:3 with pm3d cb = 0.01 ##<---------カラーバーの指定 set cbrange[-cb:cb] set palette defined ( -cb "blue" , 0 "black", cb "red") set output 'Psi3_2_x.gif' splot "Psi3_2_1.data" u 1:2:3 with pm3d set output 'Psi3_2_y.gif' splot "Psi3_2_1.data" u 1:2:4 with pm3d set output 'Psi3_2_2x.gif' splot "Psi3_2_2.data" u 1:2:3 with pm3d set output 'Psi3_2_2y.gif' splot "Psi3_2_2.data" u 1:2:4 with pm3d L=30 set xr[-L:L] ##<---------描画x軸の範囲 set yr[-L:L] ##<---------描画y軸の範囲 cb = 0.02 ##<---------カラーバーの指定 set cbrange[-cb:cb] set palette defined ( -cb "blue" , 0 "black", cb "red") set output 'Psi4_0_0.gif' splot "Psi4_0_0.data" u 1:2:3 with pm3d set output 'Psi4_1_0.gif' splot "Psi4_1_0.data" u 1:2:3 with pm3d set output 'Psi4_1_x.gif' splot "Psi4_1_1.data" u 1:2:3 with pm3d set output 'Psi4_1_y.gif' splot "Psi4_1_1.data" u 1:2:4 with pm3d set output 'Psi4_2_0.gif' splot "Psi4_2_0.data" u 1:2:3 with pm3d cb = 0.005 set cbrange[-cb:cb] set palette defined ( -cb "blue" , 0 "black", cb "red") set output 'Psi4_2_x.gif' splot "Psi4_2_1.data" u 1:2:3 with pm3d set output 'Psi4_2_y.gif' splot "Psi4_2_1.data" u 1:2:4 with pm3d set output 'Psi4_2_2x.gif' splot "Psi4_2_2.data" u 1:2:3 with pm3d set output 'Psi4_2_2y.gif' splot "Psi4_2_2.data" u 1:2:4 with pm3d L=40 set xr[-L:L] ##<---------描画x軸の範囲 set yr[-L:L] ##<---------描画y軸の範囲 set output 'Psi4_3_0.gif' splot "Psi4_3_0.data" u 1:2:3 with pm3d set output 'Psi4_3_x.gif' splot "Psi4_3_1.data" u 1:2:3 with pm3d set output 'Psi4_3_y.gif' splot "Psi4_3_1.data" u 1:2:4 with pm3d cb = 0.001 set cbrange[-cb:cb] set palette defined ( -cb "blue" , 0 "black", cb "red") set output 'Psi4_3_2x.gif' splot "Psi4_3_2.data" u 1:2:3 with pm3d set output 'Psi4_3_2y.gif' splot "Psi4_3_2.data" u 1:2:4 with pm3d set output 'Psi4_3_3x.gif' splot "Psi4_3_3.data" u 1:2:3 with pm3d set output 'Psi4_3_3y.gif' splot "Psi4_3_3.data" u 1:2:4 with pm3d
・C++言語
・gnuplotテンプレート
・イラストレータ
上のgnuplot テンプレートで出力した gif データです。 の平面での波動関数の振幅に比例する確率分布による点描画です。
まず、トランジスタを用いたエミッタ接地回路の動作チェックをを行った。 下図のように、入力信号がonになるとLEDが点灯する回路を製作した。
先ほどの回路のLEDをモータに置き換えた。 入力信号がonになると、モータが回転することを確認できた。 なお、トランジスタのコレクタ電流の最大規格によってはモータを駆動できないことがある。 今回は2SC1815というトランジスタを用いたが、このトランジスタでモータを駆動できない場合、コレクタ電流の最大規格が大きいトランジスタを用いる必要がある。
先ほどの回路のうち、入力信号にフォトインタラプタを接続した。 フォトインタラプタとは、対向する発光部と受光部を持ち、発光部からの光を物体が遮るのを受光部で検出することによって、物体の有無や位置を判定するセンサである。 下図のように、フォトインタラプタに白紙を当てるとモータが回転するが、黒紙を当てるとモータが回転しないことが確認できた。 この回路を組み合わせることで、ライントレースロボットの回路へ応用することができる。
常微分方程式の標準的な形式は
と表される。式(1)は１階の常微分方程式であるが、多階の常微分方程式の場合であっても階数に応じた変数を導入することで、１階の微分方程式の連立方程式に帰着される。つまり、式(1)を計算するための数値計算の手法（アルゴリズム）を確立することができれば、多階の常微分方程式も計算可能となるだけではなく、多変数による常微分方程式、偏微分方程式への応用も可能となる。
常微分方程式に限らずコンピュータで計算を行う場合、有限桁の精度で数値的に計算を行うことに起因する様々な問題が存在する[17]。 その詳細は割愛するが、計算アルゴリズムは問題を克服しながら、これまで多くの方々によって開発されてきた。 計算アルゴリズムに必要な要件は「精度よく」「安全に」そして「簡単に」という点にあり、それぞれに利点と欠点が指摘されている。 本稿では、次に挙げる分類をもとに、常微分方程式を計算するアルゴリズムを概観することにします。
常微分方程式を数値的に解くための計算アルゴリズムの一般的な分類を概観する。 その前に表記についてです。とにおけるの値を
と表す。はの差分量とする。
を計算するアルゴリズムを
と表した場合、を段階数（step）と呼ぶ。
（１段階式）の場合、を決めるために必要な過去のデータはだけとなるため、を初期条件から与えることで任意の時刻の値を計算することができる（セルスタート可能と呼ぶ）（ルンゲクッタ型など）。
一方、（多段階式）では、を決めるためにだけでなく、より過去の情報が必要となるため、このアルゴリズム単独だけでは計算をスタートできない（セルスタート不可能）（アダムス型など）。
多段階式の計算アルゴリズムは、各ステップにおける関数の値を利用して補間（ラグランジュ・ニュートン補間）を行う。
を決定する際にを評価する回数。計算量の目安となる。
段数１：アダムス型の多段階式に多い。
多段数：ルンゲ・クッタ型の１段階式に多い。
コンピュータを用いた数値計算は、微分を差分で表現することから生じる誤差を含むことになる。 とおき、計算アルゴリズム（差分式）による表式と 厳密解のテーラー展開から得られる表式
と比較して、低次から完全に一致する項数を次数（order）と呼ぶ。 次数が大きいほど厳密解と近いことを意味するため計算精度を表す指数となる。
を計算するアルゴリズムが
と表される場合、陽的アルゴリズムと呼ばれ、
と表される場合は陰的アルゴリズムと呼ばれる。
陽的アルゴリズムは、を得るために必要な情報が、これまでに計算しただけである。順々に代入するだけで時間発展を計算することができる（直接代入法）。
一方、陰的アルゴリズムでは、を計算するために、が必要となり、単純に代入するだけではを計算することができない。別途、ニュートン法などを用いて非線形方程式を解く必要がある。
陽的→プログラミングしやすい
陰的→硬い方程式でも安定的
位相空間の幾何学的な構造を不変に保つ変換をシンプレクティック変換と呼ばれる。
ハミルトニアン力学系に適用した場合、エネルギーや角運動量などの物理量が保存することに対応し、正準変換はすべてシンプレクティック変換であることが知られている。
シンプレクティック変換に基づいたアルゴリズムを用いて保存系における物理量の計算を場合、保存されるべき保存量が、一定の範囲内で保存されることが保証される。
一方、シンプレクティック変換に基づかない計算アルゴリズムの場合には、保存されるべき保存量が単調増加する。
シンプレクティック変換に基づいた計算アルゴリズムをシンプレクティック性を満たすと呼ばれる。
つまり、保存系の物理量を計算する場合には特にシンプレクティック性を満たすアルゴリズムが非常に重要な役割を果たすことになる。
シンプレクティック性○ → ベルレの方法、陰的ルンゲ・クッタ法 など
シンプレクティック性× → 陽的ルンゲ・クッタ法、予測子・修正子法など
欠点 → ステップごとに時間刻みを変えると保存量の保存が崩れる[12]。
m段階式の計算アルゴリズム
において、
が成り立つ場合対称型アルゴリズムであると呼ばれる。
つまり、対称型アルゴリズムでは時間反転対称性が満たされている（ただし丸め誤差により厳密には成り立たない）。
対称型の利点はシンプレクティック性と同様、保存量が一定の範囲内で保存される[12]。
また、シンプレクティック性とは異なり、ステップごとに時間刻みを変えても保存量の保存が崩れないようにすることもできる[12]。また、任意の物理量の誤差が最悪でも時間に比例しかしないことも示されている[12]。
そのため、シンプレクティック変換に基づいたアルゴリズムよりもある意味でよい[12]。
対称型○ → 安定性が非対称型に比べ飛躍的によい[12]。
ラグランジュ・ニュートン補間で多段階式の計算アルゴリズムに対して、高階の導関数を利用して補間（エルミート補間）することで導出されるアルゴリズム[13]。 導関数が簡単に導出することが出来る場合、多段階式解法やルンゲ・クッタ法に比べて、誤差項の係数がずっと小さいことが知られている[13]。
コンピュータを用いた数値計算は精度が有限桁であるために、解析的には収束解存在していたとしても、数値的不安定性のために発散する可能性がある。 数値的不安定性は、線形安定性解析を利用することで定量化することができる。 線形安定性解析とは、写像力学における固定点の安定性を調べる手法の一つで、ある固定点近傍における振る舞いを支配するヤコビ行列の固有値と固有ベクトルを調べることである。振る舞いに主要な寄与を示すのは最大固有値の固有ベクトルで、最大固有値と固有ベクトルは写像に伴う拡大率と拡大軸のベクトルを表している。 厳密解近傍において、計算アルゴリズムによって計算した軌道の振る舞いを調べることによって数値的不安定性を解析することができる。 具体的には、任意の非線形方程式を原点周りで線形化した方程式である、テスト方程式と呼ばれる方程式
を用いて原点近傍の振る舞いを解析解と比較する。解析解は
となるので、
となる。一方、計算アルゴリズムをテスト方程式に適用して、との比を導出すると
と表すことができる。ただし、はの多項式となる。 この比は各ステップごとの拡大率を表すことになる。 つまり、の条件のもと、を満たすの領域が安定性領域と呼ばれ、安定的に計算するための時間刻みの大きさを決める指針となる。 当然、計算アルゴリズムによって安定性領域は異なり、安定性領域が広いほどを大きくとることが可能となり計算効率を格段に上げることが可能となる。つまり、アルゴリズムの良し悪しを判定する一つの指標を与えることになる。
安定性領域がを満たす計算アルゴリズムはA-安定と呼ばれる。 A-安定のアルゴリズムの場合、硬い方程式に対しても安定的であることが示されている[13]。 陰的ルンゲクッタ法の一部であるガウス・ルジャンドル法はすべての次数でA-安定であることが示されている[13]。
常微分方程式を解く計算手法のもっとも一般的な手法。
の値だけで高次近似を実現。
陽的、陰的どちらもあるが、一般的には陽的なものを指し、陽的４段４次の「古典的ルンゲ・クッタ公式」が最も有名。
系統的な導出により次数は無限に上げることができる。
陽的ルンゲ・クッタ法とはを決定するのに、との近傍の複数地点におけるを計算することで、高次を精度を実現する１段階多段式アルゴリズム。 具体的には
と表すことができ、
と形式的に表すことができる。 式(14)の係数は求める精度と段数から決まる。 与えられれば、を用いて、からまで順に代入するだけで計算することができ、最終的にが得られる。 係数はアルゴリズムごとに異なり次のような表にまとめられる。
・アルゴリズムの実装が簡単
・時間刻みの変更が容易。
・セルスタート可能[15]
・係数が有理数であるので丸め誤差が少ない（６段５位まで）[12]
・４次の安定性領域が低次よりも広い
・対称性×
・シンプレクティック性×[10]
→たとえ安定領域であっても保存すべき量が単調増加する
・陽的ルンゲ・クッタはＡ-安定ではない[13][20]
| 名称 | テーブル | アルゴリズム |
|---|---|---|
|
オイラー法 １段１次 |
|
|
|
改良オイラー法 ２段２次 |
|
|
|
修正オイラー法（ホイン法） ２段２次 |
|
|
| ホインの３次公式 ３段３次 |
|
|
| クッタの３次公式 ３段３次 |
|
|
| 古典的ルンゲ・クッタ公式 ４段４次 |
|
|
| クッタ3/8公式 ４段４次 |
|
|
| ルンゲ・クッタ・ギル公式 | メモリが少なくて済む[3] | |
・時間刻みを埋め込み型で調整 → ルンゲ・クッタ・フェルベルグ公式[12]。
・系統的導出と安定性が掲載[3]。４次の丁寧な導出[6]。
・精度５次以上の掲載[7]（Mathematicaを利用）。
・精度５次以上で安定領域がかなり狭くなる。
・古典的ルンゲ・クッタ公式は４段の公式であるため、分子動力学のように力の計算が体部分を占める系では非常に非効率となるだけではなく、
シンプレクティック性を満たさないため応用には適さない[10]。利用する場合は、少なくても刻み幅の適合化を行うべき[10]
・５段５次、６段６次と同等の公式も提案されている[8]
陰的ルンゲ・クッタ法とは、陽的ルンゲ・クッタ法と同様にを決定するのに、との近傍の複数地点におけるを計算することで、高次を精度を実現する１段階多段式アルゴリズムである。 からまで順に代入するだけで計算することができた陽的ルンゲ・クッタ法と異なり、 を決めるのにを利用するというアルゴリズムになっている。 具体的には
と形式的に表すことができる。そして一般的にはは式(16)で与えられる非線形方程式を解くことで得られる。 式(16)の係数も、陽的の場合と同様に下の表のようにまとめられる。
「次数≦段数」である陽的な場合と異なり、陰的公式は「次数≧段数」を実現することができる。２段３次の既知の公式も多数知られている[21]。 本稿では、陰的ルンゲ・クッタ法の中でも 式(16)の係数が
の条件を満たす特別な場合に絞る。式(18)は、少ない分点数で高精度の数値積分を行うガウス・ルジャンドル法と同様の概念を利用することで導出した条件で、式(18)を満たす陰的ルンゲ・クッタ法はガウス・ルジャンドル法と呼ばれる。 式(18)は、陰的ルンゲ・クッタ法のうちシンプレクティック性と満たす計算アルゴリズムであることが示されている[20]。
【利点】
・すべて１段階 → セルスタート可能
・p段で2p次の精度を達成[12][20] → 計算量を減らせる
・シンプレクティック性○[13][20]
・対称性○[13][20]
・安定性 → A-安定[13][20]
・局所誤差 → 極小[13]
【欠点】
・を計算する際に非線形方程式を解く必要がある[13][20]
。
・埋め込み型公式が使えない。
| 名称 | テーブル |
|---|---|
|
ガウス・ルジャンドル法 １段２次 |
|
|
ガウス・ルジャンドル法 ２段４次 |
|
|
ガウス・ルジャンドル法 ３段６次 |
|
「A-安定＋高精度＋シンプレクティック性」を兼ね備えるため、多くの場合で最良[13]。
を得るために、しか利用しないルンゲ・クッタ法と異なり、 とより過去の情報を利用して解く方法は多段階法と呼ばれる。
・何次の精度でも比較的簡単に導くことができる
・１ステップあたりの関数評価が１回で済む（１段）→ 計算量が少なくてすむ
・局所誤差が比較的小さい。
・シンプレクティック性×
・対称性×
・安定性 → A安定でない
・次数を上げると安定領域が急激に狭くなる → 予測子・修正子法である程度緩和可能[3]。
・セルスタート不可能 → 次数のあったルンゲ・クッタ法などを利用する必要がある
・多段階式からくる真の解には現れない計算モードを必ず含む[3]。
多段階法の最も単純な陽的公式。
・陽的公式
詳細が[3]に記述されている。
ラグランジュ補間で多項式で近似し積分を計算する。２次から４次の公式を上から記述する。
５次６次の公式は[9]に記述されている。
・２次が台形公式[12]。
・陰的公式
・計算スタート時に情報が足らない。
２次から４次の公式を上から記述する。
５次６次の公式は[9]に記述されている。
予測子：アダムズ・バッシュフォース公式（陽的）
修正子：アダムズ・ムルトン公式（陰的）
を利用したものをアダムズ法と呼ばれる[3]。
[15]に係数の表。
４次のアダムズ法は次の通り。
・時間刻み間隔を簡単に変えられる[12]。
・誤差の評価が簡単[12]。
・自動的な精度制御も可能[15]。
・ルンゲ・クッタ法よりも高速[12]。
・収束するまで計算する必要はない。→１回で十分な精度[12]。
・安定領域が大きくない[15]。
・メモリが多く必要[15]。
・初期値の設定に難点 → 分子動力学シミュレーションの場合問題にならない[15]。
・ポテンシャルの不連続性に弱い[15]。
・力の不連続性に弱い[15]。
・力学と適合しない
・ハミルトン系に適用する場合は、最適化の余地がある[12]
先述の「分類：シンプレクティック性」でも触れたが、シンプレクティック解法とは、シンプレクティック変換に基づいたアルゴリズムである。 保存系における物理量の計算を場合、保存されるべき保存量が、一定の範囲内で保存されることが保証される。 これは保存系の物理シミュレーションで、長時間の計算を行う際に非常に有用となる。 ハミルトニアンの位置と運動量の依存性が分離できる場合、陽的シンプレクティック解法を導出することができる。一方、ハミルトニアンの位置と運動量の依存性が分離できない一般のハミルトニアンに対しては、先述した「ガウス・ルジャンドル法」が陰的シンプレクティック解法となる。 本節では、陽的シンプレクティック解法に話を絞る。 ハミルトニアンが
と分離される場合、正準方程式は
で与えられる。式(22)のは、計算アルゴリズムの見通しを良くするために導入した関数である。 時刻のとを
と行列で表した場合に、正準方程式を利用してからに変換する変換則が シンプレクティック変換と呼ばれ、
と表します。はシンプレクティック変換を表し、添字のは時間刻み幅を表します。 は複数回の変換で
と「積」で表されます。一つ一つのは番目のシンプレクティック変換を表す。さらに１つのシンプレクティック変換は、正準方程式に対応する２つの変換に分けられる。
ただし、とは
で定義される。式(26)のとが、変換に伴う位置と運動量の変化量を表し、の組み合わせでシンプレクティック変換に基づいた様々なアルゴリズムを構成することができる。具体的な導出例（ベルレ法との対応、４次６次の表式）[15]。
・簡単。安定。保存量が保存[15]。
・誤差の判定法が簡単。１ステップあたりの平均誤差（）を計算[16]。
・誤差が最悪でも時間に比例[12]。
・物理的保存量が保存される[12]。
・欠点→時間間隔を変えると上の性質が一般的に壊れる。
・陽的：作用素文化に基づいた公式が広く使われる[12]。→ リープフロッグのタイムステップを変えて組み合わせて高次を実現
・リープフロッグは時間対称型なので、組み合わせも全て対称型となる。７段６位、１５段８次も導かれている
・陽的：再帰的方法でいくらでも高次の公式を導出できるが、６次で１５段、８次で２７段と効率が悪い[12]
・欠点→局所誤差が悪い（ルンゲ・クッタ悪い）[12]
| 表 | アルゴリズム |
|---|---|
 |
 |
| 表 | アルゴリズム |
|---|---|
 |
 |
ベルレの方法は、単純明快で実装が簡単でかつシンプレクティック性[10]かつ時間対称型[12]を満たすため、非常に有用なアルゴリズムである。ベルレの方法と等価な方法については後述する。
さらなる陽的シンプレクティック解法も示されている。 系統的に取り扱うために、式(26)に基づいたシンプレクティック変換を
と表す。 ただし、
である。
ベルレの法則は先述の通り、シンプレクティック解法の中で位置づけられるアルゴリズムであるが、 その簡便さから目的に合わせて柔軟に変更することができることから、様々なアルゴリズムが利用される。
・デメリット→エネルギー保存の値の誤差が、ベルレよりも１位悪い（[10]）。
・２階微分方程式を解く際に有用[10]
・誤差：
・シンプレクティック性[10]かつ時間対称型[12]
・デメリット→時間間隔を変えられない[10]
ヌメロフの公式は、常微分方程式が
の形をしているときに、非常に効率的かつ高精度（１段階＋１階＋５次）なアルゴリズムとなる[10]。 元のを
と変形することで
という簡単な漸化式となる。 逆変換
を行うことで、任意の時刻のを得ることができる。
いろいろな文献を調べていて「シンプレクティック性、対称性、A-安定」の重要性を理解することができた。「ガウス・ルジャンドル法」は上記の条件をすべて満たすため、研究を行う上で非常に強力であると考えられる。ただし、陰的解法であるため、非線形連立方程式をニュートン法をなどで解く必要がある。 一方、陽的ルンゲ・クッタ法は上記条件をひとつも満たさないため、導入するメリット実装の容易さ以外には無いように思える。 ただし、の変動が大きな領域が存在する場合には、細心の注意が必要となる（最低でも刻み幅の自動調整が必須）。 本稿で取り上げた以外にもまだたくさんある。ブリルシュ・ストア法は、リチャードソン補外を用いて目的の精度を達成するまで反復するという手法である。それゆえ、次数という概念は存在しない。[17]の著者はこの手法が最良であると言っているほどである。しかしながら、あまり文献などで触れられていないため利用されていないようである。 数値計算の世界のディープさを少し実感することができた。 また、ITの発展に伴い、暗黙知 → 形式知 → 集合知、そして知のコモディティ化が急速に進んでいることの恩恵を受けていることも、参考文献が簡単に手に入ることで実感することができた。 自分も微力ながら、知のコモディティ化に貢献したいと思っている。
以下の参考文献リストの並び順は、本文での出現順あるいは重要度順ではなく、全くの順不同である。強いていうならば筆者が参考にした順である。 本文中で言及されていないものも含むため注意を要す。
]]>
本講座は、各部品や回路のはたらきを理解した上で、
音階をもつ電子ピアノの製作と調律を通じ、音階と波形の関係を目と耳で理解することを目的として行った。
上記の目的を達成するために、講座を次の４つのステップで実施した。
・はんだごての高温部や鋭利な工具等、怪我の原因となる要素を認識する。
・手元の作業スペースを常に確保し、危険を排除しつつはんだづけに集中できる環境をつくる。
・電子工作の基本技術であるはんだづけの練習を行う。
・配線を行うための、工具（ニッパー、ラジオペンチ）の使い方を学ぶ。
・２回目：抵抗が電流を制限するはたらきを、数種類の抵抗とLEDを用いた回路により目で理解する。
・３回目：ICがもつ、電流のON/OFFを切り替えるはたらきを目で理解するために、LEDの点滅回路をつくる。さらに、抵抗を入れ替えることで、その点滅速度（周波数）が変化することを理解する。
・４回目：スピーカーがもつ、電流のON/OFFを音に変えるはたらきを耳で実感するために、ブザー回路をつくる。3回目までに得られた知識をもとに、ブザーの音の高さを変化させられることを理解する。
・５回目（前半）：半固定抵抗の抵抗値を調整できるというはたらきを、LED点灯回路により目で理解する。
・1～4回目までに得られた知識や技術を応用し、電子ピアノ製作を行う。
・７回目：耳による調律を行い、人間の聴覚だけに頼った調律の精度を実感する。
・８回目：オシロスコープを用いて調律を行い、波形と周波数（音の高さ）の関係を理解する。また、人間の聴覚に頼った調律と機械を利用した調律の精度を比較する。
本講座のために設計した電子ピアノの動作原理は、ICに抵抗とコンデンサをつないだ発振回路から発生させた電気信号を、スピーカーにより音に変換する、というものである。
電子ピアノの音の高さは、抵抗値とコンデンサの容量により決めることができる。
はんだづけの練習と工具の扱い方、そして電子工作をする上での作業環境について実践的に学んだ。また、その学習内容を確認するために、LEDライトを製作した。
受講者は初め工具の扱い方に苦戦していたが、最後にはLEDライトを全員完成させることができた。
抵抗の電流を制限するはたらきを、複数の種類の抵抗を用いた回路で学んだ。また、スイッチのはたらきを学んだ。
抵抗のはたらきを理解するための回路は全員が完成させることができた。スイッチのはたらきを理解する回路は時間内では１名完成させることができなかったが、予備の回路を用いることで理解してもらうことができた。
ICのはたらきを学んだ。回路には受講者によって違う種類の抵抗を用い、お互いの回路を見比べることで、抵抗値が大きくなるとLEDの点滅速度が遅くなるという関係を目で見ることで実感した。
回路は時間内では２名完成することができなかったが、他の受講生の回路を用いてはたらきを理解することができた。
スピーカーのはたらきを学ぶためにブザー回路を製作した。そのため、３回目のLED点滅回路のLEDをスピーカーに交換するとスピーカーから音が生じる。
音の高さはICにつなぐ抵抗の値できまる。そこで、耳で聴いたスピーカーの音から抵抗値を予想するゲームを行い、抵抗値が大きくなるとブザーの音が低くなることを耳で実感した。ゲームの正解率は人により異なっていたが、抵抗値と音の高さの関係については全員が理解することができた。
半固定抵抗のはたらきを学ぶ回路を製作し、配布した回路図および配線図をもとに電子ピアノの製作を行った。 受講者はこれまでに得た知識や技術を活かし、電子ピアノの製作を順調に行っていた。
前回に引き続き、配布した回路図および配線図をもとに電子ピアノの製作を行った。受講者のうち、欠席した１名を除いた全員が電子ピアノをスムーズに完成させることができた。
電子ピアノの耳による調律を行った。受講者は、全員十分な時間をかけて調律に取り組み、人間の感覚に基づいた調律の難しさを実感してもらった。
オシロスコープに電子ピアノを接続して調律を行い、音階が高くなるとオシロスコープに現れる波の数が増えるということを目で見て実感した。
全回出席していた受講者は、全員がこのことを実感することができ、調律の結果納得のいく音を出すことができた。
また、欠席した回のあった受講者1名についても、この日までに電子ピアノ回路を完成させ、音階と波形の関係について理解してもらうことができた。
８回目に受講者全員が電子ピアノの調律を独力で成功させることができたことから、受講者全員が本講座の目的である音階と波形の関係の理解をすることができたといえる。
また、特に４回目の抵抗当てゲームや、７・８回目の授業においては、講師が指示をしなくても受講者が互いに声を掛け合いながら課題に取り組む姿が見られた。協力の重要性を自ら発見してくれたという予想以上の意義がある講座であった。
①３回目の回路の故障などのトラブルは、半田づけの技術習得が１回目に充分にできていなかったためだと考えられる。２回目以降にも半田づけの練習を取り入れるなどして、さらに技術の基礎を固めさせたい。
②電子工作の経験者は課題をこなすスピードが速かったため、経験者向けの発展課題をより多く準備しておくと幅広い層の受講者を迎えることができるのではないかと思った。
以下の図はデモ画面です → 実行ページこちら
そもそも電気力線とは、電気力を視覚的に表現するために導入された仮想的な線のことです。
電気力線の一般的な特徴は次のとおりです。
（１）正の電荷から負の電荷に向けて電場の向きを沿う。
（２）途中で途切れたり交差したりせず、正の点電荷から無限遠へ、逆に負の電荷にむけて無限遠から電気力線が到達する。
（３）電場が強いほど、電気力線の密度が高い。
電気力線は電場の空間依存性から計算することができるわけですが、
電気力線を、電場をと表した場合、
の関係があります。は１次元的な電気力線の位置を表す媒介変数となります。 式(1)からコンピュータで計算するためのアルゴリズムは、
となります。式(2)を図示したのが下図です。
式(1)→(2)の導出はオイラー法として知られる差分法となります。 空間上の任意の点とその位置における電場が得られると、電気力線の次の位置を決めることができます。点電荷でつくられる電場は、各点電荷によるクーロンの法則の重ねあわせで厳密に計算することができます。
つまり、厳密に得られる電場の空間分布から式(2)を用いて、近似的に電気力線を計算することができるわけです。ただし、
本稿で作成した電気力線シミュレータは、厳密な意味で電気力線ではありません。
その理由は、
（１）電荷の大きさと、電気力線の本数を関連付けしていない
（２）正の点電荷からだけではなく、負の点電荷からも電気力線を延ばしている。
（３）電場が「０」になる所で交わることがある。
ためです。
上記（１）は単純に描画結果を単純化するためです。（２）は負の点電荷に無限遠から流入する電気力線を表現するためです。
もちろん負の点電荷の場合、式(2)の電場の符号は「-」になります。
（３）についてですが、点電荷が生み出す電場が打ち消しあい「０」となる点が存在します（例えば、正の点電荷が２つだけ並んでいる場合のちょうど中間地点など）。電気力線を描画する際の初期点によってはその電場「０」の地点に向かうものもあり、その点が電気力線の終点となります。その点に向かう線が複数存在した場合、終点となるその点で交わることになります。
つまり、電気力線の描画ルール「交わらない、途切れない」に違反することになります。
しかしながら、もともと電気力線は電場の流れを可視化するために導入された手法なので、
ルール違反があっても物理的には間違いはありません。
var PI = Math.PI;
var e = Math.E;
var c = 2.99792458E+8;
var mu0 = 4.0*PI*1.0E-7;
var epsilon0 = 1.0/(4.0*PI*c*c)*1.0E+7;
var e0 = 1.60217733 * 1.0E-19;
var Lx=100, Ly=100, Lz=0;
var dz = 1.0E-6; //空間刻み幅
//////////////////////////////////////
//点電荷の設定
/////////////////////////////////////
var ElectricCharge = function(charge, x, y, z){
this.charge = charge;
this.x = x;
this.y = y;
this.z = z;
this.flag = true;
}
var N_EC = 4; //点電荷の個数
var ECs = new Array();
ECs[0] = new ElectricCharge (1.0*e0, -10*dz, -10*dz, 0 );
ECs[1] = new ElectricCharge (-1.0*e0, 10*dz, -10*dz, 0 );
ECs[2] = new ElectricCharge (-1.0*e0, -10*dz, 10*dz, 0 );
ECs[3] = new ElectricCharge (1.0*e0, 10*dz, 10*dz, 0 );
var N_EF = 20000; //電気力線のステップ数
var N_Skip = 100; //データ出力間引き数
var N_D = 100; //電気力線計算時の単位長さあたりの刻み幅
var N_EF_V = 6; //緯度方向の分割数
var N_EF_H = 18; //経度方向の分割数
var n_step = N_EF/N_D; //電気力線１本値のデータ数
var n_line = N_EF_V*N_EF_H;//１電荷あたりの電気力線の本数
/////////////////////////////////////////////////////////////////////////////
//計算結果を記録用３次元配列を定義
var Lines;
function initLine(){
Lines = new Array(N_EC);
for (var i = 0; i < N_EC; i++)
Lines[i] = new Array(n_line);
for (var i = 0; i < N_EC; i++)
for (var j = 0; j < n_line; j++)
Lines[i][j] = new Array();
}
var $id = function(id) { return document.getElementById(id); }
function init(){
initLine();
for(var i=0; i<N_EC; i++){
$id("e"+i+"c").value = ECs[i].charge/e0;
$id("e"+i+"x").value = ECs[i].x/dz;
$id("e"+i+"y").value = ECs[i].y/dz;
$id("e"+i+"z").value = ECs[i].z/dz;
}
}
function restart(){
initLine();
for(var i=0; i<N_EC*n_line; i++){
scene.remove( lines[i] );
}
for(var i=0; i<N_EC; i++){
scene.remove( balls[i] );
ECs[i] = { charge: parseFloat($id("e"+i+"c").value)*e0,
x:parseFloat($id("e"+i+"x").value)*dz,
y:parseFloat($id("e"+i+"y").value)*dz,
z:parseFloat($id("e"+i+"z").value)*dz,
flag: $id("e"+i+"i").checked }
}
initObject();
}
function culStart(){
////////////////////////////////////////////////////////////////////////////
for(var q=0; q<N_EC; q++){//各点電荷
if(!ECs[q].flag) continue;
var ll=0;
for(var n_theta=0; n_theta<N_EF_V; n_theta++){
var theta = PI/N_EF_V * n_theta;
var n_EF_H = parseInt(N_EF_H * Math.abs(Math.sin(theta)));//経度方向の分割数を緯度によって変える
if(n_EF_H%2==1) n_EF_H++; //奇数→偶数
if(n_EF_H == 0) n_EF_H =1; //0だとまずいので
for(var n_phi=0; n_phi<n_EF_H; n_phi++){
ll++;
var phi = 2.0*PI/n_EF_H * n_phi ;
var ELine_x, ELine_y, ELine_z;
ELine_x = ECs[q].x + dz * Math.sin(theta) * Math.cos(phi);
ELine_y = ECs[q].y + dz * Math.sin(theta) * Math.sin(phi);
ELine_z = ECs[q].z + dz * Math.cos(theta);
Lines[q][ll-1][0] = {x:ELine_x/dz, y:ELine_y/dz, z:ELine_z/dz};
OUT :
for(var j=1; j<=N_EF; j++){
if(j%N_Skip==0) Lines[q][ll-1][j/N_Skip] = {x:ELine_x/dz, y:ELine_y/dz, z:ELine_z/dz};
var Ex =0, Ey = 0, Ez = 0, E_abs;
for(var i=0; i<N_EC; i++){
if(!ECs[i].flag) continue;
var R = Math.sqrt(Math.pow(ELine_x-ECs[i].x,2) + Math.pow(ELine_y-ECs[i].y,2) + Math.pow(ELine_z-ECs[i].z,2));
Ex += ECs[i].charge/(4.0*PI*e0) * (ELine_x-ECs[i].x)/Math.pow(R,3);
Ey += ECs[i].charge/(4.0*PI*e0) * (ELine_y-ECs[i].y)/Math.pow(R,3);
Ez += ECs[i].charge/(4.0*PI*e0) * (ELine_z-ECs[i].z)/Math.pow(R,3);
}
E_abs = Math.sqrt(Math.pow(Ex,2)+Math.pow(Ey,2)+Math.pow(Ez,2));
if(ECs[q].charge > 0){
ELine_x += Ex/E_abs *dz/N_D;
ELine_y += Ey/E_abs *dz/N_D;
ELine_z += Ez/E_abs *dz/N_D;
}else{
ELine_x -= Ex/E_abs *dz/100 ;
ELine_y -= Ey/E_abs *dz/100 ;
ELine_z -= Ez/E_abs *dz/100 ;
}
if(E_abs*e0<1E-15) break;
for(var i=0; i<N_EC; i++)
if(Math.sqrt(Math.pow(ELine_x-ECs[i].x,2)+Math.pow(ELine_y-ECs[i].y,2)+Math.pow(ELine_z-ECs[i].z,2)) < dz ) break OUT;//点電荷に到達したら終了
}
}
}
}
}
var width, height;
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
try {renderer = new THREE.WebGLRenderer({antialias: true});} catch (e) {}
if(!renderer) document.getElementById("errer").innerHTML = '<p style="text-align:center;font-size:small; color:red">お使いの環境ではWebGLはご利用いただけません。<br />WebGLに対応していない方のためにGIFファイルを以下に用意しました。<br /><br /><img src="http://www.natural-science.or.jp/images/tutorial6.gif" alt="WEBGLデモ" /></p>';
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColorHex(0x000000, 1.0);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light, light2;
function initLight() {
light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
light.position.set( 100, 100, 100 );
scene.add(light);
light2 = new THREE.AmbientLight(0x777777);
scene.add(light2);
}
var lines = new Array();
var balls = new Array();
function initObject(){
culStart();
var ll=0;
for (var i = 0; i < N_EC; i++) {
if(!ECs[i].flag) continue;
for (var j = 0; j < n_line; j++) {
var geometry = new THREE.Geometry();
for (var k = 0; k < n_step; k++) {
if(Lines[i][j][k] != undefined && Lines[i][j][k] != undefined && Lines[i][j][k] != undefined)
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( Lines[i][j][k].x , Lines[i][j][k].y, Lines[i][j][k].z) ) );
else break;
}
lines[ll] = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: "0xFFFFFF", opacity:0.4} ) );
scene.add( lines[ll] );//シーンに追加
ll++;
}
//点電荷の描画
var chargeColor;
if(ECs[i].charge < 0) chargeColor = "0x0000FF";
else chargeColor = "0xFF0000";
balls[i] = new THREE.Mesh(
new THREE.SphereGeometry(ECs[i].charge/e0,20,20),
new THREE.MeshLambertMaterial({color: chargeColor, ambient:chargeColor})
);
balls[i].position.set(ECs[i].x/dz, ECs[i].y/dz, ECs[i].z/dz);
scene.add(balls[i]);
}
}
function initEvent(){
window.addEventListener("mousedown", onMousedown, false);
window.addEventListener("mouseup", onMouseup, false);
window.addEventListener("mousemove", onMousemove, false);
window.addEventListener("mousewheel", onMousewheel, false);
window.addEventListener("dragover", onCancel, false);
window.addEventListener("dragenter", onCancel, false);
window.addEventListener("drop", onDropFile, false);
$id("restartButton").addEventListener("click", restart, false);
$id("outputButton").addEventListener("click", f_write, false);
}
function loop() {
camera.position.set(cameraR*Math.sin(cameraTheta)*Math.cos(cameraPhi),
cameraR*Math.sin(cameraTheta)*Math.sin(cameraPhi),
cameraR*Math.cos(cameraTheta));
renderer.clear();
camera.lookAt( {x:0, y:0, z:0 } );
renderer.render(scene, camera);
window.requestAnimationFrame(loop);
}
function threeStart() {
initEvent();
initThree();
initCamera();
initScene();
initLight();
initObject();
loop();
}
////マウスイベント////////////////////////////////////////////////////
var down = false;
var sy = 0, sz = 0;
var cameraR = 100, cameraTheta =PI/4, cameraPhi =PI/2;
function onMousedown (ev){ //マウスダウン時イベント
if (ev.target == renderer.domElement) {
down = true;
sy = ev.clientX; sz = ev.clientY;
}
};
function onMouseup (){ //マウスアップ時イベント
down = false;
};
function onMousemove (ev) { //マウスムーブ時イベント
var speed = 0.01;
if (down) {
if (ev.target == renderer.domElement) {
var dy = -(ev.clientX - sy);
var dz = -(ev.clientY - sz);
cameraPhi += dy*speed;
cameraTheta += dz*speed;
sy -= dy;
sz -= dz;
}
}
}
function onMousewheel(ev){//マウスホイール時イベント
var speed = 0.1;
cameraR += ev.wheelDelta * speed ;
}
var onDropFile = function(ev){ // ファイルドロップ時イベント
ev.preventDefault();
var file = ev.dataTransfer.files[0]; // File オブジェクトを取得
readFile(file); // ファイル読み込み
};
var onCancel = function(ev){ // デフォル処理をキャンセル
if(ev.preventDefault) { ev.preventDefault(); }
return false;
};
function f_write(){
var str = "";
for (var i = 0; i < N_EC; i++) {
if(!ECs[i].flag) continue;
for (var j = 0; j < n_line; j++) {
var geometry = new THREE.Geometry();
for (var k = 0; k < n_step; k++) {
if(Lines[i][j][k] != undefined && Lines[i][j][k] != undefined && Lines[i][j][k] != undefined)
str += Lines[i][j][k].x + " " + Lines[i][j][k].y + " " + Lines[i][j][k].z + "\n";
else break;
}
str += "\n";
}
}
var blobBuilder;
if ("MozBlobBuilder" in window) {
blobBuilder = new MozBlobBuilder();
} else if ("WebKitBlobBuilder" in window) {
blobBuilder = new WebKitBlobBuilder();
}
blobBuilder.append(str);
//var disp = document.getElementById("download");
if (window.URL) {
window.open(window.URL.createObjectURL(blobBuilder.getBlob()) , "New Window", "");
} else if (window.webkitURL) {
window.open(window.webkitURL.createObjectURL(blobBuilder.getBlob()), "New Window", "");
}
//disp.innerHTML = 'ファイルがダウンロードされました （t='+ t +'）';
}
///////////////////////////////////////////////////////////////////////
window.onload = function(){
init();
threeStart();
}
任意の点電荷分布に対する電気力線を計算するC言語のプログラムも合わせて公開しておきます。
→ダウンロード（4kB）
■ HTML5による物理シミュレーション環境の構築 ～２重振子シミュレータ～
■ HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
■ HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（２／３）～
■ HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（３／３）～
ミスの指摘、質問やコメントなどがありましたら、お気軽にこちらまで、お願いいたします。
]]>ambient:0x050505
「２重振子シミュレータ」より
ambient:0xffffff
「２重振子シミュレータ」より
環境光（THREE.AmbientLight）を利用していて、材質に「ambient」を設定していない場合、描画は白っぽくなります。 バージョンアップに伴うパラメータのデフォルト値の変更はあまり無いようです。 詳しい変更点などは本家ページをご覧下さい。
]]>