【GASでサイエンス】2D物理シミュレーション用ライブラリ「Matter.js」をGASに組み込んでみる（3）～コードの実装(続き）～
この記事は、2次元の物理シミュレーション用ライブラリ「Matter.js」を組み込んだ、GASによる物理シミュレーションアプリのご紹介です。
アプリ（デモ程度の機能です）の内容は以下をご覧ください。
上記の物体の大きさなどの諸元は、以下の様に、Goolgeスプレッドシートにデータを書いて制御できます。
この記事は、以下の記事の続きとなります。
先回の記事までで、「物理エンジン」「結果の描画」部分までの実体化が済みました。残る準備は、登場させる物体、およびこれらをシミュレートする空間の実体化です。今回はここから始めます。
GASのコードの続き～シミュレーションに登場する物体のインスタンスを実体化する～
「Matte.js」で、登場する物体を実体化するには、以下の様に記述します。
物体を受ける変数 ＝ Bodies．図形種類（座標など）；
「図形種類（座標など）」の部分は図形種類によって、違うのですが、今回登場させる長方形とボールなら以下の様になります。
長方形 rectangle(x座標, y座標,幅, 高さ)
ボール circle（x座標, y座標, 半径）
座標などの数値は、res[*][*] という配列に入っているデータを利用しています。
また、isStatic: true とオプションを指定する事で、固定物体となります。ここでは、床と障害物をこれで指定しています。
この部分のコードは以下の通りです。
//長方形 rectangle(x座標,y座標,幅,高さ)
var myBoxA = Bodies.rectangle(res[0][0], res[0][1], res[0][2], res[0][3]);
//isStatic: true ← 不動設定
var myBoxB = Bodies.rectangle(res[1][0], res[1][1], res[1][2], res[1][3], { isStatic: true });
//ボール circle（x座標,y座標,半径）
var myBallA = Bodies.circle(res[2][0], res[2][1], res[2][2]);
var myBallB = Bodies.circle(res[3][0], res[3][1], res[3][2]);
//地面：長方形で不動設定
var myGround = Bodies.rectangle(res[4][0], res[4][1], res[4][2], res[4][3], { isStatic: true });
res[A][B]という表記は、Javascript では、resの中にあるA番目の配列の、その中にあるB番目の子配列を示します。VBAなどの様に、２次元配列 配列を使った res（A、B）の様な書き方はできませんのでご注意ください。
ところで、物体の座標などの諸元が入っている res[*][*] という配列は、スプレッドシートのセルの情報を取り込んだものです。
こまごまとした諸元の設定が、こうして記述できるのでとても便利です！
さて、上記の値を配列resに取り込むのは、Google.script.run（）関数を使っています。この関数は、スクリプト内に記述した関数を実行し、レスポンスを取り込む機能があります。
また、そのレスポンスを利用して、再びテンプレート内で関数を実行させることができます。
この関数の記述は以下の様なコードになります。
google.script.run.withSuccessHandler(成功したら実行する関数).スクリプト内の関数(引数);
function 成功したら実行する関数(レスポンス){
・・・処理・・・
}ちょっとわかりにくいですが、これを利用して、スプレッドシートのセルの値を取得しています。
よび出すスクリプト内の関数
Google.script.run（）関数でテンプレートから呼び出される関数は以下の様に記述してあります。 この関数はGoogleスプレッドシートの特定範囲のセルの値を取得して返すだけのシンプルなもので、以下の様なコードになります。（シート名は「諸元」という前提です）
スクリプト内に記述する関数
//HTMLテーブルの値myCellsをシートに書き込む関数
function GetSheet(Row0, Col0, nRow, nCol){
//アプリケーションを取得｜★スプレッドシートID★は各自のものを記入
var myApp = SpreadsheetApp.openById('★スプレッドシートID★');
//対象シートをシートの名前を指定して取得
var mySheet = myApp.getSheetByName('諸元');
//セル範囲の値を返す
return mySheet.getRange(Row0, Col0, nRow, nCol).getValues();
}
全体のコードは後の記事でご紹介しますが、上記の様な関数を使って、スプレッドシートからテンプレート側に値を取得しています。
空間のインスタンスを実体化する
最後に、空間のインスタンスを実体化します。
これは、以下の様に記述します。
World.add(使用する物理エンジン、登場する物体）
以下がコードです。物理エンジンは、既に実態化した myEngine に子関数を付けて myEngine.world と記載しています。これだけで、細かい設定は無くしてデフォルトのままで実行されます。また、登場する物体は[ ]の中にカンマで区切って、すでに実態化させた長方形やボールをいくらでも記述可能です。
具体的なコードは以下です。
//空間の実体化｜空間を支配する物理エンジン、物体を記載します
World.add(myEngine.world, [myBoxA, myBoxB, myBallA, myBallB, myGround]);
ここまでで、道具立てと、それらの実体化が終わりました。
今回はここまでとします。
次回は、シミュレートの実行とGASによるコード全体をご説明の予定です。
