ゼロからはじめてみる日本語プログラミング「なでしこ」(4) タートルグラフィックスでお絵かきしよう(その2)

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

男子中高生の憧れの仕事第一位は「プログラマー」

先日、発表された『男子中高生が将来なりたい職業の第1位が「ITエンジニア・プログラマー」というアンケート』が目にとまりました。(「中高生が思い描く将来についての意識調査2017」/ソニー生命保険)

近年、プログラマー出身者が長者番付けを賑わせたり、プログラマーが主人公というドラマが多いので、それも影響しているのでしょうか。そういえば、去年ブームになった"逃げ恥"(「逃げるは恥だが役に立つ」/TBS)で星野源さんが演じた平匡も、ITエンジニアでした。劇中、パソコンのディスプレイにPHPのプログラムが映っていたのを筆者は見逃しませんでした。PHPとはWebアプリの開発が得意なプログラミング言語です。彼は、Webアプリ開発を担当していたのです。

そして、プログラマーはインターネットでさえつながっていれば作業場を選ばないというのが大きなメリットです。おしゃれなオフィスで働くことができたり、雇用形態によっては旅行先のカフェや海外の好きな街に移住して働くこともできます。そういう、筆者自身も、この原稿を、旅行先の沖縄で、海の見えるレストランで食事をした後で書いています。実体験として、パソコンさえあれば、どこでも仕事ができるというのは、本当に便利です。こうしたメリットが知られているなら、学生に人気というのもうなずけます。

ただし、逆を言えば、休暇で家族旅行に行ったときでも、仕事をさせられるということであり、実際、筆者も数年前に休暇でプーケットに行った時など、南国の青い海を目の前にして・・・いやいや、若者たちの夢を壊すのは止めておきましょう。

加えて、プログラマーの仕事は、楽しくクリエイティブで、世の中を便利にする仕事です。新しい技術が次々と登場し、刺激的でとてもやりがいのある仕事と言うことができます。プログラミングはとても楽しく、筆者は、仕事でプログラミングした後に、趣味でもプログラミングしています。

プログラマーを目指している中高生の皆さん、なでしこでプログラミングを覚えて、夢を実現させましょう！

もっとタートルグラフィックスを極めよう

さて、前回は、基本的なタートルグラフィックスのプログラムの作り方を紹介しました。今回も、プログラムを作るには、以下のURLにアクセスし、プログラムを入力して[実行]ボタンを押すことで、動かすことができます。PCだけでなく、スマホやタブレットでも実行できます。

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

前回、カメを動かして、図形を描く基本的な命令を紹介しましたが、今回は、もう少し複雑なグラフィックスを描画する方法を紹介します。

いろいろな色で描画しよう

まずは、カメが描画するペンの色を変更する方法を紹介します。『(色名)にカメペン色設定』と書くことで、描画色を変更できます。指定できる色は、水色、紫色、緑色、青色、赤色、黄色、黒色、白色、茶色などです。また、色名だけでなく、HTMLで色を指定する方法「#RRGGBB」の形式も利用できます。

以下は、カメの描画色を変更する例のプログラムです。

 カメ作成。
 # --- 赤色
 赤色にカメペン色設定。
 150だけカメ進む。
 90だけカメ左回転。
 # --- 青色
 青色にカメペン色設定。
 100だけカメ進む。
 90だけカメ左回転。
 # --- HTML形式で色を指定
 「#00FFFF」にカメペン色設定。
 150だけカメ進む。

プログラムを実行するには、上記のURLの簡易エディタにアクセスして、プログラムを入力し、[実行]ボタンを押してください。すると、以下のような図形が描画されます。

カメの描画色を変更できます

光の三原色で指定する方法

それから、色の指定には、『RGB(赤,緑,青)』関数を使う方法があります。これは、光の三原色の赤・緑・青の各値に0から255の値を指定することで、色の混ざり具合を指定します。例えば、RGB(255,0,0)と指定すれば赤色になり、RGB(0,0,255)で青色、RGB(255,0,255)であれば紫色となります。

これを前回紹介した『回・・・ここまで』構文と組み合わせてみましょう。少しずつ色の混ざり具合を変えて描画することで、グラデーションを表現できます。以下は、少しずつ、赤と緑の値を変更することで、青色のグラデーション図形を描画します。

 カメ作成。
 [10,10]にカメ起点移動。
 90にカメ角度設定。
 C=255
 80回
 　　色=RGB(C,C,255)
 　　色にカメペン色設定。
 　　Cだけカメ進む
 　　90だけカメ右回転
 　　C=C-3
 ここまで。

