Safx: 流体シミュレーションエンジンLiquidFunをJavaScriptから使ってみる

流体シミュレーションエンジンLiquidFunのバージョン1.1.0が先日リリースされて、このバージョンからJavaScriptがサポートされました。

そこで、LiquidFun.jsとPaper.jsを利用して、簡単なデモを作ってみました。

LiquidFun.jsが今のところCDNで配布されていないようなので、GitHub Pagesを利用しました。

gopherの画像を読み込んで、ゴムっぽい感じにしたパーティクル集合に色を付けて、プルプルさせているだけです。

コード的には、

<script src="liquidfun.js"></script>

として読み込ませれば、あとはLiquidFunの機能がだいたい使えるようになりますので、

var gravity = new b2Vec2(0, -10);
world = new b2World(gravity);

として、ワールドを作成してから、オブジェクトを置いておけばよいです。

注意点としては、上で「だいたい」と書いたようにいくつかのメソッドが利用できなかったりすることと、シンボル名がちょっと違ったりすることです。

また、LiqudFunはレンダリングの機能はありませんので、描画は自前で行う必要があります。今回は Paper.jsを利用しましたが、LiqudFunでの利用にはあまり向いていなかったかも知れません。

ちなみに、LiquidFun.jsの作成にはEmscriptenを利用しているようです。

他のおもしろいデモはLiquidFun公式ページにありますので、そちらを参照してください。

Safx