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


www.kaifugun-yamakawacho.net/


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


バニラなJavaScript編

ChatGPTにちょっとしたCGのコードを書いてもらいました。

「無数の点が画面の中を不規則に漂うみたいなの作ってください」みたいにお願いして、あとはコードの解説と微調整の仕方を質問して、点の数などは自分で少し調整して完成。
以下のアニメーションはわずか38行のコードです(htmlタグやhead、bodyはなし)。しかもライブラリを使ったりしていないバニラのJavaScriptで。

なんかChatGPT凄いですね。

プログラムが下手糞で、書くのが遅くても、ChatGPTが華麗に使える方が、優秀なプログラマーより優位な世界になるんでしょうね。

色々作ってもらいましたけど、お願いの仕方が悪いのか、技術的に難しいのか、「地球儀が回ってるみたいなの」は何度やっても駄目でした。(バニラでなくて、Three.jpを使う方法を提案されて、それでは出来ました。)

このページのトップの、宇宙空間を進んでいる風のアニメーションも結構やり取りに時間かかりました。(下図)


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

(1) 宇宙空間を進んでいるようなイメージで、点を動かすことは出来ますか?
   ↓
(2) 星が右から左に流れるのではなく中心から外側に放射状に流れるようにできますか?
   ↓
(3) 一度画面から出た点は反対側には出さず、また、画面の中心から新しい点が発生し続ける様に出来ますか?
   ↓
(4) 昔、windowsのスクリーンセーバーにあった宇宙航行みたいなのは出来ませんか?

いろいろ頼んでもいまいちパッとしなかったのですが、最後のスクリーンセーバーを例に出した依頼で、ほぼイメージ通りになりました。


「いい感じになって来ました。ありがとうございます。あとは、突然星が現れる感じがします。星が発生する時は限りなく小さな点にすればいいのではと思いますがどうでしょうか?」 とか、 「いい感じですが、発生するところはいいのですが、その後、星が大きくなり過ぎます。」
などと、修正依頼を何度か出して完成。

こちらは76行。

その後、調子に乗っていろいろ頼んでみました。

「レーダーの画面みたいなの作れますか?」

「すごいですね。ではオシロスコープみたいなのも出来ますか?」

「サイコロが回転しているようなのも出来ますか?」


みたいな感じで、いろいろ作ってもらいました。

時々お礼を言ったり、「凄いですね」とか褒めるのがポイントです。

※画像タップで全画面表示

『宇宙飛行 左の窓から』
宇宙飛行を作ってもらう過程で出来たもの。
(51行)

(コードを表示)

『宇宙飛行』
やり取り数回で完成。
(76行)

(コードを表示)

『サイコロ』
なんとJavaScriptも使っていない。HTMLとCSSのみ。
(77行)

(コードを表示)

『レーダー』
(97行)

(コードを表示)

『オシロスコープ』
(71行)

(コードを表示)

『トンネルの中を走る風』にしたかったけど、とりあえずここまで。
(91行)
(コードを表示)

ちなみに、上のサイコロのアニメーションは、なんとJavaScript使っていません。HTMLとCSSだけです。77行。

このサイコロをグーグル検索だけで自力で作れと言われたら、たぶん100年くらい掛かりそうです。

最後に、バニラのJavaScriptでは作ってくれなかった地球儀が回るアニメーションがこちら。

何度も会話を重ねましたがうまく行かず、Three.jpのライブラリを提案され、それでお願いしました。(65行)

回転する地球儀。これはThree.jpを使用。
(65行)
(コードを表示)


(2025.01.30 up)

修正履歴:
 

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