ChatGPTくんの考える桜の花は様子がおかしい
こんすが、Vtuber準備中の秋都鬼よすがです！
最近スナック菓子にハマってます。
特にこれ！
アーモンドとチョコとでいい感じに脳に糖分が補給されて作業が捗るんですよね。
イラスト描いたり動画編集したり、コーディングしたりって結構頭使うしお腹減るんです……。
今回はウェブプログラミングを嗜む中で、ふとHTMLで1枚の画像を生成する方法について考える流れになりChatGPTくんに相談した時の話です。
画像を生成すると言ってもAI生成のようにPNGを生成するのではなく……。
HTML上で形状パラメータを設定してオブジェクトを描画する、みたいな感じです。
Adobe Illustratorで図形パスで絵を作る、と言ったほうが伝わりやすそうですね。
OBSに載せるブラウザソースとしてローカル環境で動作させるとあるモノを作るのです！
でもまぁ、自分で作るのめんどくさーい！
ということでChatGPTくんに丸投げしよう。
ChatGPTくんのお話タイム
ということで。
桜の花をSVGのViewBoxで描画して下さい！
了解です！
花ではあるけど……桜かって言われると……？
どっちかと言うと梅？
桜の形が思ったよりも桜っぽくないと思います。
花びらが丸すぎて、花びら先端の割れ目がないですし、もっとすっきりしていると思います。
なるほど、はい確かにおっしゃる通りです。
現行のSVGは「かわいらしい花型」に寄せたため、桜特有の“花びら先端の切れ込み”やスッキリ感が不足しています。
修正版：より「桜」らしいSVGを提示します。
……は？
なに……え？
桜の花ってこんな一部だけ突出した形状してたっけ！？
どういうことなの……。
全然桜っぽくないです……
なるほど、的確です。
今の形は「抽象的な花」止まりで、桜特有の“5弁・先端の深い割れ・中心への滑らかな流れ”が出ていませんね。
確かに仕様書画像のものはもっと繊細で、花弁が少し尖り気味でバランスが良いです。
改良版：より「桜」らしいSVGを提示します。
うーん……ｗ
うん、まぁ……まぁ、さっきの門松モドキみたいなのからしたらちょっと桜に近くなったかぁ。
でもさっきから「先端の深い割れ」はどこ行ったの？
ChatGPTくんにとっての先割れってなんなんだ……。
だいぶ近くなりましたが、やはり違います。
まるでヒトデみたいに見えます。
花びらが集まる中心部はもっときゅっと締まって、各花びら5枚の外側先端は2つに先割れにならないといけません！
ありがとう、的確なフィードバック助かります — より桜らしく「中心がきゅっと締まり、外側先端がちゃんと二又に割れている」形に修正しました。
だいぶ近くなってきたぞ！
いいぞいいぞ～ここまで出来ればあとはもう少しな気がする。
だいぶ近づきました。
しかし、花びら先端が広がりすぎてややゴツさを感じます
なるほど、とても良い観察です。
桜らしい「やわらかさ」「優しい丸み」を出すには、花弁先端の開き角を少し狭め、かつ中央の切れ込みをやや深くするのが効果的です。
以下はその調整版です
かなり良くなってきた！
しかしChatGPTくんは「花びらの先端を丸みを帯びつつ先割れする」という表現が上手く伝わらないのかもしれない。
となると、あとは自力でパラメータをいじって調整するのが早そう。
パラメータを書き換え書き換えしつつ様子を見て、先端の丸みを表現していくぞ～！
完成品
ということで出来上がったのがこちら！
どうですか？
綺麗な桜じゃないですか？
角ばっていた部分をなだらかな曲線になるようにして、先端の割れ目の鋭角を少し広げてみました。
これでまた今度、OBS用素材を作ります！
ここまで読んでくれたら「いいね」やSNS共有してね！