どうやって一筆で描く？なでしこで一筆書きクイズに挑戦しよう！

昨今「一筆書き」を使ったアート作品が多数発表されています。シンプルながらも味のある一筆書きの表現は人を魅了しますし、頭の体操としても役立てます。なでしこのタートル機能を利用して一筆書きクイズに挑戦してみましょう。

• 

  一筆書きでいろいろな図形を描いてみよう

一筆書きで頭の体操、基本の3命令を確認しよう

「一筆書き」とは、ある一点から始めて、筆を継ぎ足すことなく一気に図形を描きあげることを言います。そのため、一筆で図形を描くために、どこから、どのような順番で描けば良いのか頭を悩ませることになります。

なでしこで「一筆書き」を実践するには、「タートルグラフィックス」の機能を使います。この機能については、本連載の3回目でも解説していますが、改めて確認してみましょう。図形を描くに必要なのは、次の3つの命令を覚えることです。

• 「カメ作成」・・・タートルグラフィックスの描画を開始する
• 「Nだけカメ進む」・・・カメをNピクセルだけ前に進める
• 「Aだけカメ右回転」・・・カメの進行方向をA度だけ右に回転する(-360から360を指定)

上記の3つの命令を使うだけで次のような画像を描画できます。どのように描画したら良いのか考えてみてください。

• 

  一筆書きで書いた図形。3つの命令だけで描画できるかな？

なでしこで図形を描画するには、まず「なでしこ貯蔵庫」にアクセスしたら、画面右上にある「新規」ボタンを押してみましょう。そして、テキストエリアに、以下のようなプログラムを記述します。

カメ作成
90だけカメ右回転
55だけカメ進む
45だけカメ右回転
100だけカメ進む
135だけカメ右回転
200だけカメ進む
135だけカメ右回転
100だけカメ進む
90だけカメ右回転
100だけカメ進む
カメ非表示

そして、画面下部にある「実行」ボタンを押します。すると、上記の図形を描画します。

• 

  エディタにプログラムを書き込んで実行ボタンを押したところ

なお、カメが邪魔なので、プログラムの最後に「カメ非表示」と書き加えました。すると、図形だけが表示されます。

ところで、なでしこ貯蔵庫のエディタの「実行」ボタンの右端の方を見ると「キャンバス」の設定項目があります。この部分を、幅「500」×高「500」などに設定すると、描画画面を広げることができます。

• 

  キャンバスのサイズを指定すると大きな画像を描画できる

「N回…ここまで」を使った一筆書きクイズ

せっかく、なでしこで図形を描画するので、「N回…ここまで」の制御構文を使うことで、繰り返しを手軽に記述できます。N回の使い方は次のようなものです。

3回
　　「こんにちは」と表示
ここまで。

すると、次のように、3回「こんにちは」と表示されます。つまり、「3回」から「ここまで」の間に繰り返したい内容を記述します。

• 

  3回「こんにちは」と表示するプログラム

このように、処理を繰り返す方法を覚えると、途端に図形の描画が楽しくなります。それでは、指定回数の繰り返しの方法が分かったところで、一筆書きクイズに挑戦してみましょう。

次の画像のような、8個の四角形を描画するにはどうしたら良いか考えてみましょう。

• 

  4角形×8個の図形を描画してみよう

上記の図形を描画するためには、下記のようなプログラムを書くことができます。先ほどと同じように、貯蔵庫にプログラムを書き込んで「実行」ボタンを押してみましょう。

カメ作成
8回
　　4回
　　　　90だけカメ右回転
　　　　100だけカメ進む
　　ここまで
　　45だけカメ右回転
ここまで
カメ非表示。

円を使った一筆書きクイズ

なでしこのタートルグラフィックスには円を描画する機能は用意していません。と言うのも、円を描くには、90角形のように、カメを小さな角度で少しずつ右回転させて進めることで擬似的な円を描画できるからです。

以下のプログラムは、90角形を描くプログラムですが、描画したものを見ると円に見えるのではないでしょうか。なお、複雑な図形を描画してもらうと思うと、カメの歩みが遅く感じることでしょう。その場合には、プログラムに「1にカメ速度設定」と書いてください。

