1000本突破
1000本突破
第22話
使ってみた

物理演算エンジン「Matter.js」を使ってみた(スマホも対応)

おじいちゃん

バウンドさせてみる

circleのオプションにあるrestitutionに任意の値を入れることで、バウンドさせることができます。

//circle(x座標,y座標,大きさ)
        var ball = Bodies.circle(375, 100, 50, {
            //バウンドさせたい場合はrestitutionに任意の値を渡す
            restitution: 0.9,
            isStatic: false,
            render: {
                lineWidth: 1,
                strokeStyle: '#d04030',
                fillStyle: '#d04030'
            }
        });

bound

簡単にボールをバウンドさせることができましたね。

梃子を作ってみる

次に梃子を作ってみます。

必要な図形を生成して、各オブジェクトの比重(density)を指定します。

STARGE.ballSample = function () {
        var _world = _engine.world;

        STARGE.reset();

        var ball = Bodies.circle(530, 100, 50, {
       density: 5,
            render: {
                fillStyle: '#d04030'
            }
        });
       
        //
        var catapult = Bodies.rectangle(400, 520, 330, 20, {
            density: 1,
            render: {
                fillStyle: '#efb233'
            }
        });

        var fodder = Bodies.rectangle(250, 500, 44, 44, {
       density: 0.3,
            render: {
                fillStyle: '#12579f'
            }
        });

 

次に生成した図形を追加してあげて、支点を支えるためのConstraintを生成。

World.add(_world, [
            ball
            catapult,
            fodder,
            Constraint.create({
                bodyA: catapult,
                pointB: {
                    x: 350,
                    y: 600
                },
                isStatic: true,
                render: {
                    visible: true
                }
            }),
            Constraint.create({
                bodyA: catapult,
                pointB: {
                    x: 450,
                    y: 600
                },
                isStatic: true,
                render: {
                    visible: true
                }
            })
        ]);
    };

 

固定したいオブジェクト(bodyA)と、どのポイントを軸に固定したいかという座標(pointB)を指定したConstraintを作ることで、点を固定することができます。

teco

梃子の動きを作ることができました。

おわりに

物理演算、使い方を考えると夢が広がりますね。

Matter.jsを利用して面白いアニメーションを作ってみてはいかがでしょうか。

週末にバスケをはじめたのですが、筋肉痛で3日ほどリアルおじいちゃんだったおじいちゃんでした。

まんだらっ

 

【まだまだあるぞ、便利なライブラリ】

「RxJS」初心者入門 – JavaScriptの非同期処理の常識を変えるライブラリ

Seriously.jsで動画・画像にリアルタイムエフェクトをかける方法【ほりぼーいドッキリ編】

アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる(その1)

Web初心者でもGoogle Mapsをカスタマイズできるgmaps.jsでAPIを使い倒そう!

p5.jsでProcessingのようにリッチなWeb表現を作るチュートリアル

  • 1
  • 2