プログラムを実行すると、以下のようなグラデーションの渦巻き図形を描画します。

RGB関数を使ってグラデーションを描画

プログラムを見てみましょう。まずは『[X, Y]にカメ起点移動』命令を使って、カメを左上に移動します。次いで、カメの向きを90度に回転させます。そして、そこから、80回、「ここまで」に至る処理を繰り返します。繰り返し処理では、変数Cの値を元にしてカメの描画ペンの色を決定します。そのとき、変数Cの値分だけカメを進めます。繰り返しの最後に変数Cの値を3だけ減らします。これにより、少しずつ小さな四角形を描画していくことができます。

繰り返し構文について

また、繰り返し処理をする構文には、『(N)回』構文だけでなく『(変数)を(A)から(B)まで繰り返す』構文もあります。これを使うと、変数の値をAからBまで一つずつ加算しながら繰り返します。

以下のプログラムは、「繰り返す」から「ここまで」の部分を、繰り返し実行します。その際、変数Nの値を1から5まで加算しながら実行します。

 Nを1から5まで繰り返す
 　　Nを表示。
 ここまで。

プログラムを実行すると、以下のように表示されます。

1から5まで繰り返し実行する

この繰り返し構文を利用して、たくさんの線を描画するプログラムを作ってみましょう。

 カメ作成。
 1にカメペンサイズ設定。
 Nを1から100まで繰り返す
 　　C = 255 - N * 2
 　　RGB(C, C, 255)にカメペン色設定。
 　　[10, N * 3]にカメ起点移動。
 　　[300, N * 3]にカメ移動。
 ここまで。

プログラムを実行すると、以下のようにたくさんの線が描画されます。

たくさんの線を繰り返し描画するプログラム

今回のプログラムでは、プログラムの冒頭で、カメが描画する線のサイズ（太さ）を1としています。そして、『繰り返す・・・ここまで』構文を利用して、1から100まで繰り返し処理を行います。その際、変数Nに何回目の繰り返しであるかが設定されます。そのため、このNを利用して、描画する色を決定し、左から右へと線を描画します。

線の描画を行うときに、『カメ移動』と『カメ起点移動』の二つの命令を利用します。この二つの命令は、いずれもカメを特定の座標に移動させるものです。しかし、『[X, Y]にカメ移動』命令は、カメが動いた軌跡に線が残るのに対して、『[X, Y]にカメ起点移動』命令を使うと座標だけが変わります。

高速に描画を行う

ところで、たくさんの線を描画する際、カメの歩みが遅くて、もっと速く線を描画できたら良いのにと思われたでしょうか。実は、タートルグラフィックスでは、皆さんを楽しませるために、わざと遅く描画を行っています。『Vにカメ速度設定』という命令を使うと、描画速度を変更できます。この値Vには、小さな数値を指定するほど、描画は速くなり、0を指定すると遅延なしに描画を行うことができます。

この命令の利用例として、レヴィのC曲線と呼ばれている複雑な模様を持った図形を描画してみます。どのくらい複雑なのか、先に実行結果をお見せしましょう。

複雑なレヴィのC曲線を描画したところ

以下が、この図形を描画するプログラムです。

 カメ作成。
 0にカメ速度設定。# --- (※1)

 ●C曲線描画(NとWで)
 　　もし、N <= 0ならば
 　　　　Ｗだけカメ進む
 　　　　戻る。
 　　ここまで。
 　　N-1とWでC曲線描画。
 　　-90だけカメ右回転。
 　　N-1とWでC曲線描画。
 　　90だけカメ右回転。
 ここまで。

 [250, 130]にカメ起点移動。
 2にカメペンサイズ設定。
 -90だけカメ右回転。
 10と5でC曲線描画。

このプログラムでは、『C曲線描画』という独自関数を定義して「再帰」という手法を利用して、入り組んだ図形を描画しています。今は、まだ、少し難しいかもしれませんので、あまり詳しく説明しませんが、少し工夫すると、これだけ複雑な図形も描けるという参考にしてください。

とは言え、このプログラムで特に注目したいのは、プログラムの(※1)の部分です。カメの速度を0にしているので、一瞬で描画が終わりますが、2など適当な数値に書き換えて再度実行してみてください。すると、カメが図形を描画する経過を確認することができます。