javascriptによる物理シミュレーション：はじめに

↑にアニメーションが出ない人はここをクリック すいません、あなたのブラウザがjavascriptのclass機能をサポートしてない可能性が高いです（Microsoft Internet Explorerはサポートしていません）。他のブラウザを試してみてください。
Microsoft Edgeを利用していて、タッチパネルのディスプレイを使っている人はここをクリックアドレスバーに「about:flags」と入れて出てきた設定の中の「タッチイベントを有効にする」を「ON」にしてください。

　上に貼り付けたのは分子運動のシミュレーションで、分子どうしが力を及ぼし合いつつ動いている。見ていると近づくと斥力が働いて運動量を交換しつつまた離れていく様子が見える。

　実は「このプログラム」の為だけに書いた部分は↓だけである。

		var ps;
		function initBunsi(n) {
			var j;
			var w1=ps.w-3;
			var h1=ps.h-3;
			var maxv=1;
			for (j=0; j< n ; j++) {
				var m=new Ball(ps,w1*Math.random()-w1*0.5,h1*Math.random()-h1*0.5,2*maxv*Math.random()-maxv,2*maxv*Math.random()-maxv,0.4,"rgba(0,0,0,0.8)");
			}
		}
		function init(canvas_string) {
			ps=new Phystem(canvas_string,20,20,0.5);
			ps.makeEdge();
			ps.drawVFlg=true;
			initBunsi(100);
			ps.start();
		}

　もちろん、プログラム全体はこれで終わりではないが、残りの部分は「このプログラム」の為だけに書いた部分ではなく、いろんなプログラムで共有できる部分なのである。この共有部分は、ファイルの最初の方の

		<script src="phystem.js"></script>

で読み込むようになっている。


　たとえばどんなのができるかというと、「ニュートンのゆりかご」（授業では実物を見せます。Youtubeならこれなど）をこのプログラムでシミュレートしたのが、

ニュートンのゆりかご

です。

　振り子を使ったおもちゃでは「ペンデュラムウェーブ」（授業では実物を見せます。Youtubeならこれなど）というのもありますが、それをプログラムしたのが、

振り子たくさん

です。こんなのも、かんたんにプログラムできるようになります。

phystem.jsの中で定義されているclassの説明は、scrapboxによるまとめで見ることができる（プログラムするときは「新しいウィンドウで開く」で横に開いておくとよい）。

　ここから始まるチュートリアルの目標は、

ということである。

　これらのプログラムを動かす環境としては、Chrome,Edge,Firefoxなどのwebブラウザがあればよい。また、プログラムの編集はテキストエディタ（emacs,TeraPad、秀丸、Visual Studio Codeなど、テキストが編集できるエディタならなんでもよい。なんならWindows付属のメモ帳でも問題ない）でプログラムの編集を行う。

　テキストエディタでなんとか.htmlファイルを編集し、それをwebブラウザで開くだけで実行できる。なお、Chromeなどにはjavascriptのデバッガがついているので、それを使うとバグの発見などは楽である。

　では、以下の目次に従って、簡単なところから実行していくことにしよう。

目次

　作って欲しいのは、なんらかの「遊べる」「見ていて楽しい」「勉強になる」物理シミュレーション。プログラムできるのは質点系のみでしかも2次元運動しかできないが、いろいろおもしろいものが作れるのではないかと思う。