デモの使い方

Matter.jsの物理エンジンで400個の粒子を液体のように動かし、マウス位置で重力の向きを変えられるデモです。

物理エンジン Matter.js 流体シミュレーション

操作手順

  1. マウスを画面上で動かし、マウス位置に合わせて重力の向きが変わるのを確認
  2. 青い液体粒子が重力に従って流れ、中央の円や斜めの板の障害物を回避しながら落ちていく様子を観察
  3. マウスを動かして粒子全体の流れの向きを操ってみる

活用シーン

  • Matter.jsによる多数粒子の物理演算の学習
  • 重力ベクトル制御による液体風表現の実装例
  • インタラクティブな演出コンテンツの参考実装

Pseudo-Fluid Physics

マウスの位置に合わせて重力が変化し、液体(数百個の粒子)が流れます。
障害物を回避して流れる様子を観察してください。