今回の内容

今回の記事の内容は、 p5.js公式の libraries のページに掲載されているライブラリの話です。

たまに見に行くと、ライブラリが増えていることがあるので（そんなに頻繁ではないかもですが）、内容を見て気になるものをピックアップしてみようと思います。

ライブラリをピックアップ

Community Libraries に掲載されたものを数えてみる

以下のトップにあるコアライブラリの「p5.sound」は除き、その下の「Community Libraries」のカテゴリで掲載されているものを見てみます。

数えていったら 84個のライブラリが掲載されているようでした。

いくつかピックアップしてみる

Community Libraries に掲載されたものを見ていくと、ml5.js や p5play などよく見かける（そして、自分も過去に使ったり、複数の Qiita の記事を書いたことがある）ライブラリも並んでいます。

今回は、自分が p5.js を使った作品を見ていて、あまり見かけないかもと思うライブラリで気になったものを、5つほどピックアップしてみます。

p5.createloop

最初は「p5.createloop」です。

●p5.createloop - npm
　https://www.npmjs.com/package/p5.createloop

上記のページにアクセスすると、そのページ上でいくつかサンプルを見ることもできます。

noise を使ったランダムさを持たせたループアニメーションを作るのに便利そうです。

余談ですが、X で p5.createloop をキーワードに検索したら、過去の自分がポストしていたのを見かけました笑（手をつけてみなければ！）

p5.experience.js

次はこちらです。

●loneboarder/p5.experience.js: Extensive library for p5.js that adds additional functionality for creating web applications
　https://github.com/loneboarder/p5.experience.js

上記のページに掲載されたリンクから、サンプルページに行くと、以下の 3つの図形が表示されたものがありました。これらは、マウスオーバーやクリックに反応するのですが、　ブラウザの開発者ツールで要素を確認すると、キャンバス内に書かれた図形のようです。

上で紹介したページに「Extensive library for p5.js that adds additional event-listening functionality for creating canvas-based web applications.」と書かれているとおり、キャンバス内に描画された特定の内容対して、「DOM に addEventListener() を使うのと似たこと」ができるようです。

p5.fab

次は「p5.fab」です。こちらは、以下の公式ページの写真やその下に書かれたテキストから分かるように、3Dプリンタ関連のデータを扱えるもののようです。

●machineagency/p5.fab: A p5js library for digital fabrication!
　https://github.com/machineagency/p5.fab

上のページにある「online editor」のリンク先にアクセスすると、プリンタとのアクセスや処理の実行ができそうな画面が出てきました。

メニューの「printer」にカーソルを合わせると、プリンターを選択するためのものと思われるリストが出てきたりもします（一部の文字が隠れてしまってますが...）。

その右のほうにある「connect」を押すと、Web　Serial API の処理を実行した時に出てくる表示も出てきたので、このページからプリンタへの接続なども行えそうな感じでした。

また別途、詳細を確認してみようと思います。

p5.gibber

こちらは charlieroberts/gibber.lib のラッパーのライブラリのようです（公式ページの冒頭の説明の内容より）。

●p5.gibber | Gibber: Creative Coding for JavaScript
　https://charlie-roberts.com/gibber/p5-gibber/

gibber.lib は、調べてみると gibber というライブコーディング環境の、開発環境を除いたもののようでした。

p5.gibber について、試しに Examples の部分に並んでいるサンプルの 2つほどを開いてみます。
※ simple template と FFT music visualization

どちらも音が鳴り、その音に合わせて描画が行われるというサンプルでした。

もし利用してみる際は、以下の Gibber のマニュアルも見てみると良さそうでした。

●Introduction | gibber-user-manual
　https://bigbadotis.gitbooks.io/gibber-user-manual/content/

p5.j5

最後はこちらです。

●monteslu/p5.j5: Johnny-Five for Processing p5.js
　https://github.com/monteslu/p5.j5

こちらは、以下の Johnny-Five を p5.js と組み合わせて扱えるもののようです。

●Johnny-Five: The JavaScript Robotics & IoT Platform
　https://johnny-five.io/

「Johnny-Five」が何かというと、こちらは以下のページに掲載されているデバイスの開発を、JavaScript で行えるようにするものです。

おわりに

今回、p5.js公式のページの libraries で、Community Libraries に掲載されたものから、5つほど気になるものをピックアップしてみました。
それらについて簡単に内容も見てみましたが、内容を見ていてさらに気になったものは、実際に試していければと思います。