最近p5.jsで実装してるバ美肉システムのまとめ記事です。

もともとは「だれでもVtuber」というソフトをリスペクトして実装を開始しました。
だれでもVtuber(64bit/無料版) - ファル红・茶/Falhong-cha - BOOTH
こちらのソフトは4枚の画像を登録してVtuber的なふるまいを表現できるというコンセプトです。
mac版の開発が予定されていないということでじゃあ自分で作るか〜とp5.jsで実装を始めました。
Processingではなくp5.jsで実装した理由は動作サンプルをweb上でオープンにお試しできるようにしたかったからです。

キャラクターのアニメーションのチェックをしたのがこちら。

キャラクターの画像はこちらで生成しました。
五百式立ち絵メーカー|Picrew

まずはキャラクターの揺れアニメーションをチェックしました。
キャラクターが目を開けている画像と目を閉じている画像を切り替えてまばたきを表現しています。
横揺れはかなり低い位置を起点に振り子のように揺らしています。
なぜ低い位置なのかというと、実際に椅子に座って揺れてみたら腰や臀部が揺れの起点だと気づいたためです。
単純なしくみだけでキャラクターっぽい動きができて感動しました。

上記の動きをCSSに書き換えて、Discordと連携して複数人対応したのがこちら。


実装はこちらにまとめてあります。
スマホからも参加できる!DiscordとOBSを連携してバ美肉トーク動画を作ろう! - Qiita
こちらもまばたきや体の揺れを搭載しています。

再びp5.jsに戻ってきたのがこちら。
今度はp5.soundを連携して、マイクからの音量にあわせて口を開閉させてみました。

キャラクターの画像はこちらで生成しました。
CHARAT GENESIS | 着せ替えメーカー

目開け口閉じ・目開け口開け・目閉じ口閉じ・目閉じ口開けの4パターンの画像を用意しました。
まばたきは周期的タイミングで画像を差し替えて表現しています。
マイク音量が一定値より大きければまばたきのステータスを引き継ぎつつ口開け画像に差し替えています。
キャラの揺れは横方向だけでなく縦方向も加え、アーチ状に揺らしています。
OpenProcessingにデモ版を投稿したので試してみてください。
(マイクを動作させるため右上のスピーカーマークをオンにしてください)
vtuber_00 - OpenProcessing

p5.speech組み合わせれば字幕つけられるのでは?と試したのがこちらです。


「えーと」「あの」が多いために複数の文章が1文としてとらえられてしまっています。
そのため、字幕が間に合っていません。
また、枠内に字幕テキストが収まるようにテキストの表示範囲を設定していたのですが、
どうやらtextは半角スペースを基準に改行するようです。
p5.js reference | text()
日本語は半角スペースをはさまないためか、改行されませんでした。
字幕はp5側では搭載しなくてもいいかな、というのが個人的結論です。



とりあえずまばたき&体の揺れ&音量に応じた口の開閉ができたので、
Vtuberっぽいこともできそうです。
p5.jsのままでもOBSに流し込んでしまえば何でもできそうですね。

オマケ
実はメカっぽい見た目のアバターは全身像を作ってあるんですよ。せっかくなので貼ります。
gene_20210821_221957
キャラクリしてる時にメカパーツを見つけてこれだー!と思い作成しました。
コンセプトは案内・受付用のロボットです。
仮面ライダーゼロワンのイズちゃんに影響を受けている気がする…
アクティブさと上品さを表現するためにガウチョパンツを履かせたのですが、
Vtuber的な見た目にすると上半身だけしか映らないんですよね…。