見出し画像

ARプログラミング入門 ⑥タートルグラフィックスで図形を描こう！

creativival

子供の頃に、床にチョークで線を描いて遊んだ記憶はありませんか？

線を描きながら、自由な発想で絵や模様を描いていくのは、とても楽しい体験です。

Voxelamming（ボクセラミング）では、タートルグラフィックスという方法を使って、同じように線を描いていくことができます。

タートルグラフィックスでは、タートルと呼ばれる仮想的なロボットを動かし、その軌跡に線を描くことで、様々な図形や模様を作成します。前進、後進、右折、左折など、まるで自動車を運転するようにタートルを制御できるので、幼稚園児を含めた子供でも直感的に理解することができます。

今回は、タートルグラフィックスの基本的な使い方を学び、Voxelammingで美しい幾何学模様を描いてみましょう！

まるでAR空間に絵を描くように、Voxelammingの世界を自由に彩ってみましょう！🎨

読み始める前に
この記事では、私たちが開発した無料ARプログラミング学習アプリ「Voxelamming（ボクセラミング）」の使い方を、Pythonを使ったサンプルコードと共に詳しく解説していきます。

iPhone/iPad/Vision Proをお持ちの方は、App StoreからVoxelammingアプリをダウンロードして、ぜひ一緒にプログラミングに挑戦してみましょう！

この記事は、連載第1回目の内容を理解し、Pythonのインストール、voxelammingパッケージのインストール、そしてVS Code（または別のIDE）の設定が完了していることを前提としています。


前回の復習と今回の目標

図1 前回作成したノードアニメーションの作例

前回は、Voxelammingでアニメーションを作成する方法を学び、AR空間に動きを与えるテクニックを習得しました。

ノードアニメーションとグローバルアニメーションを使い分けることで、Voxelammingの世界をより豊かに表現できることを実感できたのではないでしょうか？

今回は、タートルグラフィックスを使って、Voxelammingで図形や模様を描く方法を学びます。

タートルグラフィックスでは、タートルと呼ばれる仮想的なロボットを、前進、後進、右折、左折といった命令で動かし、その軌跡に線を描くことで、様々な図形や模様を作成します。

まるで、AR空間にペンで絵を描くように、Voxelammingの世界を自由に表現できる、とても楽しいプログラミング手法です。

今回の目標は、タートルグラフィックスの基本的な使い方を理解し、Voxelammingで美しい幾何学模様を作成することです。

さあ、タートルと一緒に、AR空間でのアート制作を楽しみましょう！🐢🎨

今回使うPythonの知識

タートルグラフィックス：亀と一緒にAR空間にお絵描き！

タートルグラフィックスは、画面上に仮想的なタートル（亀）を置き、そのタートルを動かしながら軌跡に線を描くことで、様々な図形や模様を作成するプログラミングの手法です。

タートルは、前進、後進、右折、左折といった命令で操作することができます。
まるで、小さなロボットをラジコンで操縦しているようなイメージです。

タートルグラフィックスの基本的な命令

| 命令        | 説明                                                             |
| :----------- | :--------------------------------------------------------------- |
| `forward(n)` | タートルを現在の向きにn歩前進させ、軌跡に線を描きます。           |
| `backward(n)`| タートルを現在の向きにn歩後退させ、軌跡に線を描きます。           |
| `right(d)`   | タートルを右にd度回転させます。                               |
| `left(d)`    | タートルを左にd度回転させます。                               |
| `pen_up()`  | ペンを持ち上げます。この状態では、タートルが移動しても線は描画されません。 |
| `pen_down()`| ペンを下ろします。この状態では、タートルが移動すると軌跡に線を描画します。 |
| `set_color(r, g, b, alpha)` | ペンの色を設定します。                           |
| `reset()`    | タートルの位置と向きを初期状態に戻します。                       |

for文と組み合わせて複雑な図形を描く

タートルグラフィックスの命令は、for文などの繰り返し構文と組み合わせることで、複雑な図形や模様を描くことができます。

例えば、正方形を描くプログラムは、以下のように記述できます。

for _ in range(4):
    t.forward(100)  # 100歩前進
    t.right(90)     # 右に90度回転

実行結果は次のとおりです。

図2 タートルグラフィックスの実行結果

for文とenumerate関数との組み合わせ

Pythonの for 文では、enumerate 関数を使うことで、リストの要素とインデックスを同時に取得することができます。

enumerate(array) は、リストの各要素とインデックスをペアにしたタプルを生成します。

