PythonのタートルグラフィックスをMonaca Educationでプログラミングする

タートルグラフィックスは、古くからプログラミング教育に用いられてきた教材です。コンピュータ画面上のキャンバスに、ペンを操作して絵を描くプログラムを作成することができます。記述した命令が順次実行され、絵が徐々に描かれていく様子を見ることができき、プログラミングの基本を学習するのに役立ちます。

プログラミング言語Pythonには、タートルグラフィックスを実現する、turtleというライブラリが標準で組み込まれています。
Monaca Educationには、Pythonによるプログラムを実行するために、Brythonという仕組みを組み込んであります。このBrythonにも、turtleは受け継がれているので、Monaca Educationでタートルグラフィックスのプログラミングを行うことができます。

記事の冒頭に表示しているアニメーションは、Monaca Educationでタートルグラフィックスを実行できるように設定した上で、簡単なプログラムを書き、実際に画面に図形を描画させている様子です。線を引き、ペンを移動させ、図形を塗りつぶしている様子が見られます。

アニメーションのタートルグラフィックスをMonaca Educationでプログラミングできる形のサンプルアプリとして公開しております。
以下の記事では、サンプルアプリのコードを取り上げて説明しています、ぜひインポートしてみてください。

サンプルアプリのインポート

Monaca Educationにログインした状態で以下のプロジェクトをインポートしてください。

インポート

タートルグラフィックスの準備

※ サンプルアプリをインポートした場合は準備済みなのでこの作業は不要です。

今回取り上げるタートルグラフィックスは、Pythonの一部なので、Monaca EducationでPython（Brython）テンプレートを使ってプロジェクトを作りました。
python.pyファイルの最初に、次のように記述し、必要なプロジェクトをインポートしています。

####################################################
# この行より下にPythonプログラムを書いてください
####################################################
from browser import document
import turtle

次の行から、絵を描くキャンバスのサイズを指定しています。今回のサンプルプロジェクトでは、縦300、横300のサイズにしました。

turtle.set_defaults(
   canvwidth = 300,   # キャンバスの幅（デフォルトは500）。左端が-150、中央が0、右端が150
   canvheight = 300,  # キャンバスの高さ。デフォルトは500。下端が-150、中央が0、上端が150
   turtle_canvas_wrapper = document['turtle-div']
)

画面中央が(0,0)になるよう座標が設定されます。左端がX=-150、右端がX=150。下端がX=-150、上端がY=150です。

コンピュータ上で図や絵を描く他のツールでは、座標の原点を画面の左上の端にし、X軸の値もY軸の値も０以上の値しかとらない（マイナスの値をとらない）ものが多いです。
上の図のような座標の考え方は、タートルグラフィックスの特徴の１つになっています。

なお、プログラムのカッコの中に、”turtle-div” という箇所があります。これは、index.htmlの中に書いた<div>タグ（ID属性: “turtle-div”）を指しています。この<div>タグ要素の中に、キャンバスが作られ、絵が描かれます。

以下はindex.htmlの該当部分の抜粋です。

<!-- この<div>タグの中に、自動で<svg id='turtle-canvas'>タグが生成されます。
    タートルグラフィックスのプログラムは、その<svg>タグの中に書かれます -->
<div id='turtle-div'></div>

今回のプロジェクトでは、この<div>タグ要素の中の左右中央にキャンバスを表示するスタイルと、キャンバスの枠線を表示するスタイルをindex.htmlに追加しています。

   <!-- タートルグラフィックス用スタイル指定-->
   <style>
       /* キャンバスの親要素のスタイル。子要素を左右中央に配置する */
       #turtle-div {
           text-align: center
       }
       /* キャンバスのスタイル。枠線を表示 */
       #turtle-canvas {
           border: 1px solid
       }
   </style>

タートルグラフィックスのプログラミング

python.pyの次の行から、いよいよタートルグラフィックスのプログラムです。

最初に、タートルグラフィックスのキャンバスを作り、画面にペンを表示します。

# 上の設定でタートルグラフィックスを準備
t = turtle.Turtle("turtle")   # とすると、ペン先が亀のアイコンになる

ここでカッコの中に”turtle”と書いておくと、キャンバス上を亀が歩き回って、その跡に線が引かれるようになります。空白（turtle.Turtle()）にすると、ペン先は万年筆の先のような形になります。

ペンの設定（ペンの幅、色）

ペンは、幅（width）を設定できます。指定する数字が大きいほど、太い線で描けます。
ペンの色も指定できます。最初のt.pencolor()では、緑（”green”）を指定しています。他の色も使えるので、”red”や”blue”など、英語で色の名前を指定して、試してみてください。

# ペンの状態を設定
t.width(5)                   # ペンの太さを指定
t.pencolor( "green" )        # ペン先の色を指定（※デフォルトは黒）

次に、キャンバス上で、ペンを動かす命令を順に書いていきます。

