【サンプルコード】JavaScriptで物理演算エンジンのmatter.js〜図形の作成〜

2020年5月19日システムJavaScript

【サンプルコード】JavaScriptで物理演算エンジンのmatter.js〜図形の作成〜
【サンプルコード】JavaScriptで物理演算エンジンのmatter.js〜図形の作成〜

どうも、UT(@ut_1029)です。

JavaScript物理演算エンジンを簡単に実装出来るMatter.jsの紹介です。今回はMatter.jsを使って四角形や円などの図形を追加するデモプログラミングサンプルコードを解説します。

JavaScriptMatter.jsプログラミングするにあたって、以下の記事を参考にしました。

【勉強】JavaScriptで物理演算エンジンのMatter.js〜円を生成〜【プログラミング初心者の入門講座】#StudyWithMe
【勉強】JavaScriptで物理演算エンジンのMatter.js〜四角形を生成〜【プログラミング初心者の入門講座】#StudyWithMe

【サンプルコード】JavaScriptで物理演算エンジンのMatter.jsのサンプルコード

JavaScriptMatter.jsは、物理演算エンジンを使ったプログラミングを簡単に実装することが出来ます。ここではMatter.jsを使った簡単なサンプルコードを紹介します。

<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Matter.js Circle Sample</title>
</head>
<body>
    <div id="demo-canvas"></div>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="matter.js"></script>
    <script>
        // Matter Module
        var Engine = Matter.Engine,
            World  = Matter.World,
            Bodies = Matter.Bodies;

        // Canvas Window Width Height
        var width  = window.innerWidth - 50;
        var height = window.innerHeight - 50;

        var demoCanvas = document.getElementById('demo-canvas');

        // Matter Engine
        var engine = Engine.create(demoCanvas, {
            render: {
                options: {
                    wireframes: true,
                    showVelocity: true,
                    width: width,
                    height: height,
                    background: 'rgba(0, 0, 0, 0)'
                }
            },
        });

        // Make Bottom Wall(Rectangle)
        var wallBottom = Bodies.rectangle(
            0,
            height,
            (width * 2) + 10,
            10,
            {
                isStatic: true
            }
        );

        // Make Rectabgle
        var rectangle = Bodies.rectangle(
            Math.floor( Math.random () * width),
            50,
            150,
            150,
            {
                isStatic   : false,
                density    : 1.5,
                friction   : 0.7,
                restitution: 0.5,
                chamfer: {
                    radius: [
                        1, 1, 1, 1
                    ]
                },
            }
        );

        // Make Circle
        var circle = Bodies.circle(
            Math.floor( Math.random () * width),
            50,
            100,
            {
                isStatic   : false,
                density    : 1.5,
                friction   : 0.7,
                restitution: 0.5,
                chamfer: {
                    radius: [
                        1, 1, 1, 1
                    ]
                },
            }
        );

        // World Objects
        World.add(
            engine.world,
            [
                wallBottom, rectangle, circle
            ]
        );

        // Matter Run
        Engine.run(engine);

    </script>

</html>

【サンプルコード】JavaScriptで物理演算エンジンのMatter.jsのサンプルコードを解説

JavaScriptMatter.jsを使ったサンプルコードの解説をします。

HTML部分

HTML部分を解説します。

Matter.jsで描画するタグを用意

Matter.jsで描画するタグを用意します。

<div id="demo-canvas"></div>

JQueryを読み込む

JQueryを読み込みます。

<script src="jquery-1.10.2.min.js"></script>

Matter.jsを読み込む

Matter.jsを読み込みます。

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

Matter.jsは「https://brm.io/matter-js/」か「https://github.com/liabru/matter-js」から取得します。

JavaScript部分

次にJavaScript部分の解説をします。

Matter Module を作成

Matter.jsの処理で利用するモジュールを用意します。

var Engine = Matter.Engine,
    World  = Matter.World,
    Bodies = Matter.Bodies;
  • Matter.Engine
  • Matter.World
  • Matter.Bodies

Canvas Window幅

ウィンドウの表示幅を取得します。

var width  = window.innerWidth - 50;
var height = window.innerHeight - 50;

描画Elementを取得

描画するElementのIDの"demo-canvas"を指定して取得します。

var demoCanvas = document.getElementById('demo-canvas');

Matterエンジンを作成

Matterエンジンを作成します。

var engine = Engine.create(demoCanvas, {
    render: {
        options: {
            wireframes: true,
            showVelocity: true,
            width: width,
            height: height,
            background: 'rgba(0, 0, 0, 0)'
        }
    },
});
  • Engine.create
    • render
      • options
        • wireframes:ワイヤーフレームモード
        • showVelocity:動力ベクトル
        • width:横幅
        • height:縦幅
        • background:背景色

ドキュメント:matter.js – Engine

地面を作成

Bodies.rectangle()で地面を作成します。

var wallBottom = Bodies.rectangle(
    0,
    height,
    (width * 2) + 10,
    10,
    {
        isStatic: true
    }
);
  • Bodies.rectangle
    • 第1引数:X
    • 第2引数:Y
    • 第3引数:横幅
    • 第4引数:縦幅
    • 第5引数:オプション
      • isStatic:(固定表示:true)

ドキュメント:matter.js – Bodies rectangle

四角形を作成

Bodies.rectangle()で四角形を作成します。

var rectangle = Bodies.rectangle(
    Math.floor( Math.random () * width),
    50,
    150,
    150,
    {
        isStatic   : false,
        density    : 1.5,
        friction   : 0.7,
        restitution: 0.5,
        chamfer: {
            radius: [
                1, 1, 1, 1
            ]
        },
    }
);
  • Bodies.rectangle
    • 第1引数:X
    • 第2引数:Y
    • 第3引数:横幅
    • 第4引数:縦幅
    • 第5引数:オプション
      • isStatic:(固定表示:true)
      • density:質量
      • friction:摩擦
      • restitution:跳ね返り
      • chamfer:
        • redius:

円を作成

Bodies.circle()で円を作成します。

var circle = Bodies.circle(
    Math.floor( Math.random () * width),
    50,
    100,
    {
        isStatic   : false,
        density    : 1.5,
        friction   : 0.7,
        restitution: 0.5,
        chamfer: {
            radius: [
                1, 1, 1, 1
            ]
        },
    }
);
  • Bodies.circle:
    • 第1引数:X
    • 第2引数:Y
    • 第3引数:redius(半径)
    • 第4引数:オプション
      • isStatic:(固定表示:true)
      • density:質量
      • friction:摩擦
      • restitution:跳ね返り
      • chamfer:
        • redius:

ドキュメント:matter.js – Bodies circle

地面や四角形、円を世界へ投入

先ほど作成した地面や四角形、円などの図形を物理演算エンジンの世界へ追加します。

World.add(
    engine.world,
    [
        wallBottom, rectangle, circle
    ]
);
  • World.add:
    • 第1引数:world
    • 第2引数:オブジェクト

ドキュメント:matter.js – World add

Matterエンジン起動

Matterエンジンを起動します。

Engine.run(engine);

ドキュメント:matter.js – Engine.run

おわり

JavaScriptのMatter.jsを使うと物理演算エンジンを簡単に利用して、実装することが出来ます。今回は図形の作成だけ紹介しましたが、イベント処理なども簡単に定義することが出来ます。今後紹介できれば解説記事を投稿します!

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年5月19日システムJavaScript

Posted by UT