colors = ["赤", "緑", "青"]

for i, color in enumerate(colors):
    print(i, color)

このコードを実行すると、以下のように出力されます。

0 赤
1 緑
2 青

enumerate 関数を使うことで、リストの要素とインデックスを同時に処理したい場合に、コードを簡潔に記述することができます。

まとめ

今回は、タートルグラフィックスの基本的な使い方と、for 文で enumerate 関数を使う方法を解説しました。

タートルグラフィックスは、視覚的にプログラミングを理解するのに最適なツールです。
ぜひ、この章で学んだ知識を活かして、Voxelammingで様々な図形や模様を描いてみましょう！

サンプルコード解説

球形の鳥籠を作る

今回のサンプルコードでは、タートルグラフィックスを使って、球形の鳥籠を作成します。VS Codeで「turtle_cage.py」という名前のPythonファイルを作成して、次のコードを記述してください。

# voxelammingパッケージからVoxelammingクラスとTurtleクラスをインポートします
from voxelamming import Voxelamming, Turtle

# Voxelammingアプリに表示されている部屋名を指定してください
room_name = "1000"
# Voxelammingクラスのインスタンスを生成します
vox = Voxelamming(room_name)
# ボクセルの設定を行います
vox.set_box_size(0.3)
vox.set_build_interval(0.01)
vox.set_command("liteRender")  # 描画を軽くするためのコマンド

# ボクセルを配置するため、位置と色を設定します
t = Turtle(vox)

# 線の色のリスト
colors = [
    [0, 0, 0, 1],
    [1, 0, 0, 1],
    [0, 1, 0, 1],
    [0, 0, 1, 1],
    [1, 1, 0, 1],
    [0, 1, 1, 1],
    [1, 0, 1, 1],
    [1, 1, 1, 1],
    [0.5, 0, 0, 1],
    [0, 0.5, 0, 1],
    [0, 0, 0.5, 1],
    [0.5, 0.5, 0, 1],
    [0, 0.5, 0.5, 1],
    [0.5, 0, 0.5, 1],
    [0.5, 0.5, 0.5, 1],
]

# 色を変えながら鳥籠を描画します
for i, color in enumerate(colors):
    # 水平の角度
    polar_phi = i * 180 / len(colors)
    # タートルをリセット
    t.reset()
    # タートルの位置を設定
    t.set_color(*color)
    # タートルの水平角度を設定
    t.left(polar_phi)

    # タートルで大きな円を描画
    for _ in range(60):
        t.forward(4)
        t.up(6)

# ボクセルデータをアプリに送信します。
vox.send_data("turtle_cage")

上記のコードは、Voxelammingパッケージのバージョン0.3.0以降で有効です。それ以前のバージョンをインストール済みの方は「pip install --upgrade voxelamming」コマンドでアップデートを行なってください。

コード解説 パート1：準備

最初の数行を見てみましょう。

from voxelamming import Voxelamming, Turtle

# Voxelammingアプリに表示されている部屋名を指定してください
room_name = "1000"
# Voxelammingクラスのインスタンスを生成します
vox = Voxelamming(room_name)
# ボクセルの設定を行います
vox.set_box_size(0.3)
vox.set_build_interval(0.01)
vox.set_command('liteRender')  # 描画を軽くするためのコマンド

# ボクセルを配置するため、位置と色を設定します
t = Turtle(vox)

# 線の色のリスト
colors = [
    # 省略...
]

  • 1行目では、voxelammingパッケージから、ボクセルの配置を行う Voxelamming クラスと、タートルグラフィックスを扱う Turtle クラスをインポートしています。

  • 3行目では、Voxelammingアプリに表示されているルーム名を変数 room_name に代入しています。

  • 5行目では、Voxelammingクラスのインスタンスを生成し、変数 vox に代入しています。

  • 7行目から9行目では、ボクセルのサイズ、配置間隔、レンダリングモードを設定しています。liteRenderコマンドは、描画を軽くしてデバイスの負荷を下げるモードで、設置するボクセル数が多いときに使用します。

  • 11行目では、Turtle クラスのインスタンスを生成し、変数 t に代入しています。Turtle クラスのコンストラクタには、vox インスタンスを渡す必要があります。

  • 13行目から28行目では、線の色を指定する colors リストを定義しています。 colors リストは、RGBA値を表す数値のリストを要素として持つ、多重リストになっています。

