AIイラストのブラを外すミニゲーム（？）

今日新しいラブドールが届きましてね、その新品おっぱいをぷるぷる揺らしているときにふと気が付いたンですよ。

あ、おっぱいってスカートと同じなんだ

と。

待って。コイツまじで何言ってんの？みたいな顔で見ないで。ドン引きしないでもうちょっとだけ聞いてって。時間は取らせないから、ね？

要するに、こういうこと。

ブラを外すミニゲーム（？）

作ろうと思った経緯

タップ（クリック）1回するだけなのでもはやゲームと呼べるレベルではございませんが、やってることは「GIMPのワープ変形でAIイラストのスカートをめくる例と同じことなんですよ。

スカートの代わりにおっぱいをワープ変形させているだけ。

しかも、スカートがめくれあがってパンツが見える、という二段構えにする必要もないから、レイヤー区切ることもないお手軽加工。AI出力からコーディング含めて30分かかりませんでした。この記事書いてる時間のほうが長いかも。

深夜アニメ見ながらコード書いてたら出来ちゃった。そのわりにけっこうイイ揺れじゃないっすかね。

よ～く見ると髪の毛まで一緒に持ち上がっちゃってるのでアレですが、そこはもうちょい丁寧に加工すれば良くなると思う。

ベース絵

Prompt

1girl,loli,small breasts,big eyes
,white bra
,standing,upper body
Negative prompt: (worst quality, low quality:1.2), bad anatomy, text, multipul angle, split view
Steps: 20, Sampler: Euler a, CFG scale: 7, Seed: 1087565024, Size: 1024x1024, Model hash: fdffd3c312, Model: ambientmix-half, Denoising strength: 0.75, Clip skip: 2, Mask blur: 4

AmbientmixのSmall Breastsってすごく良いサイズだと思うんだ。心が洗われるようだ。

技術解説

JavaScript初心者向け解説。

HTML部分は以下のとおり。

<div id="img_wrapper">
	<img src="20230429_oppai_base.webp" style="display:block;">
	<img src="20230429_oppai_01.webp" class="loop">
	<img src="20230429_oppai_02.webp" class="loop">
	<img src="20230429_oppai_03.webp" class="loop">
	<img src="20230429_oppai_04.webp" class="loop">
	<img src="20230429_oppai_05.webp" class="loop">
	<div id="go"></div>
</div>

ベースとなるブラを付けた少女の絵と、残り5枚はおっぱい揺れ差分。

JavaScript部分は以下のとおり。loopAnimeという関数を作成。

function loopAnime(className, count=1, ms_add = 30)
{
	let elms = document.getElementsByClassName(className);
	ms = 0;
	for (let i = 0; i < count; i++) {
		for (let j = 0; j < elms.length; j++) {
			setTimeout(function () {
				elms[j].style.display = 'block';
			}, ms);
			ms += ms_add;
		}
		for (let j = elms.length - 1; j > 0; j--) {
			setTimeout(function () { elms[j].style.display = 'none'; }, ms);
			ms += ms_add;
		}
	}
	setTimeout(function () {
		elms[0].style.display = 'none';
	}, 10000);
}

おっぱい差分1～5までを順番に表示していくだけだが、1→2→3→4→5で終わらず、5→4→3→2→1と戻ってくるところが特徴。GIMPのワープ変形で使うことを想定しており、一方向へ移動した絵しか用意しないため。

最後はおっぱいぽろ～んしたままでも良いが、何か可哀想なので10秒後にブラに戻している。

尚、ブラクリックの判定ポイントは「ヒント」のチェックボックスを付けた際に赤枠が表示される部分で、これはDIVタグで書いている。このDIVタグにidを付け、onclickイベントが発生した際にloopAnime関数を呼び出す仕組み。

まとめ

揺れるちっぱいをずっと眺めていたい