🚗

プロンプト奮闘記 #3 タイヤを描く

2023/05/13に公開

JavaScript

ChatGPT, タートルグラフィックス, jsを使ってタイヤを描くプログラムを作りました！
プロンプト奮闘記と気づきを書いていきます。

目指す形

これをタイヤと言っていいのか、、は別としてこの形を目指します。

行ったこと

定義・環境について教える
外側の円に描かれている溝を示すものを「棘・ツノ」と指示して作成する
「溝」と指示して描く

1. 定義・環境について教える

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

・var t = createTurtle();でタートルを生成する。
・タートルの生成は一番最初に一度だけ実行する
・生成したタートルは90度の方向に向いている
・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. 外側の円に描かれている溝を示すものを「棘・ツノ」と指示する

まず、自分の言葉で目的のタイヤを言葉に起こしてみました。

目的の図とは大きく異なったので、一旦二重丸のような大きい円と小さい円を描こうと思いました。

見た目が変わっていないので、コード内のおかしい部分を指摘してしまいました。

二重丸が描けたので、タイヤの溝を示す部分を指示していきます。

drawCircle()も追加して描かれたものが以下です。

この三角形で描かれているものが、円の内側に&細長くなれば形としては目的のものに近くなると思いました。

全然違うものになってしまいました。

二つ前の三角形が円の外側に向かって描かれているコードに戻してもらうようにしました。

が、ダメでした。ほぼそのままで、大きさだけ大きくなったというような感じです。

二重丸を描くところからやり直そうと思いました。

ここから少し調整して、二重丸になるようにしました。

この二重丸のコードを崩さないように大きい円の外側に描かれているギザギザを描くように指示しました。

棘・ツノ・三角形と指示してきましたが、うまくいきませんでした。

この流れを教授と話したところ、この大きい円に描かれているギザギザはタイヤの溝を示しているから、「溝」と指示してやってみようとなりました。

3. 「溝」と指示する

ということで、

横から見たタイヤの図
大きい円に溝を描く

という指示をして作成しました。
まず、先ほど同様二重丸を描くプログラムから作り、上記の指示をしました。

二つの円がとても小さくなってしまい、横並びになってしまいました。
溝はいい感じです。

円の大きさについて指摘しました。

良い感じになりました。あとは溝の数を増やすのみです！

「i % 20 == 0　の数値を小さくすると溝の個数を変えられる」とまで教えてくれたので、「i % 2 == 0　」に変更していい感じのタイヤにすることができました！

最後に

最初は視覚的にタイヤの溝のことを「棘・ツノ」などで指示していましたが、「溝」というようにタイヤアプローチで指示することで簡単に意図するものが描けてびっくりしました。
「〇〇のような〜、△△のように〜」などと比喩的なアプローチだと人同士でも理解の差が生まれるので、ChatGPTで描けないことは当たり前だったのかもしれません。
逆に比喩で指示することで伝わるのはどの程度であるのか気になってきました、。