Matter.js でゴゴゴとドドドを物理演算してみるテスト

ここ数日、2D 物理演算がマイブームです。

f:id:cx20:20140518131834p:plain

JavaScript の 2D 物理演算ライブラリとして「box2dweb」をサンプルをよく見かけますが、シェイプと剛体を個別に作成する必要があり、個人的には、ちょっと使いにくい印象です。

そこで、比較的、最近登場した物理演算ライブラリ「Matter.js」を使ってみることにしました。このライブラリは機能的に「box2dweb」と遜色なく、後発なだけに、API も整理されていて分かりやすいです。他のライブラリに比べてコンパクトな点も特徴です。

ゴゴゴとドドド

ゴゴゴのコード（抜粋）

シェイプの Path は SVG ライクに記述する仕様のようです。

for (var i = 0; i < 3; i++) {
    var x = 100 + i * 10;
    var y = 100 - i * 100;
    var shape = {
        label: 'Shape Body' + i,
        position: {
            x: x,
            y: y
        },
        vertices: Vertices.fromPath('L5 10 L100 0 L95 95 L0 100 L5 80 L80 75 L85 15 L0 20'), // 「コ」
        render: {
            fillStyle: "#234"
        }
    };
    World.add(engine.world, [
        // 「コ」
        Body.create(Common.extend({}, shape)),
        // 「゛」
        Bodies.rectangle(x + 50, y - 50, 16, 32, {render: {fillStyle: "#234"}}),
        Bodies.rectangle(x + 70, y - 60, 16, 24, {render: {fillStyle: "#234"}})
    ]);
}

※ １点注意点としては、プロットの開始点を「M～」で始めると上手くいかないようです。

Matter.js のソースを確認したところ、以下の様になってました。「L～」しか見ていないようですね。

/**
 * Description
 * @method fromPath
 * @param {string} path
 * @return {vertices} vertices
 */
Vertices.fromPath = function(path) {
    var pathPattern = /L\s*([\-\d\.]*)\s*([\-\d\.]*)/ig,
        vertices = [];

    path.replace(pathPattern, function(match, x, y) {
        vertices.push({ x: parseFloat(x, 10), y: parseFloat(y, 10) });
    });

    return vertices;
};

ライブラリのサイズ

Matter.js の最新版、0.8.0 にて、box2dweb の 1/4 程度のようです。

ライブラリ名	サイズ
matter-0.5.0.js	124 KB
matter-0.5.0.min.js	37 KB
matter-0.8.0.js	191 KB
matter-0.8.0.min.js	53 KB
p2.js	291 KB
p2.min.js	92 KB
Box2dWeb-2.1.a.3.js	420 KB
Box2dWeb-2.1.a.3.min.js	220 KB