この記事は、p5.js Advent Calendar 2023 の 8日目の記事です。
今回の内容
今回の内容は、2023年に p5.js を使って作った作品に関し、今年の後半半年で作った作品を振り返り、そこで使った技術を書き出してみようと思います。
なお、前半については以下の記事で振り返りをしました。
●#p5js を使って 2023年の前半半年で作った作品に関し利用した技術を振り返る（一部抜粋）【完走賞ゲット-8】 #JavaScript - Qiita
https://qiita.com/youtoy/items/f69d89a04fd6dd012048
p5.js を使って作った作品
2023年に p5.js を使って作った作品を振り返っていこうと思うのですが、わりとたくさん試作をしたので、一部のみ抜粋する形で進めていきます。
「window.screenTop／screenLeft」プロパティを使う
以下は、ブラウザのウィンドウをスクリーン上で動かした時の動きの影響が、画面内の描画に現れる、というものです。
これについて、関連する技術の話を、以下の記事に書きました。
●「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモ【JavaScript】 - Qiita
https://qiita.com/youtoy/items/945edb13856417c8c901
ポイントになる部分、「スクリーン上でのブラウザのウィンドウ位置」を取得するのに利用したのは「window.screenTop／screenLeft」というプロパティです。
p5.toio でシェイク検出
こちらは、#p5js のライブラリである「p5.toio」を使い、ロボットトイ「toio」に内蔵されたセンサーの値を取得するということをやりました。シェイク検出の仕組みがあったため、toio がくっついているフライパンを振ったということを検知できました。
自分が toio をブラウザとつないで使う時は、主に Web Bluetooth API を直接使うか、もしくはそれを隠蔽して使いやすくしてくれるライブラリの「p5.toio」を使うことが多いです。
この時は、p5.toio を使いました。
余談ですが、このときは石巻で開催されていたハッカソンに出ていて、その中で出たアイデアを実装するために toio や p5.js を使いました。↓こんな感じの作品を作り、こんな感じのチームでハッカソンをやっていました。
p5play を使った物理演算
次は、p5play を使った物理演算エンジンの処理です。
ここでは、割とシンプルに実装してみました。
使った技術は、p5.js でゲームを作ったりする時などにも使える p5play です。
p5play の機能は豊富で、スプライトアニメーションや衝突判定を扱う機能など様々な機能があるのですが、その中の 1つの物理演算エンジンを使いました。
自分が過去に p5.js と組み合わせて使った物理演算エンジンが使えるライブラリは、「Matter.js」や「p5-matter」があったのですが、それらと比べて物理演算エンジンを非常にシンプルに実装できるものでした。
p5play を使った物理演算を MediaPipe と組み合わせる
上で出てきた p5play を使った物理演算エンジンの処理を、MediaPipe JavaScript版を使った処理と組み合わせてみたものです。
p5play は上でも登場したもので、こちらでは、それと MediaPipe JavaScript版 を組み合わせました。MediaPipe の中でも、手のキーポイント検出が行えるものを用いています。
p5play を使った物理演算をスマホのセンサーと組み合わせる
こちらも、上で出てきた p5play を使った物理演算エンジンの処理と別のものの組み合わせです。
ここでは、スマホが内蔵しているセンサーの値を取得し、スマホの傾きを使った物理演算という方向のものを試作しました。
また p5play を使ったものです（※ この時期は、p5play の物理演算エンジンが面白そうだと思ってハマって、いろいろな実装を試していました）。p5play と組み合わせているのは、p5.js の中のスマホ内蔵のセンサーを使える仕組みです。
公式リファレンスでは、以下のあたりに書かれたものになります。
WEBGLモードに対応した p5.simpleAR のお試し
前にも試したことがある、p5.js で簡単に ARコンテンツを作ることができる「p5.simpleAR」が、WEBGLモードに対応したという話を見かけて試してみたものです。
ルーン文字をユニコード・Webフォントで表示しつつWEBGLモードの描画と組み合わせ
以下は、ルーン文字をユニコードで利用しつつ、見た目に関して Webフォントを使って少し変更をしてみたというものです。
また、それを 3次元的に表示してみようと思い、WEBGLモードの描画と組み合わせました。
ルーン文字のユニコードは以下などを見ると書いてあります。
●ルーン文字 - Wikipedia
https://ja.wikipedia.org/wiki/%E3%83%AB%E3%83%BC%E3%83%B3%E6%96%87%E5%AD%97
また利用した Webフォントは、Googleフォントの「Noto Sans Runic」です。
SFっぽい見た目の心拍数・体温表示を作る
これは、色使いの工夫や 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 と組み合わせてみたくなります。
引き続き、また面白そうなものを何か見つけた際は、こういった試作を行っていければと思います。