ChatGPTにp5.jsのメンターをしてもらった
この記事はProcessing Advent Calendar 2023の19日目に寄せた投稿です。
お久しぶりです。Toriiです。前回の投稿から1年空きました。この更新頻度からわかる通り、大抵のことを断続的にしか続けられない性分で、クリエイティブコーディングもその限りではありません。今回の投稿のために約2か月ぶりにp5.jsのエディタ(OpenProcessing)を開きましたが、何から書くべきか見当もつかず。というわけで、話題の対話型AIにメンターを務めてもらいました。
ChatGPTとの対話
エディタに標準で表示されているsetup()とdraw()を目の前にして「ここから何してたっけ?」とぼんやりするくらいのブランクがあります。ChatGPTに自分のスキルや知識に見合った練習メニューを作ってもらい、レビューや添削をしてもらいます。
課題設定
まずは手を動かすことから始めたかったので、写経すべきコードを依頼します。テキトーに自分のレベルを伝えると、適当なテーマを設定してくれました。
この時点のコードは割愛します。比較的粒度の粗いパーティクル表現で、30行程度のものです。
ChatGPT自身が生成したパーティクルシステムのコードをもとに、私向けに課題を出してもらいました。
回答と添削
各課題に対して、わかる範囲で書いてみます。わからない箇所は根を詰めて調べたりせず、空白の状態でとりあえず提出してみました。こんなにもラフな態度でプログラミングに向き合うことは、これまでになかった経験ですね。
課題2の解説に「マウスの位置に応じて」と記載されているのを無視して書いてみるとやんわりと正されました。すごく丁寧に怒られている気分です。
訂正してもらったコードはこちら。
class Particles {
// ...
show(col) { noStroke(); fill(col);
let d = dist(mouseX, mouseY, this.position.x, this.position.y);
this.blob = map(d, 0, width, 4, 1); // マウスに近いほど大きくなる
circle(this.position.x, this.position.y, this.size * this.blob); }
// ...
}
続いて、完全に匙を投げた課題3についての解説です。
うーん、言ってることは分かるけど「コードにしてみて」って言われるとやっぱり書き出しがわからない。というわけで早速解答を見てみます。
function draw() {
background(250, 250, 240);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].show(map(sin(radians(frameCount)), -1, 1, 0, 100));
connectParticles(i); // パーティクル間を線でつなぐ関数を呼び出す
}
}
function connectParticles(index) {
for (let j = 0; j < particles.length; j++) {
if (index != j) {
let d = dist(particles[index].position.x, particles[index].position.y, particles[j].position.x, particles[j].position.y);
if (d < 50) { // 50ピクセル未満の距離にある場合、線でつなぐ
stroke(0, 50);
line(particles[index].position.x, particles[index].position.y, particles[j].position.x, particles[j].position.y);
}
}
}
}
実行してみるとそれっぽいものが出来上がっていました。
アレンジしたもの
ノード表現の実装があまり呑み込めていないので、
課題1 :パーティクルの色とサイズを変更する
課題2:パーティクルの動きに変化を加える
を実装した状態から自分なりにアレンジしてみます。今回はlerpColorを使って色が滑らかに変化するようにしました。…いや、そうしたかったのですが、意図した挙動にならなかったのでメンターに聞きました。
というわけで無事に制作できました。作品はこちら。
おわりに
久々のp5.js練習は無事に形になりました。ChatGPT様様です。一応この後の展開も考えてもらいました。
ちょっと何言ってるかわからないです。
わからないですが、せっかく道しるべなので、これもまたカリキュラム化してもらって取り組んでみようと思います。それではまた1年後に!
この記事が気に入ったらサポートをしてみませんか?