気分的にも何かと忙しい師走ですが今年は新型コロナウィルスのせいで趣が少し違いますね。家でゆっくり何かに集中するのが有意義な過ごし方になりそうです。そこでオススメしたいのが、プログラミングによるお絵かきです。タートルグラフィックスを利用していろいろな幾何学模様を描画してみましょう。

伝統的なカメでプログラミングを覚えよう

実はプログラミングによるお絵かきの歴史は古いものです。1967年にMITの研究者がLOGOというプログラミング言語を開発します。これは画面上のカメ（タートル）を動かすことで図形を描画するというものでした。命令を与えることでカメが動き、その歩いた後に線が描画されるのです。見た目にも面白くプログラミングを学ぶにはぴったりの題材です。これをタートルグラフィックスと呼ぶのですが、本連載の「なでしこ」にも実装されています。

なでしこのタートルグラフィックスでは、基本的には「カメ作成」「Nだけカメ進む」「Nだけカメ右回転」などの簡単な命令を組み合わせることで図形を描画します。しかし、プログラミングではフロー制御と言って、繰り返しや条件分岐などを組み合わせることで、複雑な図形を描画できます。

例えば、六角形を描画するには、以下のようなプログラムを記述します。こちらの『簡易エディタ(グラフィックス用)』に、以下のプログラムを記述してみましょう。

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

実行ボタンを押すとカメが動いて図形が描画されます。

  • カメで六角形を描画したところ

    カメで六角形を描画したところ

このように「カメ進む」と「カメ右回転」を実行することで図形を描画できます。面白いと思いませんか。

シェルピンスキーの三角形にチャレンジ

とは言え、基本的なタートルグラフィックスについては、過去の連載の3回目と4回目で紹介しています。

基本的な使い方を確認するには、上記の連載をご覧ください。そこで、今回はタートルグラフィックスの発展的なトピックについて扱います。最初に挑戦するのは、ポーランドの数学者シェルピンスキーにちなんで名付けられた「シェルピンスキーの三角形」と呼ばれる幾何学模様です。以下のような図形です。

  • シェルピンスキーの三角形

    シェルピンスキーの三角形

この図形が面白いのは、小さな三角形で大きな三角形が描画されていることです。その図形の一部として図形全体と相似な形を含むような図形を『フラクタル図形』と呼びます。

このシェルピンスキーの三角形を描画する、なでしこのプログラムは以下のようになります。

# シェルピンスキーの三角形
カメ作成して、10にカメ速度設定。
[50,300]にカメ起点移動。
90にカメ角度設定。
5の300で再帰三角形描画。

●(Mの歩数で)再帰三角形描画とは
　　もし、M<=0ならば、戻る。
　　3回
　　　　(M-1)の(歩数/2)で再帰三角形描画。
　　　　歩数だけカメ進む。
　　　　120だけカメ左回転。
　　ここまで。
ここまで。

先ほど紹介したグラフィックス用のなでしこ簡易エディタに貼り付けて実行してみましょう。すると、以下のように高速にカメが動いてシェルピンスキーの三角形を描画します。

  • ガスケットの三角形をタートルグラフィックスで実現

    ガスケットの三角形をタートルグラフィックスで実現

プログラムを確認してみましょう。基本的には最初に六角形を描画したように、3回「カメ進む」と「カメ左回転」を使うことで三角形を描画するのですが、その際、関数「再帰三角形描画」を再帰的に呼び出すことにより、フラクタル図形を描画しています。わずか15行でこれだけ複雑な図形を描画できるのは面白いですよね。

ドラゴン曲線にチャレンジ

次に、ドラゴン曲線と呼ばれる図形に挑戦してみましょう。これは、以下のような図形です。この図形はNASAの物理学者のジョン・ヘイウェイらによって研究されたもので、ヘイウェイ・ドラゴンと呼ばれています。この図形も再帰処理によって描画できます。

  • ドラゴン曲線

    ドラゴン曲線

もしパソコンを使う場合、せっかくなので、少し大きなキャンバスを使うと楽しめます。簡易エディタからリンクされている「nako3storage」を使ってみましょう。nako3storageにアクセスしたら「新規」ボタンをクリックします。そして、エディタが表示されたら、以下のプログラムを記入します。

# ドラゴン曲線
カメ作成。1にカメ速度設定。# --- (*1)
[200,400]にカメ起点移動。
2にカメペンサイズ設定。
90にカメ角度設定。
13と500の1でドラゴン描画。# --- (*2)
カメ非表示。

●(Mと歩数の向きで)ドラゴン描画とは
　　もし、M<=0ならば
　　　　歩数だけカメ進む。
　　違えば
　　　　(45×向き)だけカメ左回転。
　　　　(M-1)と(歩数/SQRT(2))の1でドラゴン描画。
　　　　(90×向き)だけカメ右回転。
　　　　(M-1)と(歩数/SQRT(2))の-1でドラゴン描画。
　　　　(45×向き)だけカメ左回転。
　　ここまで。
ここまで。

実行ボタンを押すと、描画が切れてしまうと思います。そこで、図形の下にあるCanvasの部分を800×600に設定して[Enter]キーを押してください。描画領域が大きくなります。そこで、改めて実行ボタンを押して描画してみてください。

ちなみに、プログラムの二行目(＊1)にある「カメ速度設定」の部分を「0にカメ速度設定」とすると、途中経過を飛ばして描画結果だけを描画するようになります。

また、(＊2)の部分でどんなドラゴン曲線を描画するのか指定しています。再帰回数を表している13の部分を9や5に減らしてみたり逆に15に増やしてみたりと変更してみてください。それぞれ味のあるドラゴン曲線を描画できます。

  • ドラゴン曲線で7を指定したところ

    ドラゴン曲線で7を指定したところ

  • ドラゴン曲線で15を指定したところ

    ドラゴン曲線で15を指定したところ

まとめ

今回紹介した、シェルビンスキーの三角形も、ドラゴン曲線も、共に面白い形をしていますよね。いずれも20行未満のプログラムですが、再帰処理を活用することで思いもよらない面白い幾何学模様を描画することができました。ここでは白黒だけの図形を描画しましたが「カメペン色設定」命令を使うと色を変更することもできます。カラフルな図形描画も試してみてください。また、これらの図形に興味があればさらに調べてみてください。すると数学的にも面白いトピックが見つかることでしょう。

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