#p5js を使って 2023年の前半半年で作った作品に関し利用した技術を振り返る（一部抜粋）【完走賞ゲット-8】

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

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

## 今回の内容
今回の記事の内容は、今年の 1月から半年分の p5.js を使った作品を振り返り、そこで使った技術を書き出してみようと思います。

なお後半半年分は、別途、振り返りをやれればと思います。

## p5.js を使って作った作品
2023年に p5.js を使って作った作品を、前半の半年の分だけに限定して振り返っていこうと思うのですが、大量に試作をしすぎたので、一部のみ抜粋する形で進めていきます。

### p5.js と PixiJS を組み合わせて大量のパーティクルを扱う
最初は、p5.js と PixiJS を組み合わせて大量のパーティクルを扱うという作品です。

p5.js でも同じ見た目のものは実装できますが、PixiJS を組み合わせることで描画処理を高速にすることができました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/Xk8kRzDUqZE?si=ObbeGhktngZzv6s1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

もう少し補足すると、以下の「PIXI.ParticleContainer」を使っています。

●PixiJS API Documentation： PIXI.ParticleContainer
　https://pixijs.download/dev/docs/PIXI.ParticleContainer.html

### Hammer.js を使って p5.js でのマルチタッチ操作やドラッグ操作を扱う
次は、Hammer.js を使って p5.js でのマルチタッチ操作やドラッグ操作を扱うというものです。

これにより、スマホやタブレットなどにおけるマルチタッチ操作やドラッグ操作での拡大縮小・回転・移動を行えるようにしました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/5OgJmLnWeoU?si=F3I-eXubVMIeZIXu" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

また、この話について以下の記事を書いていました。

●p5.js で Hammer.JS を使ったタッチ操作の実装：回転、ピンチイン／ピンチアウト（拡大／縮小） #JavaScript - Qiita
　https://qiita.com/youtoy/items/abea1d7e402652de190e

### 人がランダムにカーソルを移動させているような感じの動きとパーティクルの組み合わせ
こちらは、人がランダムにカーソルを移動させているような感じの動きを、noise() を使って実装しました。そのカーソルの動きに合わせてパーティクルを発生させています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/72LaFUZwyo4?si=S88fdXLK3-J_ITn8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/R5G3OwL-x3Q?si=5EaSZjwxm-uTQCRy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

上記の内容については、以下の記事を書きました。

●CSS-Tricks の記事で見かけた「マウスカーソルの軌跡上でパーティクルを発生させる処理」を p5.js で置きかえる（一部は簡略化） #JavaScript - Qiita
　https://qiita.com/youtoy/items/190e6049172a22d9e592

### SVGフルターを使わない溶ける見た目のエフェクト（Goony Effect）
こちらは、blur() と blendMode() を使い、SVGフルターを使わない溶ける見た目のエフェクト（Goony Effect）を実装したものです。
過去に、

 <iframe width="560" height="315" src="https://www.youtube.com/embed/X4ZmBqb5pX8?si=Me10cQGR6YPQJ0fv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

上記とは異なる、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 がようやく公開された、というタイミングで作っていたものでした。

<iframe width="560" height="315" src="https://www.youtube.com/embed/Re5DJ7icLuQ?si=PHeJnIFJq3wTnd67" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

使った技術・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 で同心円（や円弧）を使った作品です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/oIIM3jgwoZQ?si=TMED4iGsiZfAdHlE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

上記のもとになったのは、以下の p5.js勉強会の内容です。

https://twitter.com/gin_graphic/status/1638839243807260672

### p5.js の WEBGLモードで 3D空間内を跳ね回る球体のパーティクル
こちらは、パーティクルに関するものです。
もともと、2D の描画でやっていたものを、WEBGLモードで 3D空間内を跳ね回る感じにしてみたものです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/YE5PkWoUVI8?si=S-BI9GAtIvxR-vd5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

2D版は、以下のポストに出てきているものです。

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

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

別途、今年の後半の内容も振り返りができればと思います。