JavaScriptで物理法則を制御する「Coffee Physics」

マウスでグリグリしてもらうと無重力でスーパーボールを動かしているみたいに動きます。

以前、Flash ASで粒子を制御する「Flint Particles」を紹介しましたが、今回は物理法則を制御する「Coffee Physics」をご紹介します。

合計6種類のデモが用意されており、画面内の「Demo」から選べます。

「Flint Particles」と「Coffee Physics」は両者とも大量のオブジェクトを扱うので、似たような物に思えます。たしかに両者は極めて近い技術で、「Flint Particles」のデモである「炎と煙」の粒子は、煙が上に向かうという点で物理法則で動いています。

大きな違いは「Coffee Physics」には当たり判定が存在し、相互のオブジェクトに干渉しあうという点です。

また「Flint Particles」はFlashだったのでiPadでは表示することが出来ませんが「Coffee Physics」なら大丈夫。これはJavaScriptのアドバンテージですが、かなり大きなポイントと言えます。

Attraction

Attraction

マウスを中心にドーナツの輪のような状態で安定します。

Balloon

Balloon

紐付き風船を上から見ているような感じ。重なった時は色が白に近づく。

Bounds

Bounds

サークルそれぞれが自由に動いている。このモードに当たり判定はなさそう。

Chain

Chain

無重力でかつ風がある中で紐を掴んでいる感じ。オブジェクト同士をリンクさせることができるという機能のアピール。

Cloth

Cloth

布の再現。描画はワイヤーフレームだが、ハリウッド映画のCGであっても同じ計算に基づいており、レンダリングが違うだけ。

Collision

Collision

Attraction + Balloonという感じ。当たり判定とオブジェクト間リンクが同時に機能している。

なかなか使いどころが難しいライブラリですが、ゲーム用途やアーティスティックな表現などに向いていると思います。 →soulwire/Coffee-Physics · GitHub

こちらは現実世界で大量のスーパーボールを坂から転がしたらどうなるか?というソニーのブラビアのCM。車のガラスとか大丈夫なんでしょうか?