ChatGPTでプログラム：Three.jsでクリエイティブコーディング

2023年7月18日
AI Technology

今まで、ChatGPTでのプログラミングでは「ChatGPT4とMidJourneyで「今日の料理とレシピ」を提案してくれるWEBアプリを制作」や「ChatGPT4を使ってシンプルなブロック崩しゲームを作成」と言った形でカジュアルゲームを取り上げてきましたが、今回はThree.jsなどを用いたクリエイティブコーディングができるのかどうかというチャレンジをしていきます。

クリエイティブコーディングとは？

クリエイティブコーディングは、主にビジュアルアートやインタラクティブアート、ライブビジュアルパフォーマンスなどの制作において、プログラミングを活用する手法でアートと科学、技術、数学などの領域が結びつき、新たな表現方法を期待できます。

アニメーション、視覚効果、3Dモデリング、ゲームデザイン、音楽、インタラクティブインスタレーションなど、多岐に渡るクリエイティブな出力をプログラミングを通じて創出することを指します。

ライブラリはProcessing、openFrameworks、P5.jsなど様々ですが今回は昔から利用されているThree.jsを指定して書いていきます。

プロンプト

Three.jsで幾何学模様が動き回るようなコードを書いてください

かなり良い感じになりましたが、細かい部分を調整していきます。

・立方体に白い境界線を書いてください
・速度をControlする変数を追加したい
・長方形の大きさと数を制御できる変数を追加してください

大筋の方向性が決まったら、デザインの調整と動きを変数化して自分の思い通りの動きができるように書き換えていってもらいます。もちろん初期のプロンプトに最初から記載しても良いと思います。

最終アウトプット

https://taziku.co.jp/c-coding/three001/

最終的には上記のプロンプトで様々なデザインを書き換えられるような変数が付与されて基本構造はそのままで、色々と調整ができるようになっています。

      var cubeSize = 0.01; // Change this to control the size of the cubes
      var cubeCount = 10; // Change this to control the number of cubes along each axis
      
      var geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
      var material = new THREE.MeshBasicMaterial({color: 0x00ff00, opacity: 0.8, transparent: true});
      var edges = new THREE.EdgesGeometry(geometry);
      var line = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 2 });

ベースを創れるだけでもかなりの時短

クリエイティブコーディングの場合、機能では無く、見た目が全てではあるため、数多くの動きを簡単に試せて自分なりに自然言語で創意工夫がこなせるのはとても良いことだと思いました。もう少し踏み込んで生成してみても良いと思った実験でした。