この記事は、「Adventar で公開されている Processing Advent Calendar 2024」の 15日目の記事です。
はじめに
この記事では「自分が p5.js を使い始めてからの流れ」と「2024年の p5.js を使った作品」を振り返った内容を書いてみようと思います。
使い始めのころ
自分が p5.js を使い始めた時を、X のポストを検索して探してみたのですが、どうやら 2021年2月ごろに使い始めたようでした。
その当時は、Googleさんの AI・機械学習系の仕組みの MediaPipe の JavaScript版（ブラウザ上で動作せるもの）を使い始めていて、その仕組みでカメラ画像の中の人の手や顔などのランドマークを検出する仕組みなどを試用していた時でした。
その仕組みで検出したランドマークを使ってカメラ画像上に何かビジュアルの描画をしたくて、Canvas API をちょっと使った後にライブラリを探して、p5.js にたどり着いたという感じのようでした。
その際にポスト・シェアしたものが以下だったと思います。
その後も、「MediaPipe JavaScript版 ＋ p5.js」を使った試作は「思いついたものをやってみる！」という感じで、あれこれ作ってみたりしました（主に SF の世界・魔法やファンタジー世界、みたいな方向のものが多いかも）。
以下はその中の 1つ、光学迷彩・透明マントみたいな見た目を体験できる Webアプリです。
こちらはその後、展示イベントに展示して年齢を問わず様々な方に楽しんでもらったりもしました。
試作するものの傾向
p5.js を使った他の試作も含めて、基本的に動画・アニメーションなど、動きのあるものを作る傾向がある気がします。
書籍出版・技術記事執筆でも p5.js を利用
また個人で技術コミュニティ活動をする中、出版社の方から技術書・月刊誌の技術記事執筆の依頼をいただくこともあって、その際の一部でも p5.js を使いました。
Teachable Machine ＋ p5.js など
toio ＋ p5.js ＋ p5.toio
他の方への広がり
また、そういったことを X を含む SNS でやっていたら、コミュニティ仲間のメンバーも p5.js を使い始めて作ったものをポストしてくれて、ということもあったりして嬉しかったです。
Qiita での記事執筆
p5.js に関して、試した内容の基本の部分などを Qiita の記事にすることがよくあります。
そんなことを続けていたら、以下のような内容をポストいただいたことがありました。
この他にも OSC ＋ p5.js や、WebAR ＋ p5.js を調べた時の話もポストいただいていました。
湯村さんはご自身の授業・研究室の学生さん向けの内容で p5.js を使われているようで、それで p5.js に関する色々な内容を検索された背景があったようでした。
Qiita の記事の執筆数
今回の振り返りをきっかけに、あらためて p5.js 関連の記事がどれくらいあるか検索してみました。
Qiita で自分の記事を「p5.js」というキーワードで検索すると、277件ヒットするようです（書いた記事が全体で 600強の記事数なので、半分くらいは p5.js が関連するという状態かも？）。
2024年の振り返り
そのような流れがあった中、2024年もいろいろ思いついたものを試作したり、体験型展示をする際に活用したりしていました。
自分が p5.js の利用に関する大きな方向性の 1つ
p5.js に関して、自分が試作するものの大きな方向性の中で、
「何か面白いビジュアルのものを作る」
「体験型展示で AI・機械学習、ガジェットを使ったもの」
というものが多く出てきています
2024年は、上記の内容がよく出てきたように思います。
以下に、自分が特に印象深いものをピックアップしてみようと思います。
試作したもの： シェーダー関連
最初はとっつきにくそうなイメージで手を出さなかったシェーダーに、ある時から手を出し始め、それから定期的にシェーダーを使ったものを試作するようになりました。
何か面白いビジュアルのものを作ろうとした時に、p5.js だけで作ると処理が重すぎて扱えなかったり、シェーダーのほうが作りやすいものがあったりして利用するのにハマっていきました。
2024年に作ったものを、いくつか掲載してみます。
某ゲーム機の見た目になるフィルター
1つ目は以下です。
当初はカメラ画像をシェーダーで処理し、色の階調・パレットをいじって昔懐かしいゲーム機な見た目を作るものを試作していました。
そこに、「外枠などつけてみては？」というコメントをもらい、p5.js の矩形・円・テキストの描画を使って、フィルター処理された映像をはめこむ枠をつけたものでした。
透明人間的な見た目？
2つ目もカメラ画像をシェーダーで処理したフィルターです。
シェーダー自体は 10行くらいのディストーションの処理を行うものです。
そこに、p5.js側での処理を組み合わせて、このような見た目を作ることができました。
Facebook や X にポストした動画に対しては「プレデターだ！」というコメントを多くもらった気がします。
【公開後に追記】記事を公開後、以下のコメントをもらえて嬉しいです
リアルな雨粒のシェーダー描画で曇りガラス的なもの
次は、雨粒みたいな見た目をリアルに描画するシェーダーというのを見かけて、それにブラー処理やパラメータ変更による動的な雨粒の変化を加えてみたものです。
雨粒の部分の元は以下で、p5.js の createFilterShader() で使える形になるような書き換えと、上でも書いたパラメータを付与した変化の仕組みを追加したりしました。
太陽っぽいもの？
こちらは、シェーダーでセルノイズを作ってみて、そこに着色や時間によるノイズ画像の位置変化を加え、球体の表面のテクスチャにしたというものです。
花火関連
こちらは、#CreativeCoding花火大会用に作っていた花火っぽい見た目（シェーダーは使っておらず）を、シェーダーを使った内容にできないかと試作したものです。
シェーダー側で各種処理を一括で実装する構成に挑戦してみたところがあり、それが過去の試作でやってなかった要素がいろいろ入ってきたので、わりと苦労した覚えがあります。
炎関連
また、炎っぽい見た目も好きで、あれこれやってみました。
あと、炎っぽい感じだったはずのものに、あれこれ手を加えてみてたら煙のゆらめきみたいになったものもｗ
試作したもの： 体験型展示用の作品
次は今年開催されたイベントなどに、体験型展示として出したものです。
北海道の美唄・福島の矢吹での子ども向け展示
こちらは、今年の 4月に個人宛に展示依頼をもらった案件関連です。
北海道の美唄にオープンする子ども向けのスペースで、開所イベントが開催されるので「子どもが楽しめる技術を使った展示をやってほしい」という依頼をもらったものです（2013年くらいからつながりのある石巻の団体からの依頼案件でした）。
p5.js の使いどころは、1つは上でも書いた光学迷彩・透明マントの見た目を作るアプリでの活用です。
もう 1つはロボットトイの「toio」の制御に関するところです。そこに Teachable Machine を使った音の AI・機械学習処理（ハンドベル・卓上ベルの音を識別して toio を動かすトリガーにする）が入っていて、そこで機械学習ライブラリの ml5.js ＋ p5.js という組み合わせを使っています。
これと同様のセットを、福島の矢吹というところでも展示しました。
こちらは、自分の個人活動で関わっている「子ども向けプログラミングサポート等を行う CoderDojo の活動」の関わりで展示しました。
名古屋での中高生向けイベントでの展示
こちらは、上記の美唄の件の依頼元から個人宛にもらった展示案件です。
名古屋で中高生向けの AI を学ぶ 2日間開催のイベントがあり、その中で技術を使った展示を中高生向けに行う、というのをやったものでした。
p5.js の使いどころは toio の制御です。こちらでは、当初はバニラな JavaScript で実装していたところ（ブラウザの Web Bluetooth API の処理を直接書いていたところ）を、p5.toio というライブラリに置き換えたことにより、その依存関係もあって p5.js を使った形です。
この p5.toio の作者は、 @tetunori_lego (Tetsunori NAKAYAMA) さんです。
●p5.toioのα版リリースについて - Qiita
https://qiita.com/tetunori_lego/items/23642e50129d934876e5
イベント展示のほうの話に関しては、来場したのが技術を学びに来た中高生だったので、仕組みや利用技術・構成などといった技術系の質問を多くもらいました。
東京・那須・大垣での展示
あとは、「太鼓の達人用コントローラー・ダイソーの 100均の空気ポンプ」を入力インタフェースにして toio を動かす作品を各所で行ったものです。
↓こちらは、栃木の那須での子ども向けイベントで展示したものです。
↓こちらは中野のほうにある学校さんで展示イベントを行った時のものです。
↓こちらは、岐阜の大垣で開催されたモノづくり系イベント「大垣ミニメーカーフェア」でのものです。
↓こちらは、お台場で行われたモノづくり系イベントです。
空気ポンプを使った入力
最後に書いていた展示での利用例では、p5.js関連の処理は toio 関連だけでなく、p5.sound も使っていました。
具体的には、空気ポンプで噴出される空気をマイクにぶつけ、そのマイク入力を Web Audio API で扱うという処理に使っています。Web Audio API を直接使うのではなく、p5.js ＋ p5.sound の組み合わせのラッパーを使うという感じです。
余談ですが、空気ポンプを使う仕組みは音量がとれれば使える構成なので、Scratch での実装も試しました。
その際、「音量の時間変化を処理すると、強押し・弱押しが区別できるのでは？」と思って、それも試しました。
太鼓の達人用コントローラーの処理
なお、太鼓の達人用コントローラーを使う部分は p5.js は絡んでいないです。
仕組みとしては、ブラウザの Gamepad API を使っています。
ただ p5.js でその入力を処理して、連打しているかどうかを区別する、というのは展示で使ってないものの試していたりしました。
おわりに
p5.js を使い始めてからの流れや、2024年の p5.js を使って行った試作の一部を抜粋して記事にしてみました。
また 2025年も p5.js を活用していければと思っています！