sample.htmlの中身の説明

sample.htmlの中身を説明していきます。

code:sample.html

<!DOCTYPE html>

<html>

<head>

<title>javascriptによる物理シミュレーション（サンプル）</title>

</head>

var psystem;

var M;

function init() {

psystem=new Phystem("canvas1",10,10,0.6);

psystem.makeEdge(0.3);

psystem.makeGravity(1);

M=new DynamicalObject(psystem,0,0,0,0,1,"rgba(255,0,0,0.5)");

M.enableDrag();

psystem.start();

}

</script>

</div>

<p>矢印の表示／非表示は右のボタンで調整→

<button onClick="psystem.drawFFlg = !psystem.drawFFlg;">力を表示On/Off</button>

<button onClick="psystem.drawVFlg = !psystem.drawVFlg;">速度表示On/Off</button>

</p>

<p>　この丸い物体はマウスや指でつかんで動かしたり投げたりすることができます。</p>

</div>

<hr>

<p align="center"><a href="./index.html#index">目次に戻る</a></p>

</body>

</html>

最初の方はとりあえずはいじらなくていいです。重要な部分だけを説明していきます。

code:html

の部分は、phytem.jsというjavascripファイル（さっき保存したやつ）を読み込んでいます。

code:html

は、このファイルが読み込まれた後に、init()という関数を呼びなさい、という司令です。その後に続く

code:html

と

code:html

</script>

に挟まれた部分がプログラム部分です。

最初の２行（varで始まる）のは後で使う変数の定義です。

code:js

function init() {

が関数 init()の定義の始まりです（この関数はbodyタグに書かれたonloadのおかげで最初に呼ばれます）。

code:js

psystem=new Phystem("canvas1",10,10,0.6);

で、この物理シミュレーションを動かす場所である「系」とそれを表示する「キャンバス」を設定しています。この関数が呼ばれると、"canvas1"というIDを持っているキャンバスを探します。

それはどこにあるかというと、下の方にある

code:html

</div>

の場所です。ここのid="canvas1"はこのキャンバスのIDを"canvas1"にしています。htmlファイルのうちこの部分にキャンバスが置かれることになります。

code:js

psystem=new Phystem("canvas1",10,10,0.6);

の次の二つの10は、キャンバスの横幅と縦幅です。最後の0.6はブラウザの画面の横幅のうちどれだけをこのキャンバスが占めるかを表します。これで画面横幅の0.6倍で、ｘ座標が-5から5、ｙ座標が-5から5のキャンバスができます。

code:js

psystem.makeEdge(0.3);

psystem.makeGravity(1);

でこの系の「端っこの壁」を作り「重力」を作り出してます。

code:js

M=new DynamicalObject(psystem,0,0,0,0,1,"rgba(255,0,0,0.5)");

で、この系に新しい物体を置きます。第１の引数はどの系に置くか、第２と第３の引数は置く場所（この場合(0,0)）、第４と第５の引数は初速度（この場合(0,0)）です。第６の引数は物体の質量を表し、最後の引数は色を表します。

その次の

code:js

M.enableDrag();

はこの物体を「ドラッグ可能」にします。

以上で準備が整ったので、

code:js

psystem.start();

で運動を「スタート」させます。