p5-matter を使って p5.js での物理演算エンジン（Matter.js）の利用を簡単化する【概要編】

13494 ワード
p5.js JavaScript p5-matter Matter.js JavaScript テキストリンク

今回の記事の内容は、以下の記事の最後に書いた「p5-matter」の話です。

●p5.js と物理演算エンジン「Matter.js」の組み合わせをお試し - Qiita
　https://qiita.com/youtoy/items/0b16f6fb3a1c76d64b68

前回の記事では、p5.js での描画処理に「物理演算エンジン Matter.js」を取り入れるという内容を、CodingTrain のリポジトリの中で公開されていたサンプルをベースにして進めました。
その際に、Matter.js の処理をいろいろ書く必要があったのですが、その処理を簡単化できる p5-matterというライブラリがあるらしいです。
（物理演算エンジンのお試しをあれこれやっている中、Twitter で「@takawo さんが OpenProcessing で過去に公開された作品」をツイートされているの見かけ、そこでロードされているライブラリの一覧を見ていた時に知りました）

そこで、今回は p5-matter の公式の情報を見ていきつつ、簡単なお試しをしてみようと思います。

p5-matter の公式ページ関連

公式ページの情報をいろいろ見ていきたいところですが、まずは何か動くものを触れると楽しそうです。

スターターテンプレートを試す

中身を見てみる

公式ページを見ていくと、以下のように「Starter Template」という記載と、「Download the Starter Template! というリンク」がありました。

これをダウンロードして、中身を見てみます。
ファイルｎ中身の構成は、「index.html」・「sketch.js」・「3つのライブラリ」となっているようです。

その中の「index.html」と「sketch.js」の中身を見てみます。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Starter Template | p5-matter</title>
  </head>
  <body>

    <script src="lib/p5.js/0.5.11/p5.min.js"></script>
    <script src="lib/matter.js/0.12.0/matter.min.js"></script>
    <script src="lib/p5-matter/1.1.0/p5-matter.min.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>

/* This is the start of a simple p5.js sketch using p5-matter.
 Use this as a template for creating your own sketches! */

var ball;
var floor;

function setup() {
  // put setup code here.
  createCanvas(600, 600);

  ball = matter.makeBall(width / 2, 40, 80);
  floor = matter.makeBarrier(width / 2, height, width, 50);
}

function draw() {
  // put the drawing code here
  background(0);

  fill(127);
  floor.show();

  fill(255);
  ball.show();
}

前回の記事で登場したプログラムは実行内容が上記とは違いますが、対応関係がとれそうな部分を見て比べると、今回の JavaScript のプログラムが圧倒的に短そうです。

オンライン環境（p5.js Web Editor）で動かしてみる

前回の記事と同様に、オンラインの開発・実行環境である p5.js Web Editor を使って、こちらを動かしてみます。

p5.js Web Editor のデフォルトの index.html をもとに、p5.sound.min.js を削除し、matter.min.js（現時点の最新版を CDN から読み込み）と p5-matter.min.js を追加しました。
p5-matter.min.js は CDN からは読み込めなそうだったので、ファイルをアップロードして、それを読むようにしています（※ バージョンは 1.1.0）。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script><!-- 追加 -->
    <script src="./p5-matter.min.js"></script><!-- 1.1.0 追加 -->

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

デフォルトの style.css は特に変更は加えていません。

そして、sketch.js の処理内容は以下としました。
少し makeBarrier の縦方向の位置をずらしたくらいで、全体的には元の内容ほぼそのままという感じです。

sketch.js
let ball;
let floor;

function setup() {
  // put setup code here.
  createCanvas(640, 480);

  ball = matter.makeBall(width / 2, 40, 80);
  floor = matter.makeBarrier(width / 2, height-30, width, 50);
}

function draw() {
  // put the drawing code here
  background(0);

  fill(127);
  floor.show();

  fill(255);
  ball.show();
}

上記の内容で処理を実行すると、以下のような結果が得られます。

公式サンプルを見てみる

公式のページを見ていくと、公式サンプルが見られるリンクがいろいろ掲載されてました。

どれも興味深かったですが、個人的には特に以下が面白かったです。

公式ページに、Matter.js のカスタマイズ性をある程度制限して処理を簡単化、ということを書いていたように思いますが、p5-matter のサンプルを見る限りはいろいろと面白いことができそうです。

まとめ

今回、物理演算エンジンの Matter.js を p5.js と組み合わせて利用する際に、その処理を簡単化できる p5-matter を軽く試してみました。
また、公式で公開されているサンプルを見てみたり、その中の 1つを紹介してみたりしました。

公式サンプルを見て、何が実現できるかという情報はある程度見たものの、細かな部分は確認できてないので以下の公式ドキュメントを読んでみたりしつつ、また何か作品に取り入れられればと思います。

●p5-matter 1.0.0 | Documentation
　http://palmerpaul.com/p5-matter/docs/

以下の仕組みとかに組み込むと、面白いことができたりしそうかな。

【追記】 活用編1 の記事を書きました

●p5-matter を使って p5.js での物理演算エンジン（Matter.js）の利用を簡単化する【活用編1】 - Qiita
　https://qiita.com/youtoy/items/7fa6f6e6df2cf60133e6