AIイラストでもじもじしながら液体が流れるアニメを作りたい
今放送中の星屑テレパスというきらら系アニメで、もじもじと照れている女の子の下半身をドアップするシーンがありました。
それを見て、 お漏らし我慢しているようにしか見えん…っ！ と感じてしまったのは、いつもコメントをしてくださる悪友のおかげと言わざるを得ないでしょう。
というわけ（？）で、もじもじシーンをAIイラストで作ってみました。
AIイラストで下半身もじもじする
いつもどおり、AIイラストでベース絵を出力して、アニメーションはGIMPのワープ変形で作りました。
そして今回は負荷軽減のため、WebPアニメ（GIFアニメと言ったほうが通じる人多いかな？）にしてあります。
彼女をクリック（タップ）したときに漏れ出すパトスはJavaScriptでリアルタイム演算して、毎回異なる道筋を通ります。
そう、まるで人々の人生の歩みのようにね（やかましい）
ベース絵
Prompt
best quality,extreamely detailed
,(loli:1.4),very cute,hoodies
,standing,grabbing skirt with both hands
,close-up lower body
,simple background
Negative prompt: (low quality, worst quality:1.4),monochrome,bad anatomy,lowres,sketch,extra digit, fewer digits,extra arms,watermark,signature,text,username,blur,blurry,bad hands,bad fingers,liquid fingers,split view,multi angle
Steps: 20, Sampler: Euler a, CFG scale: 7, Seed: 2817944145, Size: 512x768, Model hash: bdda7b9930, Model: yuzu_v11, Clip skip: 2, Version: v1.6.0スカートを押さえるようなポーズをさせたかったのですが、holdingやputtingでは思ったようなポーズにならなかったため、grabbing skirt with both hands（両手でスカートを掴む）というような指定で100枚くらい出力した中から選びました。
結局、スカートは掴んでないけど、両手を合わせるポーズしてくれたから良いかな、と。
技術解説
需要なさそうな気もしているのだけれど、自己満で要点だけ書いておきます。
アニメーションWebPがクリックされたら、canvasと入れ替え、そこに少女と液体を描画しています。
液体の描画はJavaScriptでリアルタイムかつある程度ランダムに蛇行しながら、下へ流れていくようにプログラムを組みました。
以前作った「断面図アニメーションメーカー」の応用です。
毎回違う膣内の蛇行を描きたくて作ったワインディングアルゴリズムですが、この液体の流れでもほとんど同じことをしました。
しかし、そのまま液体を塗りたくるだけだとスカートの上も濡らしてしまうので、描画エリアをクリッピングマスクで囲っています。canvasの機能ですね。
具体的にはこんな感じ。
ctx.beginPath();
ctx.moveTo(208,648);//左太ももエリア
ctx.lineTo(242,616);
ctx.lineTo(262,610);
ctx.lineTo(262,696);
ctx.lineTo(273,760);//中央
ctx.lineTo(280,699);//右太ももエリア
ctx.lineTo(273,616);
ctx.lineTo(364,650);
ctx.lineTo(364,768);
ctx.lineTo(208,768);
ctx.closePath();
ctx.clip();座標書くのが地味にだるい。この座標を辿ると下の赤枠の形になり、
この内部だけ液体が描かれるという仕様です。
画像のマスク処理でやっても良かったんだけど、そこまで厳密に作らなくていいかな、と。
まとめ
精液みたいになっちゃった。
