AIイラストで垂れる精液のアニメーションがしたくて三角関数を学んだ話

Stable Diffusionを知ったばかりの半年ほど前、「AIイラストのスカートをめくりたい。…めくりたくない？」でAIイラストをCSSアニメーションで変形させる実験をしました。

当時はプログラミングに抵抗がある人でもCSSなら簡単に真似してもらえるかな？と考えて投稿していたのですが、裏ブログのせいなのか、興味ある人が少ないのか、技術面での反応が皆無でよくわからなくなってきたため、気にせずごりごりコーディングしていくことにしました。

さて、そこでまずはCSSアニメーションのskew指定でやっていた平行四辺形への変形ですが、これはJavaScriptのcanvasだとsetTransformを使った変換マトリクスの行列式が必要です。↓こういうやつ。

$\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]$

…行列式とか言われても頭モン娘なぼくには何のこっちゃかよくわからんのですが、サンプルコードは理解できます。ということで、

2つの正方形の下底と上底をつなげたまま角度を変えるアルゴリズムを考えてみた

setTransformは「(a)伸縮x (b)傾斜y (c)傾斜x (d)伸縮y (e)移動x (f)移動y」という6つの引数を必要とするのですが、平行四辺形への変形では傾斜xしか使わないので、赤い正方形の変形については簡単でした。

問題は青い正方形のほうなのですが、傾斜xに -1 をかけることで逆の角度にすること自体は簡単。しかし、下底と上底をつなげた状態にするためには青い正方形のX軸を移動しなければなりません。

この移動距離をどう算出すれば良いかがわからなかったのですが、ふとAIイラストで作ったシューティングで、敵から発射される弾道計算に三角関数使ってたな？と思い出しました。

中卒なので学校で習ったことはないんだけど、プログラムではわりと使うンですよね。最近だと断面図とか。スマホでピンチイン／アウトするときの指の距離を計算しました。

鼻ほじりながら「ここではピンチアウト実装するんやで～」って指定するだけかと思ったら自分で計算しなきゃならなくて地味に泣きながら実装しました。一度作ってしまえば使いまわせるので良いんですけども。

脱線しましたが、要は「e = height * Math.sin(c)」でOK。

図形の変形ができたので、今度は

画像（液体）を縦に二分割して、移動量を地味にズラすアルゴリズム

これは出来てしまったらカンタンだったのですが、先に難しく考えすぎてしまい、ここだけで丸一日悩んでしまいました。

赤エリア、青エリアの移動を別個に管理するのではなく、移動方向については赤エリアのみ。

移動量についてだけ赤と青に差を出すことで、揺れ感を出すことに成功しました。

たったの2分割なので、動きは雑ですけど、小さな絵なら気にならないだろうし、大きい絵を動かしたいときは分割数を増やせば良いんじゃないかな？

ともあれ、ここまで来れば何をやりたかったかおわかり頂けるかと思います。

お口からゆらゆらと揺れる精液を描画するアルゴリズムを作ってみた

れろれろする舌の動きはGIMPのワープ変形なので誤解のないよう。

もちろん綺麗な舌パーツがあれば先述の仕組みでぐにょんぐにょん変形させることは可能ですが、がんばって舌の切り抜き処理するより、とっととワープ変形したほうが早いッス…。

精液が揺れる処理だってもちろん画像処理のほうがてっとり早いのですが、こっちはほかにも使い道がいろいろ思いつくじゃない！

お口以外のあらゆる場所でゆらゆら揺らすことができるじゃない！どこで使おうか今から妄想がとまらない！

ベース絵

Prompt

best quality,extreamely detailed,smile,twintail,tsurime
,1girl,very cute,flat chest
,open mouth,tongue
,face focus
,cum
,simple white background

Negative prompt: (low quality, worst quality:1.2),monochrome,bad anatomy,lowres,sketch,extra digit, fewer digits,watermark,signature,text,username,blur,blurry,bad hands,bad fingers,liquid fingers,multiple view,split view,inaccurate fingers
Steps: 20, Sampler: Euler a, CFG scale: 7, Seed: 3080528593, Size: 1024x1024, Model hash: 6df59b69e0, Model: kaywaii_v65, Denoising strength: 0.6, Clip skip: 2, tome_merging_ratio: 0.5, tome_maximum_down_sampling: 1, tome_stride_x: 2, tome_stride_y: 2, tome_random: False, tome_merge_attention: True, tome_merge_cross_attention: False, tome_merge_mlp: False, Version: v1.6.0

モデル(checkpoint)は「KayWaii v6.5」で今回はじめて使いましたけど、loli指定しなくてもロリ娘ばかり出てきてとても気に入りました。おまわりさんぼくです。

まとめ

わりと長い間悩んでいたマトリクス変形を何とか組み込むことが出来て、ぼくはとてもまんぞくです。

まわりに数学なんて社会に出てから何に使うんだと言う方がいたら、「精液を揺らす計算式で使う」と教えてあげてください。

若い頃にこれを知っていたらぼくも高校を卒業し…………………ないなｗ