🐱

プロンプト奮闘記 #5-1 ドラえもんの顔枠を描く

2023/06/03に公開

JavaScript

ChatGPT×タートルグラフィックスを用いて絵を描く　第5弾ドラえもんの顔を描くプログラムです！
ChatGPTに質問して全てを作っています。プロンプトによって描かれるものがだいぶ違うので、できる限りいろんなプロンプトを入れた結果を残せるよう努力します！
ドラえもんは中々手強いため、顔の一部ができたところから記事をアップしていきます。

目指す形

このドラえもんを作成していきます。

手順

定義・環境について伝える
青色で描かれている、顔の枠線？を描く　←今回のメイン❕
目を描く
鼻・口・髭を描く

1. 定義・環境を伝える

使用している環境に合わせた定義やコードの使い方をChatGPTに教えてあげます。
大学の授業で使用している環境で絵を書いているため、以下のような指示を行なっています。

・var t = createTurtle();でタートルを生成する 
・タートルは90度の方向を向いて生成される 
・タートルの生成は1行目に一度だけ実行する
・t.rt(角度)で指定した角度だけ右に回す 
・t.lt(角度)で指定した角度だけ左に回す 
・t.fd(長さ)で指定した長さだけ進める 
・t.bk(長さ)で指定した長さだけ後ろに進める 
・t.up()でタートルがペンを上げる（軌跡がかかれなくなる） 
・t.down()でタートルがペンを下げる（軌跡がかかれるようになる） 
・t.color(色の指定)でタートルがペンの色を変える 
・input()でユーザーから入力を受け付ける 
・print()かprintln()でユーザーにメッセージを書く 
・parseInt()は使えないので、文字列を数字に変換するときはNumber()を使う 
・Math関数はceil, round, floorのみ使用可能←追加 
・letは使えないので全てvarで定義する 
上記の書き方をするタートルグラフィックスとJavaScriptを用いた学習の援助をして欲しい

2. 顔の枠を描く

最終的には、以下のようになりました。

var t = createTurtle();
t.color("blue"); // ペンの色を青に設定

// ペンを上げて、描き始める位置（下側）に移動
t.up();
t.rt(180); // 右に180度回転して下向きになる
t.fd(150); // 下に150移動
t.lt(90); // 左に90度回転して右向き（元の向き）に戻る
t.down();

// 下側から描き始めて大きな円（頭部全体）を描く
for (var i = 0; i < 360; i++) {
    t.fd(2);
    t.lt(1);
}

// 同じ位置から小さな円（内側）を描く
for (var i = 0; i < 360; i++) {
    t.fd(1.5);
    t.lt(1);
}

それでは作っていった過程を記載していきます。
まず、始めにドラえもんを描きたいということを伝えました。

次に、顔の枠を描くように指示しました。

二つの円という指示で、大きい円が枠、小さい円は口と理解されてしまいました。
首の部分から小さい円を描いて欲しいこと、口ではないことを伝えました。

この結果を見る限り、首の部分が右だと理解されていて、ChatGPTは人から見る右＝下だと理解しているようでした。
向きについて指示しました。

下方向に小さい円が描かれるようになりましたが、意図する形とは異なります。

向きの理解ができていないので、詳しく指示します。

下ではなく、左に移動する、かつ、なぜか半円になってしまいました、。

もう一度最初から作ることにしました。

右左ではなく、角度で指示しました。

また半円になってしまいました。なぜ半円になってしまうのでしょう、、分かりません、、。
円に戻してx・y軸で指示してみたらどうなるのかも検証してみました。

もう一度円を二つ描くという指示からやり直しました。

「タートルの初期方向が右（90度）向きである」は違っていて、「上（90度）向き」が正しいです、、。角度がやっぱり伝わっていません。。
これらを経てもう一度最初からやり直します

描かれる円が少し小さくなっただけで向きの問題は解消されませんでした。
具体的なコードと向きを指示して修正していきます。

だいぶ近づいてきました！
大きい円と小さい円の描き始めを同じ位置にするように指示していきます。

「同じ位置」という指示が最初タートルが生成される場所と勘違いされたみたいです。

できました！！！

気づき

後日先生と話したところ、定義・環境の時点で、

・この環境では0度が右、90度が上、180度が左、270度が下の方向

角度の指示が足りないということになりました。
今回は角度の指示が大変でこの1行さえ書いておけば、サクッとできた可能性は大いにあると思いました。

人に伝えるときも前提の角度と方向がないと分からないこともあるな、と思いました。自分の視点だけに縛られるのは良くない！

目指す形

手順

1. 定義・環境を伝える

2. 顔の枠を描く

気づき

Discussion