StateGoと『なでしこ』でタートルグラフィックスを使って正N角形！

Advent用に記事を書いてみました。

[コードミックスビジュアルプログラミングStateGo]()で、[日本語プログラミング言語なでしこ](https://nadesi.com/top/)を使い、タートルグラフィックスに挑戦します^_^

# 題目

StateGoを使って『なでしこ』のタートルグラフィックスで正Ｎ角形を描きます。

# どうやって

キャンバスのトップ中央からスタートするとし、各パラメータを次のように定義します。

```
N  ... 分割数 ＝ N角形のN　
R  ... 半径
AO ... N角形の一辺と中心点が作る三角形の中心点側の角度
AR ... N角形の一辺と中心点が作る三角形の円周側の角度
KAME_SA ... カメの開始角度
KAME_MA ... カメの回転角度
KAME_ML ... カメの直進距離＝N角形の一辺の長さ
```
スタート時にカメの角度をKAME_SAに設定し、KAME_ML分の直進とKAME_MA分の回転をN回実行。

# ソース

StateGoで作成されています。
Githubのなでしこサンプルに格納されています。

[https://github.com/NNNIC/psgg-nadesiko-sample/v3/examples/04_TORTOISE](https://github.com/NNNIC/psgg-nadesiko-sample/tree/master/v3/examples/04_TORTOISE)

# 動作環境

Windows 10
[StateGo](https://statego.programanic.com/entry2.html) ※StateGoをインストールしてください

# 使い方

## 1. githubの[StateGoなでしこサンプル](https://github.com/NNNIC/psgg-nadesiko-sample)をクローン

## 2. v3/examples/04_TORTOISE/TestControl.psggを開く
 StateGoが起動し、下図のように表示されます。
 ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE-OPEN.png)

## 3. 【保存と変換ボタン】を押す
 ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE-CONV.png)
ステート図がソースコードに変換され、クリップボードにコピーされます。

 **もし、コピーされない場合は**ウインドウメニューの`その他`から`オプション`を選択し、`クリップボードへ出力する`に設定してください。
  ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE-OPT.png)

## 4. ブラウザで[なでしこ3簡易エディタ-タートルグラフィックス用](https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF-%E3%82%BF%E3%83%BC%E3%83%88%E3%83%AB%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9%E7%94%A8)を開きます。
  ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE-NADE.png)

## 5. テキストボックスにペースト
StateGoの変換でクリップボードにコピーされたテキストをなでしこ簡易エディタにペーストします。
  ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE-PASTE.png)

## 6. 実行
  ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE.gif)

# 解説

StateGoの画面に簡単な解説を追加しました。

![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE.png)

## プログラムの流れ

左上の[START]からプログラムが開始され、矢印にそって実行されます。
各ステートは、テンプレートを使い、ソースコードに展開されます。
なでしこの命令がそのまま書き込まれています。
![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/calc.png)

## 組込について

赤い太線で囲ったステートは、組込ステートと呼ばれます。
なでしこV3より変数スコープが導入されたため、ステート間で使用する変数はここで宣言します。
組込みの内容は、テンプレートが使われずにそのまま出力されます。
![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/embed.png)

## コメントについて

ここでは、なでしこ簡易エディタのリンクが設定されています。クリックでメニューを表示して、リンクに飛ぶで、簡易エディタを開くことができます。

## ループについて

ループはサブルーチンを条件を満たす間呼び出します。
ここでは、N回サブルーチンを呼び出します。

## サブルーチン

サブルーチンは、開始とリターン（サブルーチン）の間のステートを実行します。

# サンプル改変
## 分割数の変更
E_0000ステートの Nの設定を変更してみましょう.
### N=3の場合
  ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE-3.gif)

### N=10の場合
  ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE-10.gif)

## 0002ステートだけ実行
0002ステートは[マイナビの記事](https://news.mynavi.jp/article/nadeshiko-3/)からのコピーです。本タートルグラフィックスのプログラミング開始時に動作確認のため使用したものです。
この0002ステートだけを実行してみましょう。
(STARTから0002ステートへ矢印を伸ばして実行)
  ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE-0002.gif)

# もっと？

正三角形から正十角形まで描くサンプルを用意しました。Stategoの『なでしこ』サンプル内の `v3/examples/04_TORTOISE_2`　を同じく実行します。

## ステート図
  ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE-LOOP.png)

## 実行
  ![](https://raw.githubusercontent.com/NNNIC/psgg-nadesiko-sample/master/wiki/v3-example-04_TOTOISE_2.gif)