🌺

プロンプト奮闘記 #2 花を描く

2023/05/12に公開

JavaScript

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

目指す形

このような花を描くプログラムを関数を作って作成していきます。
また、main関数を作り、main関数から花を描く関数であるdrawFlower()を呼び出すコードにします。

行ったこと

定義・環境について指示する
花を一気に描く
円弧を描くdrawArc関数を作成
花びら一枚一枚を表すdrawLemon関数を作成
花を描くdrawFlower関数を作成

1. 定義・環境について指示する

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

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

2. 花を一気に描く

目的の花を一回で描こうとしました。
結論は目的の花を描くことはできず、花びらを一枚描くところまでで断念しました。

それでは、過程を書いていきます。
まず、レモンの形をした花びらからできている花を描いてほしいとしました。

花びらが三角形の形をしたものになりました。
円弧を使って花びらを描くように指示しました。

一本の線で描かれてしまいました。

花びらの描き始めと描き終わりが同じ位置になるように描くよう指示しました。

最後にペンを上げて最初の位置に移動することで描き始めと描き終わりを一緒にしているコードになってしまいました。
円弧が左右対称になるよう指示してみました。

対称という意味で言うとこの書き方も対称で指示の仕方を間違えたと思いました。「描き始めと描き終わりが同じ位置になるように」というのは使えませんでした。

このコードが違うと指示してみました。

なかなかうまくいかないので、こちらから再度指摘してしまいました。

目的の花びらの形になりました。
花を一気に作ろうとした結果、うまくいかず花びら一枚から作りましたがとても時間を費やしてしまいました。
教授と話して、「円弧を描く→花びらを描く→花を描く」の順番に行っていけばうまくいくのでは？となりました。
次から、この順序で作った過程を示していきます。

3. 円弧を描くdrawArc関数を作成

中心角を指定して円弧を描くdrawArc関数の作成をしてもらいました。
結論としては、4.5ラリーほどで作ることができました。

不要なコードが多いので、以下のような指示を加えて完成させました。

・この環境では、タートルグラフィックスのライブラリを利用するための準備のなどのコードは不要です
・Math.PIを使わないでください
・var t = createTurtle();は一番最初に実行してください
・完了メッセージの表示は不要です
・main関数の中は120度を求めるテストのみで構いません

4. 花びら一枚一枚を表すdrawLemon関数を作成

目指すレモンの形は下図の通りです。作成したdrawArc関数を使用して作成します。

結論としては、現状と理想の形を正しく伝えることで作ることができました。

それでは作成過程を書いていきます。
drawArc関数を使用してレモンの図形を描くよう指示しました。

レモンというワードだけではうまくいきませんでした。

円弧の始点と終点が同じ場所になるように指示してみたり、下部の円弧を上部の円弧の始点の位置に向かって描くよう指示してみたりしましたがうまくいきませんでした。

円弧が対称になるように指示してみました。

対称となる軸の理解が異なっていました。

対称が使えないと思ったので、どうにかして二つの円弧を繋げ合わせる方向で頑張ってみました。

現状と理想の形を正しく伝えることでうまくいきました！

drawLemon関数の作成はなかなか時間がかかりました、、。

5. 花を描くdrawFlower関数を作成

これまでに作成してきたdrawArc関数、drawLemon関数を用いて作成します。
結論としては、「花びらが描かれている位置の現状」と「花びらを均等に描く」という指示で描くことができました。

まず、作成してきたdrawArc関数、drawLemon関数を用いて花を描いてほしいことを伝えました。

6枚の花びらであること
花びらの配置場所

上記2点が足りていなかったので次はこの２つの条件を追加しました。

6枚の花びらが同じ場所に描かれてしまいました。
重なって描かれてしまっていることを伝えてみました。

綺麗な花びらになってくれました！
花を描く際は、花びらの位置について現状を伝えて、均等という言葉を使っていたことで描くことができました。

気づき

最初からステップを踏まずにレモンや花を描くプログラムを作成しようとすると、作成することが困難でした。例えば、ChatGPTは二つの円弧を使って描かれた形をレモンと認識することができなかったり、花にはさまざまな種類があるため描くことが難しかったです。
逆に作成するものを分割して一個ずつ作っていくことは可能であると分かったため、どのステップから指示をしていくかということが重要であると分かりました。
また、対称という日本語だけでは「どこを基準に対称とするのか」という視点が抜けていたり、自分の指示の雑さを痛感しました。その他にも自分の意図している通りにならない時は、「ChatGPT使えないな〜」ではなく、「自分の指示が下手である」と思いました。

また、色の指定をしていないにもかかわらず、レモンの時は黄色に、花の時は赤色に自動的に色が変わりました。ChatGPTが言葉を理解し、それに基づいて現実に近い色を選択するというのは面白いと感じました。