#p5js の公式ページに掲載されたライブラリを見て 5つほどピックアップしてみる（2023年12月）【完走賞ゲット-6】

:::note info
※ [Qiita の完走賞をゲットするための条件は「単一／複数のカレンダーに投稿した記事が合計25」です](https://twitter.com/Qiita/status/1593441648796524545)
:::

この記事は、「[完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/youtoy)」の 6日目の記事です。

## 今回の内容
今回の記事の内容は、 [p5.js公式の libraries のページ](https://p5js.org/libraries/)に掲載されているライブラリの話です。

 ![libraries | p5.js](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ad334791-80e7-6740-1fc2-6c4726873e1e.png)

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

## ライブラリをピックアップ
### Community Libraries に掲載されたものを数えてみる
以下のトップにあるコアライブラリの「p5.sound」は除き、その下の「Community Libraries」のカテゴリで掲載されているものを見てみます。
![p5.soundなど](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/52bd7872-1ad7-08f4-85cb-3bbc63bb0f32.png)

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

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

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

#### p5.createloop
最初は「p5.createloop」です。

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

上記のページにアクセスすると、そのページ上でいくつかサンプルを見ることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2e8ad432-21b3-5b0c-6c3d-0cdab5c0e026.png)

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

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

https://twitter.com/youtoy/status/1493970738801700870

#### 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つの図形が表示されたものがありました。これらは、マウスオーバーやクリックに反応するのですが、　ブラウザの開発者ツールで要素を確認すると、キャンバス内に書かれた図形のようです。

![p5.experience.js](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/de211bb3-6cc0-c2e8-cb94-0db375f219d8.png)

上で紹介したページに「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
 
![p5.fab](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/78073402-295c-c4db-1fff-f34aa98e416a.png)

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

![online editorのリンク先](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b526d4e3-ba22-ceef-9f04-a268ed396e83.png)

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

![printer](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7d683da5-3fcf-0aba-8886-19c26e0e1f34.png)

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

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

#### p5.gibber
こちらは [charlieroberts/gibber.lib](https://github.com/charlieroberts/gibber.lib) のラッパーのライブラリのようです（公式ページの冒頭の説明の内容より）。

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

![p5.gibber](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/079c2175-170a-766c-efcb-078507ed4ec4.png)

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

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

![simple template](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fb703cec-d14c-cd8c-3843-3725eba23a11.png)

![FFT music visualization](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/855d2d20-f47c-6178-50e6-10405bc7cbac.png)

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

もし利用してみる際は、以下の 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

![p5.j5](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/017a6a26-a797-ee5c-08b6-a761d8f9a05a.png)

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

●Johnny-Five: The JavaScript Robotics & IoT Platform
　https://johnny-five.io/
![Johnny-Five](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/52003e95-84e6-06e1-5d83-06f5b74e0c25.png)

「Johnny-Five」が何かというと、こちらは[以下のページ](https://johnny-five.io/platform-support/)に掲載されているデバイスの開発を、JavaScript で行えるようにするものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/577724fb-359f-338e-8f5a-e1384d77723b.png)

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