カメ作成
1にカメ速度設定
90回
　　4だけカメ右回転
　　5だけカメ進む
ここまで
カメ非表示。

• 

  90角形を描くと、それだけで円に見える

それでは、円を使ったクイズです。以下のような図形を描画するにはどうしたら良いでしょうか。

• 

  四角が4つ円が4つの図形

クイズの答えを見てみましょう。描画の手順ですが、最初に四角形を4つ描画した上で、次に円を4つ描画すれば良いのでした。

カメ作成
1にカメ速度設定
# --- 四角形を4つ描画 ---
4回
　　4回
　　　　100だけカメ進む
　　　　90だけカメ右回転
　　ここまで
　　90だけカメ右回転
ここまで
# ---円を4つ描画 ---
4回
　　32回
　　　　(360÷32)だけカメ右回転
　　　　10だけカメ進む
　　ここまで
　　90だけカメ右回転
ここまで
カメ非表示。

星形の図形を4つ組み合わせた図形

次に、星形の図形を4つ組み合わせた図形を描画してみましょう。なお、画面をはみ出してしまう場合には「[100,200]へカメ起点移動」のように書くことで、描画の始点が変更できます。

• 

  星形の図形を4つ組み合わせた図形

90度の2辺を持つ直角を描き、さらに45度回転させながら、8回繰り返すことで星形が描画できます。図形を描画するプログラムが以下の通りです。

カメ作成
1にカメ速度設定
[100,200]へカメ起点移動
4回
　　8回
　　　　2回
　　　　　　90だけカメ右回転
　　　　　　90だけカメ進む
　　　　ここまで
　　　　45だけカメ右回転
　　ここまで
　　100だけカメ進む
　　90だけカメ右回転
ここまで
カメ非表示。

なお、ちょっとパラメーターを修正するだけで、以下のように不思議な模様になります。

• 

  星形の図形を少し修正したもの

なお、キャンバスのサイズを330以上に変更してから実行してみましょう。

カメ作成
1にカメ速度設定
[100,230]へカメ起点移動
4回
　　8回
　　　　2回
　　　　　　90だけカメ右回転
　　　　　　90だけカメ進む
　　　　ここまで
　　　　45だけカメ右回転
　　ここまで
　　127だけカメ進む
　　90だけカメ右回転
ここまで
カメ非表示。

四つ葉の植物模様を持つ図形

それでは、もう少し高度な図形を描画してみましょう。四つ葉の植物を4つ並べた図形です。次の図形はどうやって描いたら良いのか考えてみてください。

• 

  四つ葉の植物模様を描いたところ

図形を描くためのヒントですが、繰り返し半円を描いて90度回転させることです。以下は描画途中の画像です。参考になるでしょうか。

• 

  四つ葉の模様を描くヒント

模様を描画するプログラムは次の通りです。図形は複雑に見えますが意外にもシンプルなプログラムです。

カメ作成
1にカメ速度設定
4回
　　4回
　　　　18回
　　　　　　10だけカメ進む
　　　　　　(180÷18)だけカメ右回転
　　　　ここまで
　　　　90だけカメ右回転
　　ここまで。
　　90だけカメ右回転。
ここまで
カメ非表示。

一筆書きのための描画ツールを作ってみよう

ここまでの部分で一筆書きのクイズを紹介しました。しかし、プログラムで一筆書きをするのではなく、マウスで直感的に一筆書きがしたいと思った人もいるかもしれません。安心してください！なでしこを使えば、手軽に描画ツールを作成できます。

次の画像のツールは、一筆書きで絵を描画するプログラムです。ブラウザ上で動かすことができます。50行程度のプログラムで作られています。こちらから動かすことができます。

• 

  一筆書きアートのためのツールも作ってみた

まとめ

以上、今回はなでしこのタートルグラフィックスの機能を使って、いろいろな図形を「一筆書き」してみました。ここで紹介したように、基本的な命令を3つと制御構文の「N回」を覚えるだけでも、それなりに高度な図形を描画できるようになります。角度や回数を少し変えるだけでもオリジナルの模様が作成できるので、ぜひ挑戦してみると良いでしょう。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。