#p5js を使って 2023年の後半半年で作った作品に関し利用した技術を振り返る【p5.js】

Last updated at 2023-12-06Posted at 2023-12-06

この記事は、p5.js Advent Calendar 2023 の 8日目の記事です。

今回の内容

今回の内容は、2023年に p5.js を使って作った作品に関し、今年の後半半年で作った作品を振り返り、そこで使った技術を書き出してみようと思います。

なお、前半については以下の記事で振り返りをしました。

●#p5js を使って 2023年の前半半年で作った作品に関し利用した技術を振り返る（一部抜粋）【完走賞ゲット-8】 #JavaScript - Qiita
　https://qiita.com/youtoy/items/f69d89a04fd6dd012048

2023年に p5.js を使って作った作品を振り返っていこうと思うのですが、わりとたくさん試作をしたので、一部のみ抜粋する形で進めていきます。

以下は、ブラウザのウィンドウをスクリーン上で動かした時の動きの影響が、画面内の描画に現れる、というものです。

これについて、関連する技術の話を、以下の記事に書きました。

●「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモ【JavaScript】 - Qiita
　https://qiita.com/youtoy/items/945edb13856417c8c901

ポイントになる部分、「スクリーン上でのブラウザのウィンドウ位置」を取得するのに利用したのは「window.screenTop／screenLeft」というプロパティです。

こちらは、#p5js のライブラリである「p5.toio」を使い、ロボットトイ「toio」に内蔵されたセンサーの値を取得するということをやりました。シェイク検出の仕組みがあったため、toio がくっついているフライパンを振ったということを検知できました。

自分が toio をブラウザとつないで使う時は、主に Web Bluetooth API を直接使うか、もしくはそれを隠蔽して使いやすくしてくれるライブラリの「p5.toio」を使うことが多いです。
この時は、p5.toio　を使いました。

余談ですが、このときは石巻で開催されていたハッカソンに出ていて、その中で出たアイデアを実装するために toio や p5.js を使いました。↓こんな感じの作品を作り、こんな感じのチームでハッカソンをやっていました。

次は、p5play を使った物理演算エンジンの処理です。
ここでは、割とシンプルに実装してみました。

使った技術は、p5.js でゲームを作ったりする時などにも使える p5play です。
p5play の機能は豊富で、スプライトアニメーションや衝突判定を扱う機能など様々な機能があるのですが、その中の 1つの物理演算エンジンを使いました。

自分が過去に p5.js と組み合わせて使った物理演算エンジンが使えるライブラリは、「Matter.js」や「p5-matter」があったのですが、それらと比べて物理演算エンジンを非常にシンプルに実装できるものでした。

上で出てきた p5play を使った物理演算エンジンの処理を、MediaPipe JavaScript版を使った処理と組み合わせてみたものです。

p5play は上でも登場したもので、こちらでは、それと MediaPipe JavaScript版を組み合わせました。MediaPipe の中でも、手のキーポイント検出が行えるものを用いています。

こちらも、上で出てきた p5play を使った物理演算エンジンの処理と別のものの組み合わせです。
ここでは、スマホが内蔵しているセンサーの値を取得し、スマホの傾きを使った物理演算という方向のものを試作しました。

また p5play を使ったものです（※ この時期は、p5play の物理演算エンジンが面白そうだと思ってハマって、いろいろな実装を試していました）。p5play と組み合わせているのは、p5.js の中のスマホ内蔵のセンサーを使える仕組みです。

公式リファレンスでは、以下のあたりに書かれたものになります。

前にも試したことがある、p5.js で簡単に ARコンテンツを作ることができる「p5.simpleAR」が、WEBGLモードに対応したという話を見かけて試してみたものです。

以下は、ルーン文字をユニコードで利用しつつ、見た目に関して Webフォントを使って少し変更をしてみたというものです。
また、それを 3次元的に表示してみようと思い、WEBGLモードの描画と組み合わせました。

ルーン文字のユニコードは以下などを見ると書いてあります。

また利用した Webフォントは、Googleフォントの「Noto Sans Runic」です。

これは、色使いの工夫や Webフォントによるフォント変更を組み合わせて、SFっぽい見た目の表示を試作したものです。

見た目の部分は、YouTube の「The Hidden Technology of Football」という動画に出てきたものを見て作っていて、その動画に出てきたものに近しい感じにしています。

以下は、円形ディスプレイを入手したので、p5.js を使った描画を表示させてみた、というものです。
某なんとかレーダーみたいな見た目になるものを作ってみました。

利用した円形ディスプレイは、以下から購入したものです。

●5インチ円形タッチスクリーンディスプレイ（1080 x 1080, HDMI接続） — スイッチサイエンス
　https://www.switch-science.com/products/9029

ここ半年で p5.js を使って作ったもののうち、一部をピックアップして振り返ってみました。
また、その試作で使った技術が何かというのを、簡単に記載していきました。

自分は、面白そうな技術やデバイスを見つけると、p5.js と組み合わせてみたくなります。
引き続き、また面白そうなものを何か見つけた際は、こういった試作を行っていければと思います。