物理計算エンジンで軽量で動くものとしてMatter.jsがあります。古典物理法則に則って物体の動きを、衝突、摩擦、重力などの要素を考慮して計算しようとするとそれらを一から作り上げるには労力ですが、それらの機能を提供した「世界」を簡単に作り上げて、物体の動きをシミレーションできるものです。
公式のサイトは、
Getting started
https://github.com/liabru/matter-js/wiki/Getting-started#usage-example
Demo
https://brm.io/matter-js/demo/#stats
———————————————————
Tutorialのサンプルに、以下の機能を付け加えています。
① マウスコントロール追加
② 背景を透過にする（デフォルトは真っ黒）
③ オブジェクトに重力、反発係数、初速などを設定できるようにした
コードを有効にするには、Matter.jsをコピーしていずれかのディレクトリに配置してコードから呼び出すようにします。
GitHubのコードリンクは、
https://github.com/chateight/electron/tree/master/matter_case
になります。
物理計算エンジンはUnityなどにももちろん使われているわけですが、JavaScriptで「割と簡単」に扱うには良い素材ではないでしょうか。
P.S. 2022/9/16
・全てのボールに初期速度をインターバルタイム毎に与えるように変更
四角形と円とで２つの大まかなグループ分けで動くようになりました
admin