202-p5.jsで2D物理シミュレーション
https://gyazo.com/169f14248015a73f680a54c5bb18ef59
p5.jsはビジュアルを作るのは得意だけど,物理エンジンを内蔵しているわけではないので,少し複雑な物理シミュレーションが必要になった場合には外部ライブラリに頼るのが良いです. かなり古いプロジェクトですが,まだ開発は継続されているようです.
基本的な考え方
物理エンジンで計算して,見た目はp5.jsで描画するという感じ
重要なのは完全に連携している訳ではないので,描画する座標とMatter.jsのエンジンで計算する座標を常に同期する必要があるということに注意が必要です.
確かにMatter.jsにも描画するためのレンダラーは存在するので,ものすごく簡単なものとかだったらこちらでも良いとは思うけど,描画が専門ではないのでいい感じの見た目を考えるとp5.jsとの連携を考えると良いと思う.
hr.icon
p5.js Web Editorを使う場合
手順1:Matter.jsの読み込み
CDN経由で読み込むのが楽かと思います
https://gyazo.com/82d6a945036c899cd5db1fd0f087014a
これをp5.jsのあとに入れましょう
https://gyazo.com/878f62074291c8f7bde7d95c33882d16
手順2:ベースになるコードの作成
参考