🚗

ChatGPTとタートルグラフィックスを使って絵を描く #3 タイヤ

2023/05/13に公開・約3,600字

JavaScript

ChatGPT×タートルグラフィックス第3弾「タイヤを描く」プログラムです！
ChatGPTと対話してできたこと、できなかったこと両方について書いています。

目指す形

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

手順

定義・環境について教える
大きさの異なる円を描くコードを作る
大きい円に溝を描くようにする

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関数のradiusパラメータに渡しているにもかかわらず、drawCircle関数の中でradiusを使用していないため、同じ大きさの円が描かれました。

円を描く部分のコードは先ほどと何も変わりませんでした。

radiusについて指摘してみました。

それっぽくなりました👏

3. 大きい円に溝を描くようにする

まず、私はこのタイヤの図を見て、大きい円に描いてあるギザギザがタイヤの溝だと理解していませんでした。
そのため以下の言葉を使って目指しているタイヤになるように指示していました。

大きい円に棘を描いてほしい
ツノのようなものを描いてほしい
三角形を描きながら円を描いてほしい

もちろんこれでは伝わりませんでした😅

のちにこのギザギザが溝であることを知り、溝と指示して作りました。
（棘・ツノ・三角形と指示していた時については溝と指示した結果の後に記載しています！）

溝と指示する

ということで、
・横から見たタイヤの図
・大きい円に溝を描く
という指示をして作ってもらいました。

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

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

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

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

棘・ツノ・三角形という言葉を使って指示する

以下、失敗バージョンです。

棘を描いてほしいと指示する

円がたくさん描かれている上に、釘のようなものが描かれてしまいました。
ツノを描いてほしいと指示する

円の外側に三角形が描かれてしまったので、修正を試みました。

円の内側に三角形が描かれるようにして、この円の内側に小さい円を描くようにすればできそうな雰囲気が、、。
内側に三角形を描くように指示してみました。

なんとも言えない不思議な形になりました。
三角形を描いてほしいと指示する

別物のなんとなくすごい絵が作成されました。