タートルグラフィックスでお絵かきしよう(その1)

日本語でプログラミングできる「なでしこ」を使って、プログラミングを身につけましょう。プログラミングができれば、いろいろな仕事を自動化することができます。今回は、カメを使って、画面に絵を描くタートルグラフィックスを紹介します。

日本語プログラミング言語について語り合った

先日のことですが、 横浜在住の発明家、岡部大陸さんとお会いする機会がありました。岡部さんは、ヒューマンインターフェイスに係る文字入力などユニークな発明の特許をいくつも持っておられます。御年77歳の大先輩なのですが、日々、さまざまなアイデアを考案しさまざまな発明をされています。そんな、岡部さんと、母国語でプログラミングできることのメリットについて語り合うことができました。

岡部さんは「私たちは、日本語を読み書きし、日本語で考えています。母語が日本語であるなら、自然と日本語で物事を考えています。そうであるなら、プログラミングをする時も、日本語で考えることができれば、思考を妨げることなく、老若男女を問わずにプログラムを作ることができるはずです。また、日本人にノーベル賞受賞者がたくさん居ることも考えると、日本語というのは、見立て（類推）を利用して、論理的思考空間の中に仮想の物事を組み立てるのに適した言語であると言うことができます。ぜひ、日本の子供たちのために日本語プログラミング言語の普及発展を頑張ってもらいたいです。」と、暖かく励ましていただきました。

日本語プログラミング言語「なでしこ」を開発して、もう10年以上が経ちます。確かに、日本語プログラミング言語を実践することで、英語ベースの言語よりも、素早くプログラムを作れる場面も多いです。そのため、母国語でプログラムが読み書きできることのメリットというのは大きいと感じます。引き続き、使いやすい日本語プログラミング言語の開発を頑張ろうと思ったのでした。

タートルグラフィックスで遊んでみよう

さて、今回、紹介するのは「タートルグラフィックス」です。これは、ペンを持ったカメを動かしてお絵かきをするという機能です。先に種明かしすると、これは、便利とか、覚えると役に立つとか、そういう類いの機能ではなく、楽しんでプログラミングを覚えるための面白い機能です。もともとは、LOGOというプログラミング言語に備わっていた機能で、コンピューターを利用して、子供たちに思考能力の訓練を目的として作成されました。ですから、なでしこでプログラミングを学習するのにぴったりの機能なんです。

タートルグラフィックスでは、画面上に、表示されるカメに対して、どのように動かすかをプログラミングします。そして、カメを動かすことで、カメの通った箇所に線が引かれます。

タートルグラフィックスで遊ぼう

タートルグラフィックスを試すには、以下のURL(なでしこ3簡易エディタ(タートルグラフィックス用))にアクセスして、プログラムを入力したら、[実行]ボタンを押してください。PCのほか、スマホやタブレットでも実行して遊ぶことができます。

なでしこ3簡易エディタ(タートルグラフィックス用)

それでは、なでしこでタートルグラフィックスを利用する方法を紹介します。まず、タートルグラフィックスを使うためには、プログラムの先頭に「カメ作成」と一言書いておきます。これによって、エディタのすぐ下にあるエディタにカメが表示されます。

そして、カメを動かすには、基本的に以下の三つの命令を覚えるだけで十分でしょう。

・「Nだけカメ進む」・・・カメをNピクセルだけ前に進める
・「Aだけカメ右回転」・・・カメの進行方向をA度だけ右に回転
・「Aだけカメ左回転」・・・カメの進行方向をA度だけ左に回転

簡単なプログラムで動作を確認してみましょう。先ほど紹介した「なでしこ3簡易エディタ」にアクセスし、以下のプログラムを記述し、[実行]ボタンを押します。

 カメ作成。
 150だけカメ進む。
 90だけカメ右回転。
 50だけカメ進む。
 90だけカメ右回転。
 150だけカメ進む。

すると、カメが動いて、以下のような逆U字の図形を描画します。

プログラムを確認してみましょう。カメを作成した後で、カメをまっすぐ150ピクセル進ませます。そして、カメの進行方向を90度右方向へ回転させて、さらに、50ピクセル進ませ、90度回転し、150ピクセル進みます。このようにして、逆U字の図形を描画することができます。難しくありませんね。

このように、カメを動かす命令を、ひたすら並べるだけで、いろいろな図形を描画できます。以下は、正方形を描画するプログラムです。

 カメ作成
 150だけカメ進む。
 90だけカメ右回転。
 150だけカメ進む。
 90だけカメ右回転。
 150だけカメ進む。
 90だけカメ右回転。
 150だけカメ進む。
 90だけカメ右回転。

同じように、エディタにプログラムを記述して「実行」ボタンを押すと、カメが動いて正方形を描画します。

同じ処理を何回も繰り返す方法

ところで、プログラミング言語の面白いところですが、自分で命令を何度もべた書きしなくても、好きなだけ処理を繰り返し実行させる構文が用意されています。なでしこで、指定回数だけ処理を繰り返すには、「(数値)回・・・ここまで」構文を使います。

例えば、カメを進めて、90度右回転するという動作を4回繰り返せば、先ほど作成したプログラムと同じ正方形の図形を描画できます。以下が、「(数値)回・・・ここまで」構文を使って正方形を描画するプログラムです。

 カメ作成。
 4回
 　　150だけカメ進む。
 　　90だけカメ右回転。
 ここまで

先ほどのプログラムと比較してみると、かなり、すっきりした印象ではないでしょうか。

これを応用すれば、八角形の図形も簡単に描画できます。以下は、八角形の図形を描画する例です。

 カメ作成。
 8回
 　　60だけカメ進む。
 　　(360÷8)だけカメ右回転。
 ここまで。

八角形を描画するには、360度を8で割った値(=45度)でカメを回転させることで、綺麗な八角形を描画できます。先ほどの四角形であれば、360度を4で割った値なので、90度を指定しました。

それでは、36角形を描くにはどうしたらよいでしょうか？・・・そうですね。カメを10度(=360度を36で割った値)で回転させれば良いのです。それでは、36角形を描画してみましょう。また、せっかくですから、値の指定に変数を利用してプログラムを作ってみましょう。

 # 何角形かを指定
 N=36
 # 角度を計算
 A=360÷N
 # カメで描画する
 カメ作成。
 (N)回
 　　12だけカメ進む。
 　　Aだけカメ右回転。
 ここまで

プログラムを実行すると、カメがゆっくり動いて、以下のような図形が描かれます。このサイズの36角形はほぼ円のように見えますね。

このプログラムでは、変数を利用して、角度の計算式を作り、回転角を計算しています。そのため、プログラム2行目にある変数Nの値を変えることで、任意のＮ角形を描画することができます。Nを適当な値に書き換えてみて、実行すると面白いでしょう。

今回のまとめ

今回は、タートルグラフィックスについて紹介しました。カメを操作して、図形を描くというのは、とても楽しいものです。今回は、基本的な使い方と、「(N)回・・・ここまで」構文について紹介しました。次回は、より高度な制御構文と組み合わせて、さらに複雑な図形を描画する方法を紹介します。お楽しみに。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2005年IPAスーパークリエイター認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。