コード解説 パート2：タートルグラフィックスで鳥籠を描く

図3 タートルの軌跡（4歩進み6度上向き回転を繰り返す）

次に、タートルグラフィックスを使って鳥籠を描く部分を見ていきましょう。図3は、鳥籠の制作途中の画像で、「4歩進んで、6度上向き回転」を15回繰り返した状態です。このプロセスを60回繰り返すと、円が完成します。

for i, color in enumerate(colors):
    # 水平の角度
    polar_phi = i * 180 / len(colors)
    # タートルをリセット
    t.reset()
    # タートルの位置を設定
    t.set_color(*color)
    # タートルの水平角度を設定
    t.left(polar_phi)

    # タートルで大きな円を描画
    for _ in range(60):
        t.forward(4)
        t.up(6)

このコードでは、colors リストの各色を使って、タートルを動かしながら線を描画しています。

  • for i, color in enumerate(colors):: enumerate 関数を使って、colors リストの要素とインデックスを同時に取得しています。

  • polar_phi = i * 180 / len(colors): タートルが描く線の水平方向の角度を計算しています。 i が変化するごとに、角度が少しずつずれていきます。

  • t.reset(): タートルの位置と向きを初期状態に戻します。

  • t.set_color(*color): colors リストから取得した色を、タートルの色に設定します。 * を使うことで、リストの要素を展開して、set_color メソッドの引数として渡しています。

  • t.left(polar_phi): タートルを polar_phi で計算された角度だけ左に回転させます。

  • for _ in range(60):: 60回ループを繰り返します。

  • t.forward(4): タートルを4歩前進させます。

  • t.up(6): タートルを6度、上向きに角度を回転します。

このループを繰り返すことで、タートルは螺旋状に上昇しながら、大きな円を描いていきます。

タートルグラフィックスのコマンドの違い
Voxelammingのタートルグラフィックスは、Pythonのタートルグラフィックスを参考にしていますが、up コマンドと down コマンドの動作が異なります。

Pythonでは、 up コマンドは pen_up() の略で、ペンを持ち上げて線を描画しない状態にする命令です。
逆に、down コマンドは pen_down() の略で、ペンを下ろして線を描画する状態にする命令です。

一方、Voxelammingでは、up(angle) コマンドは、タートルの向きを上方向に angle 度回転させる 命令です。
同様に、down(angle) コマンドは、タートルの向きを下方向に angle 度回転させる 命令です。

つまり、Voxelammingの up / down コマンドは、タートルの移動方向を制御する ために使用されます。この違いは、Pythonバージョンが2次元の動きをするのに対して、Voxelammingバージョンは3次元の動きをするために生じています。

コード解説 パート3：ボクセルデータの送信

最後に、以下のコードで、作成したボクセルデータをVoxelammingアプリに送信します。

# ボクセルデータをアプリに送信します。
vox.send_data("turtle_cage")

  • vox.send_data("turtle_cage"): 作成したボクセルデータを "turtle_cage" という名前でVoxelammingアプリに送信します。

この章では、タートルグラフィックスを使って、球形の鳥籠を作成するコードを解説しました。

次の章では、実際にこのコードを実行して、AR空間に鳥籠を出現させてみましょう！

サンプルコードを実行する

それでは、いよいよサンプルコードを実行して、AR空間に休憩の鳥籠を出現させてみましょう！

1. ルーム名を確認

まず、Voxelammingアプリを起動し、画面中央に表示されているルーム名を確認してください。

2. ルーム名をコードに反映

サンプルコードの room_name 変数の値を、アプリに表示されているルーム名に書き換えます。書き換え後、保存するのを忘れないようにしてください。

room_name = "XXXX" # XXXXをアプリのルーム名に書き換える

3. コードを実行

VS Codeでターミナルを開き、次のコマンドを実行します。

ターミナルからコマンドを実行する

python turtle_cage.py
図4 球形の鳥籠

プログラムが正常に実行されると、Voxelammingアプリ上に、ランダムな色と方向を持つ円で作られた鳥籠が完成します。タートルが動きながら、線を描いていく様子も確認できます。

タートルグラフィックスのメリット

タートルグラフィックスを使うと、複雑な図形も、比較的簡単に描くことができます。

例えば、今回の鳥籠のような形を、通常の方法でプログラムしようとすると、三角関数や角度の計算など、複雑な処理が必要になります。

しかし、タートルグラフィックスでは、「4歩進んで、6度上向きに回転」のように、タートルの動きを直接指定するだけで、同じ形を描くことができます。