# ペンを持ち上げて、位置を移動し、ペン先をおろす
t.penup()               # ペン先を持ち上げる
t.goto(-140,-140)       # ペンの位置を、座標を指定して移動（※最初は(0,0)の座標にある）
t.pendown()             # ペン先をキャンバスに付ける

ペンは最初、キャンバスの中心（座標(0, 0)）に置かれています。また、ペン先には方向があり、最初は画面右側を向いています。
ペン先は持ち上げることができ、持ち上げた状態で位置を移動させることができます（goto）。
上で述べた通り、タートルグラフィックスでは画面中央より左側はX座標がマイナスの値で、下側はY座標がマイナスの値になっています。つまりt.goto( -140,-140)とすると、キャンバスの左下にペンが移動します。

t.pendown()でペンをキャンバスにおろした後、続いて、線を引いていきます。亀に向かって「前に進め」「左を向け」と指示していると考えて、読んでみてください。

# キャンバスの縁に沿って、四角形を書く
t.forward(280)          # 前に280進める
t.left(90)              # 左に90度回転
t.forward(280)          # 前に280進める
t.left(90)              # 左に90度回転
t.forward(280)          # 前に280進める
t.left(90)              # 左に90度回転
t.forward(280)          # 前に280進める
t.left(90)              # 左に90度回転

「前に280歩進め」「90度左を向け」という動作を指示していることが読み取れるでしょうか。
画面のどちらが「前」で、どちらが「左」なのかは、命令が出された時点でペン先が向いている方向によります。ペン先が画面右を向いているとき、「前に280進める」とは、画面の右に向かって280進めるということです（長さ280の直線が引かれます）。同様に、ペン先が画面右を向いているときに「左に90度回転」すると、ペン先は画面上を指すようになるわけです。

円を描く

サンプルプロジェクトのプログラムの中に、以下のような行があります。

t.circle(50)            # 円を描く （現在のペンの位置・方向から、左に50離れた位置を中心とし、半径は50の円）

このt.circle()は、円を描く命令です。カッコの中の50という数値は、半径の大きさを指示しています。
タートルグラフィックスで図形を描く上で少し慣れが必要になるのが、この「円の描き方」です。「ペンの現在の位置と方向を基準にして、ペンの左、半径の分だけ離れたところを中心にして、円を描く」のです。
下の図は、ペン先が右を向いているときの概念図です。矢印がペン先の向きを表しており、右を向いています。
この向きに対して真左に、指定された半径分（上のコードの例では50）離れた場所に中心を取り、半径50の円を描きます。ペン先は、左周り（反時計回り）に進みます。

タートルグラフィックスのプログラムの完了処理

タートルグラフィックスによる描画を終えたら、最後に次の命令を描きます。この1文が無いと、画面に絵が描かれないので、忘れないように注意してください。

turtle.done()           # この命令が無いと、キャンバスへの書き出しをしないので、消さないこと！

Pythonプログラムの一部としてのタートルグラフィックス

タートルグラフィックスを紹介してきました。ここまで紹介してきたのは、標準ライブラリとしてPython言語に取り入れられた機能です。Python言語の一部なので、Pythonの文法を用いて計算したり、条件分岐や繰り返しをさせたりすることができます。

以下は、サンプルプロジェクトの中の例です。

# 頂点の数を指定して、図形を描く
v = 5   # 頂点の数。他の値に書き換えると、下の繰り返し・条件分岐の動作が変わる
for i in range(0,v):    # 0,1,2,..., (v-1)まで、v回繰り返す
   t.forward(25)
   if v%2 == 0:        # 偶数なら右まわり
       t.right( 360/v )
   else:               # 奇数なら左まわり
       t.left( 360/v )

変数vに値を入れています。
次にfor in を使って、0からV-1の値まで（つまり、V回）繰り返しています。
vの値が４なら、「直線を書いて、次に進行方向に対して90度（360/v）回転」を（０、１、２、３と）4回繰り返すので、正方形が描けます。
また、繰り返しの中では、if else文を使って、Vの値が偶数か奇数か判断し、右に回転するか左に回転するか分岐させています。

変数、for inを使った繰り返し、if else文など、Python言語の一般的な機能を使ってプログラムを作成できることを確認してください。

プログラミングや、コンピュータアートの制作の導入に

タートルグラフィックスは、書いたプログラムに従って、亀/ペンが動いていく様子を観察できるので、プログラミングの入門に適しています。
また、「座標上に、指示・計算した値に基づいて描画していく」というコンセプトは、コンピュータを使ってアート作品を作る方法を学ぶ上で、基本になります。
多くの方の役に立つ学習ツールだと思います。

参考にしたページ

Brython: Turtle demo https://brython.info/gallery/turtle.html
Python標準ライブラリ turtle — タートルグラフィックス https://docs.python.org/ja/3/library/turtle.html