BGMに合わせて動くAIイラストのリズム感を少し改良してみた

2023/11/14

先日の記事「AIイラストをBGMに合わせてほんのりと踊らせてみる」でワリと満足していたのですが、あまり理解せずにWeb Audio APIを使っているのはよくないな、と思い直し、ほんの少しだけ音のお勉強をしてきました。

とても単純な話なんですけど、低音域～高音域まで256分割して数値で取得していることがわかったので、なーんだ、それなら低音にあわせてビートを刻めばノリノリに踊ってるように見えるのでは？ということでさっそくビジュアライザーを搭載し、ビートを感じる音域を設定できるように改良してみました。

BGMに合わせてAIイラストの尻をふるJavaScriptを書いてみた

BGM入替:

Options ビート感知範囲:50/256
※左に行くほど低音のみ反応。一番右は全音反応。
ビート感知間隔:10フレーム毎
※ビートを感知する感覚。60フレームで1秒毎。
しきい値:1.05倍
※ビートと判断する量

少しお勉強してビジュアライザー（音に反応して伸びるグラフ）出せるようになったので、デバッグがしやすくなりました。

まだ怪しい動きも多いけど、前回に比べたらリズム感がついたんじゃないですかね？

謝辞

BGM: 創作堂さくら紅葉様

フリー素材のご提供に感謝致します。

技術解説

例によって、すべてはここから始まったので基本はこの記事をご覧ください。

Web Audio APIでリップシンク(もどき)を作ってみた話
https://qiita.com/iroha71/items/2867f61f459a333ffeb3

ただ、今回リズム（ビート）に合わせることに集中したため、口パク判定のアルゴリズムはごっそり削って変更しました。

上の「Options」欄をご覧頂ければだいたいわかると思いますが、

ビート感知範囲：256分割された周波数帯のうち、どのくらいの範囲をチェック対象にするか。
ビート感知間隔：どのくらいの間隔でチェックするか。
しきい値：前回チェック時からどのくらい音が強くなったらビートと判断するか。

こんな基準を設けて調整しました。

ただ、曲によってビートを刻んでいる音域が違うので、その判定をどうするかが課題ですかねぇ。

AIイラストのなんちゃってアニメーションについての技術解説は「GIMPのワープ変形を使った簡単なアニメーション作成の解説」をご参照ください。

ベース絵

ちょっと怪しげな瞳が気に入りました。

Prompt

highres,4k,8k,highly detailed eyes,anime coloring
,1girl (loli:1.4),empty eyes,flat chest,school uniform,looking back,small smile
,white panties
,all fours,from behind
,white background
,close-up ass

Negative prompt: (worst quality, low quality:1.2),monochrome,lowres,bad anatomy,watermark, text, sketch,missing finger,extra finger,bow panties,wide hip
Steps: 20, Sampler: Euler a, CFG scale: 7, Seed: 3557197232, Size: 512x768, Model hash: 9b170ebadc, Model: sudachi_v10, Denoising strength: 0.75, Clip skip: 2, Version: v1.6.0-2-g4afaaf8a

モデルはSudachiです。