タートルグラフィックスのデメリット

一方で、タートルグラフィックスは、正確なサイズの図形を描くのには向いていません。

例えば、今回の鳥籠の直径を正確に指定することはできません。

鳥籠の円の大きさを計算してみよう

鳥籠を作る円の大きさを知りたい方のために、三角関数を使って計算してみましょう。

図5 円の大きさを計算で求める

鳥籠の円の大きさは、数学計算で求めることができます。図5は、計算のために書いた円の図です（正確な尺度ではありません）。

タートルは、AB,BCと4歩ずつ進みます。角度DBEは6度です。したがって、BFは2歩、角度BOFは3度と計算できます。次の式より、求める長さOB（円の半径）は、38.2146452….歩となります。

$${OB = \frac{BF}{sin(△BOF)} = \frac{2}{sin(3°)}}$$

まとめ

このように、タートルグラフィックスにはメリットとデメリットがあります。

複雑な図形を簡単に描きたい場合はタートルグラフィックスが便利ですが、正確なサイズが求められる場合は、通常の方法でプログラムする必要があるでしょう。

実行できないときは

もし、うまく線が描画されない場合は、以下の点を確認してみてください。

  • Voxelammingアプリとパソコンが同じWi-Fiネットワークに接続されているか

  • サンプルコードの room_name 変数の値が、アプリに表示されているルーム名と一致しているか

  • 回線が混み合っている場合は、時間をおいてから再度、コマンドを実行してください。

次の章では、応用として、今回作成した球体を改造して、オリジナル作品作りに挑戦してみましょう！

応用：オリジナル作品作りに挑戦！

問題1: 色鮮やかな螺旋を描こう！

複数の色を使って、美しい螺旋を描いてみましょう。

挑戦する前に

自分で考えてコードを書いてみると、プログラミングの理解がより深まります。時間がない方は、回答例を参考にしてください。

回答例

VS Codeで「turtle_spiral.py」という名前のファイルを作成し、以下のコードを記述してください。

# voxelammingパッケージからVoxelammingクラスとTurtleクラスをインポートします
from voxelamming import Voxelamming, Turtle

# Voxelammingアプリに表示されている部屋名を指定してください
room_name = "1000"
# Voxelammingクラスのインスタンスを生成します
vox = Voxelamming(room_name)
# ボクセルの設定を行います
vox.set_box_size(0.3)
vox.set_build_interval(0.001)
vox.set_command('liteRender')  # 描画を軽くするためのコマンド

# ボクセルを配置するため、位置と色を設定します
t = Turtle(vox)

# 線の色のリスト
colors = [
    [0, 0, 0, 1],
    [1, 0, 0, 1],
    [0, 1, 0, 1],
    [0, 0, 1, 1],
    [1, 1, 0, 1],
    [0, 1, 1, 1],
    [1, 0, 1, 1]
]

# 色を変えながら螺旋を描画します
for i, color in enumerate(colors):
    t.reset()
    t.set_color(*color)
    t.set_pos(i, 0, 0)
    t.up(4)

    for _ in range(360):
        t.forward(3)
        t.left(6)

# ボクセルデータをアプリに送信します。
vox.send_data("turtle_spiral")

解説

このコードでは、colors リストに定義された7色の線を使って、それぞれ螺旋を描画しています。

  • vox.set_command('liteRender'): ボクセルの描画を軽くするためのコマンドです。
    複雑な図形を描画する際に、処理が重くなるのを防ぐために使用します。

  • for i, color in enumerate(colors):: colors リストの各色とインデックスを使ってループを繰り返します。

  • t.reset(): ループごとにタートルの状態をリセットします。

  • t.set_color(*color): タートルの色を設定します。

  • t.set_pos(i, 0, 0): タートルの初期位置を、x座標を i だけずらした位置に設定します。
    これにより、7つの螺旋が横に並んで描画されます。

  • t.up(4): タートルを初期状態で少し上方向に移動させています。

  • for _ in range(360):: 360回ループを繰り返すことで、螺旋を描画します。

  • t.forward(3): タートルを3歩前進させます。

  • t.left(6): タートルを6度左に回転させます。

このプログラムを実行すると、カラフルな螺旋を描くことができます。螺旋のような単純な形状もタートルグラフィックスで簡単に描けることがわかりました。

図6 カラフルな螺旋

