ChatGPTにJavaScriptでCGのコードを書いてもらった【2】


www.kaifugun-yamakawacho.net/


ChatGPTにJavaScriptでCGのコードを書いてもらった2


バニラなJavaScript編

引き続き、ChatGPTにJavaScriptでちょっとしたCGのコードを書いてもらいました。

トップのアニメーションは、
「JavaScriptで、黒背景でホタル3匹がゆっくり明滅しながら飛んでいるアニメって出来ますか?」とお願いした後、
「ホタルの数を12匹にしてください。なお、追加の9匹は割と遠くにいる感じで小さめでお願いします。」と修正を依頼。

自分では何も手を入れずにあっさり2回目の出力でこうなりました。
html、css、JavaScript全部込みで85行。
自分でやったら100年くらいかかりそう。


(※以下の画像はクリックで全画面になります。)

『ホタル』

(⇒コードを表示)

なんかChatGPT凄いですね。賢すぎ!

もっともなんでもこんなに簡単な訳ではないですが、それでも凄い。

続いて「星空」です。これは結構難しかったし、今もって満足のいく出来栄えではありません。

『星空』

(⇒コードを表示)


ちなみに、やりとりはこんな感じです。(↓)

・バニラJavaScriptで、黒背景で無数の星が瞬いているようなアニメを作ってください
・すみません、瞬いていないのですが。
・もう少し早く明滅させてください。
・瞬く星と瞬かない星を半々にしてください
・瞬く星について、速く瞬く星とゆっくり瞬く星を半々にしてください。
・なんかリアリティがないのですが、何故でしょうか?
・点滅する際ON/OFFではなく、消えた時も真っ暗ではなく少し明るさが残っている様に出来ますか?
・ちかちかのスピードを少し遅くしてください
・瞬きを1/fのゆらぎの様にすることは可能ですか?


そして次は「太陽系」

これは割とイメージに近いものがアウトプットされたのですが、微調整に時間かかりました。

『太陽系』

(⇒コードを表示)

公転周期はなんとなく本物っぽい気はしますが、軌道半径はリアリティ無し。

初めは水星から火星までで作っていて、その辺りまではヨカッタのですが、外惑星を追加していく中で崩れてしまいました。




そして、「世界の車窓から」

これはなかなか時間かかりました。途中から自分でコードを微調整。

『車窓の風景(街並み)』

(⇒コードを表示)


『車窓の風景(海)』

(⇒コードを表示)

もっと色々とパーツを増やしたいんですが、手作業の微調整が多くて、無理。



という事で、ホタルや星空などは案外いい感じ。
一方、風景的なものはやはりちょっとJavaScriptでは難しそうですね。

そもそもJavaScriptでつくる意味合いがどれだけあるんだよ?というのもあります。


(2025.02.18 up)

修正履歴:
 

・IPアドレスの一部を表示します。