この記事は、「完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023」の 8日目の記事です。
今回の内容
今回の記事の内容は、今年の 1月から半年分の p5.js を使った作品を振り返り、そこで使った技術を書き出してみようと思います。
なお後半半年分は、別途、振り返りをやれればと思います。
p5.js を使って作った作品
2023年に p5.js を使って作った作品を、前半の半年の分だけに限定して振り返っていこうと思うのですが、大量に試作をしすぎたので、一部のみ抜粋する形で進めていきます。
p5.js と PixiJS を組み合わせて大量のパーティクルを扱う
最初は、p5.js と PixiJS を組み合わせて大量のパーティクルを扱うという作品です。
p5.js でも同じ見た目のものは実装できますが、PixiJS を組み合わせることで描画処理を高速にすることができました。
もう少し補足すると、以下の「PIXI.ParticleContainer」を使っています。
●PixiJS API Documentation： PIXI.ParticleContainer
https://pixijs.download/dev/docs/PIXI.ParticleContainer.html
Hammer.js を使って p5.js でのマルチタッチ操作やドラッグ操作を扱う
次は、Hammer.js を使って p5.js でのマルチタッチ操作やドラッグ操作を扱うというものです。
これにより、スマホやタブレットなどにおけるマルチタッチ操作やドラッグ操作での拡大縮小・回転・移動を行えるようにしました。
また、この話について以下の記事を書いていました。
●p5.js で Hammer.JS を使ったタッチ操作の実装：回転、ピンチイン／ピンチアウト（拡大／縮小） #JavaScript - Qiita
https://qiita.com/youtoy/items/abea1d7e402652de190e
人がランダムにカーソルを移動させているような感じの動きとパーティクルの組み合わせ
こちらは、人がランダムにカーソルを移動させているような感じの動きを、noise() を使って実装しました。そのカーソルの動きに合わせてパーティクルを発生させています。
上記の内容については、以下の記事を書きました。
●CSS-Tricks の記事で見かけた「マウスカーソルの軌跡上でパーティクルを発生させる処理」を p5.js で置きかえる（一部は簡略化） #JavaScript - Qiita
https://qiita.com/youtoy/items/190e6049172a22d9e592
SVGフルターを使わない溶ける見た目のエフェクト（Goony Effect）
こちらは、blur() と blendMode() を使い、SVGフルターを使わない溶ける見た目のエフェクト（Goony Effect）を実装したものです。
過去に、
上記とは異なる、SVGフィルターを使った溶けるような見た目のエフェクト（Gooey Effect）については、以下の記事を書いていました。
●【Babylon.js 2022】#BabylonJS で SVGフィルターを用いた溶けるような見た目のエフェクト（Gooey Effect）を試してみる #JavaScript - Qiita
https://qiita.com/youtoy/items/47f7e3c719c3110b4d62
音声認識・音声合成を使った ChatGPT API の組み合わせ
次は、音声認識・音声合成を使った ChatGPT API の組み合わせで、ChatGPT と声で対話するということを、自前で実装してみたものです。
今だと、公式の ChatGPTアプリで実現できるやりとりですが、以下はまだ ChatGPT API がようやく公開された、というタイミングで作っていたものでした。
使った技術・API は以下になります。
●p5.speech | Speech synthesis and recognition for p5.js
https://idmnyu.github.io/p5.js-speech/
●Introducing ChatGPT and Whisper APIs
https://openai.com/blog/introducing-chatgpt-and-whisper-apis
p5.js で同心円（や円弧）を使った作品
次は、p5.js で同心円（や円弧）を使った作品です。
上記のもとになったのは、以下の p5.js勉強会の内容です。
p5.js の WEBGLモードで 3D空間内を跳ね回る球体のパーティクル
こちらは、パーティクルに関するものです。
もともと、2D の描画でやっていたものを、WEBGLモードで 3D空間内を跳ね回る感じにしてみたものです。
2D版は、以下のポストに出てきているものです。
おわりに
今年の前半半年で、p5.js を使って作ったもののうち、一部をピックアップして振り返ってみました。
また、その試作で使った技術が何かというのを、簡単に記載していきました。
別途、今年の後半の内容も振り返りができればと思います。