挑戦してみよう！

  • 螺旋の色や数を変更してみましょう。

  • forward や left の値を変更して、螺旋の形を変えてみましょう。

  • up や down を使って、螺旋を立体的にしてみましょう。

問題2: 立体の星形を描いてみよう！

タートルグラフィックスを使って、今度は少し複雑な、立体の星形を描いてみましょう。

回答例

VS Codeで「turtle_stars.py」という名前のファイルを作成し、以下のコードを記述してください。

from voxelamming import Voxelamming, Turtle

# Voxelammingアプリに表示されている部屋名を指定してください
room_name = "1000"
# Voxelammingクラスのインスタンスを生成します
vox = Voxelamming(room_name)
# ボクセルの設定を行います
vox.set_box_size(0.3)
vox.set_build_interval(0.01)

# 辺の長さ
length = 60

# ボクセルを配置するため、位置と色を設定します
t = Turtle(vox)

# 星形を回転させながら描画
for i in range(6):  # 60度ずつ回転
    t.reset()
    # タートルの色を設定します
    t.set_color(1, 1, 0, 1)  # 黄色
    t.left(i * 30)  # 回転角度を設定
    t.set_pos(0, length, 0)  # タートルの位置を設定

    # 上の頂点より星を描画
    t.down(72)
    # 星形を描画
    for _ in range(5):
        t.forward(length)
        t.down(144)

# ボクセルデータをアプリに送信します。
vox.send_data("turtle_stars")

解説

このコードでは、まず外側の for ループで回転角度を制御しています。
ループ変数 i を使って、0度, 30度, 60度, ... と回転させていき、それぞれの角度で星形を描画しています。

  • t.reset(): 各回転角度でタートルの状態をリセットします。

  • t.left(i * 30): タートルを i * 30 度だけ左に回転させます。

  • t.set_pos(0, length, 0): タートルの初期位置をy軸の上方に設定します。

内側の for ループでは、星形を描画しています。
今回は、星形の上の頂点から描画を開始するために、t.down(72) でタートルの向きを調整しています。
その後、t.forward(length) で辺の長さ分前進し、t.down(144) で星形の次の頂点へ移動する角度だけ回転させる処理を繰り返します。

このプログラムを実行すると、Y軸回転による立体の星が現れます。このように、回転と描画を組み合わせることで、立体的でより複雑な図形を作り出すことができます。

図7 Y軸回転による立体的な星

挑戦してみよう！

  • 星形の色や大きさを変えてみよう

  • 星形の頂点の数を増やしてみよう

  • 回転角度や回数を調整して、さらに複雑な形に挑戦してみよう

タートルグラフィックスは、アイデア次第で様々な表現が可能です！

ぜひ、色々な図形や模様に挑戦して、Voxelammingの世界をもっと自由に彩ってみてください！

まとめ

今回は、タートルグラフィックスを使って、Voxelammingで図形や模様を描く方法を学びました。

  • タートルグラフィックスの基本的な命令を理解し、for 文と組み合わせることで、様々な図形を描けるようになりました。

  • enumerate 関数を使うことで、リストの要素とインデックスを同時に処理できることを学びました。

タートルグラフィックスは、視覚的にプログラミングを理解するのに最適なツールです。
今回のサンプルコードを参考に、ぜひ色々な図形や模様に挑戦して、Voxelammingの世界をもっと自由に表現してみてください！

次回は、Voxelammingで文字を表示する方法を学びます。

Voxelammingには、日本語と英語のフォントが用意されているので、好きな場所に文字を表示することができます。

AR空間に文字を表示することで、作品にメッセージを添えたり、タイトルをつけたり、さらに表現の幅を広げることが可能になります。

Voxelammingで、AR空間にあなただけのメッセージを刻んでみましょう！✨

AR プログラミング入門シリーズ

ARプログラミング入門シリーズの一覧です。全8回で完結します。
次回、中級編は構想中です。ご期待ください！

第1回　Voxelammingについて
第2回　ボクセルアートの色と形を変えてみよう！
第3回　球体を作る
第4回　ランダムな線でアートを描こう！
第5回　アニメーションで命を吹き込もう！
第6回　タートルグラフィックスで図形を描こう！
第7回　文字でAR空間にメッセージを描こう！
第8回　再帰関数でフラクタルに挑戦！

サンプルコードを公開

GitHubレポジトリでサンプルコードを公開しています。記事を読むときに参照してください。

ARプログラミング入門講座 サンプルコード

この記事が気に入ったらサポートをしてみませんか？