完成した正三角形描画プログラムをもとに、多角形が描画できるようにアップデートしていきましょう。
正三角形描画プログラムをもとに多角形描画プログラムを作成していきます。
| １．正方形（正四角形）を描画する | ||
| ●正方形（正四角形）の定義を正しく理解できているか 正四角形：四つの辺の長さが等しく、内角が全部直角の図形 思考手順：線（辺）は何本必要なのか？スプライトを何度回す必要があるのか？ ●ここに気づくことができるか １．「○回繰り返す」の○回が、「辺の数」を表していること ２．描きたい図形は、スプライトを何°回転させればいいか（正方形は、90°） ３．「○回繰り返す」で、○°回転することでスプライトが最初の位置と向きなること |
||
| １．3辺なので、3回描画を繰り返す ２．180°- 1つの内角 |
１．4辺なので、4回描画処理を繰り返す ２．直角なので、[90度回す]に修正する |
|
| ２．正五角形を描画する | ||
| ●ここに気づくことができるか １．これまで、正三角形や正四角形の定義はわかっても正五角形はわからない ２．スプライトは、結局１回転（360°）しながら正三角形や正四角形を描いていた ３．正三角形なら、120°× 3回 = 360°、正四角形なら、90°× 4回 = 360°に気づけるか ４．これを応用して、正五角形はどのように計算するか |
||
| １．3回描画処理を繰り返す ２．360°÷ 3 = 120°回す |
１．4回描画処理を繰り返す ２．360°÷ 4 = 90°回す |
１．5回描画処理を繰り返す ２．360°÷ 5 = 72°回す |
| 図形描画プログラミングの準備 | ||
| いきなり描画すると思考が追い付かない児童も出てくるかもしれません。直線の場合は問題ないかと思いますが、スプライト（猫）が回転する角度と言われてもピンとこない場合は、図形描画の準備として以下のような工程を入れてみるのもいいかもしれません。 |
||
| プログラミング的思考を深めるためポイント | ||
| 多角形の「１つの内角」「辺の数」「回す角度」などを整理する、多角形の定義表を作成し、その表をもとにプログラミングを実施しながら、表を完成させるなどの実施方法が考えられます。 上述の例では、正三角形を最初に作図しましたが、正方形から実施すると、回す角度を正多角形の内角の大きさと捉えてしまい、正三角形ではうまくいかず、ここで多くの児童が失敗を経験すると予想されます。その失敗からどのようにすればいいかを考えることになります。 また、多角形を手書きで作図するのは、正確性に欠き、時間もかかり、非常に難しいことを体感してからプログラミングを実施することでコンピュータの便利さを体感できます。一部の数字を変えるだけで、一瞬にして描くことができます。しかも、何度でも正確に描けます。 これを人間がやることを想像すると、コンピュータの「処理能力」の凄さを体感できるのではないかと思います。 |
||
| 垂直思考（応用として、他に「処理や条件」がないか考えてみる） | ||
| ・長方形を描く場合は、どのようなプログラムになるか？ ・一筆書きの五芒星を描く場合は、どのようなプログラムになるか？ ・描いた後、スプライトを図形から遠ざけて図形を見やすくするには？ ・１辺１辺の線の色を変えるにはどうすればいいのか？ などなど |
||
| ３．入力値をもとに多角形を描画する | |
| [調べる]カテゴリ |
ここに入力された数字は、[答え]ブロックの中に入ります。これを利用して、入力された値でどの多角形でも描けるようにするにはどうすればいいでしょうか？ |
| 「何角形にする？」と聞いているので、入力される値は、正三角形なら「3」、正五角形なら「5」と入力されます。この値は、これまで作成したプログラムのどの部分に対応しているか考えます。 ●ここに気づくことができるか １．入力値は、プログラムの繰り返し回数に対応していることに気づけるか ２．[答え]ブロックの形状から、繰り返しの○回に埋め込めることに気づけるか ３．今のままでは、[○度回す]ブロックは、[答え]の値によって対応することができない（固定値のまま） ４．[○度回す]の角度は、どのように計算されたのか思い出せるか |
|
| [演算]カテゴリ |
正三角形なら、360°÷ 3回 = 120° 正四角形なら、360°÷ 4回 = 90° であるなら、 何角形にするかは[答え]ブロックに入り、またそれが繰り返し回数に対応しているので、左図のブロックに「360/[答え]」とすることで、何度スプライトを回すのかが算出されます。 これを[○度回す]ブロックにそのまま埋め込むことで、課題が解決できます。 |
| このプログラムだと多角形を描くのに毎回関数（描画処理）の数字を変更する必要がありません。また、これまで描けていた、正三角形、正四角形、正五角形がこのプログラムでも正しく描けるか、テスト（検証）することを心掛けましょう。 |
|
| ４．デバッグ処理 | |
| 入力値を「7」「8」「9」…と増やしていくと左図のようにステージの端にぶつかり正確な多角形を描画することができません。原因を考えてみましょう。ぶつからない方法はないでしょうか？ ●考えられる原因 １．描画開始の位置 ２．線が長く図形が大きすぎる スプライトの位置は「初期化」で、線の長さは「描画処理」で行われています。 |
|
| 「初期化」の修正 |
「描画処理」の修正 |
| ただ、この修正でも入力値「20」くらいが限度になります。「○歩動かす」の値を小さくすれば、入力値が3や4では非常に小さく描かれます。逆に「○歩動かす」の値を大きくすれば、入力値が100や200では、やはり端にぶつかってしまいます。そこで、次の入力値制御を行います。 |
|
| ５．入力値を制御する（入力値チェック） | |
| 入力値の制御には、条件分岐ブロックを利用し、メインプログラムを修正していきます。入力可能範囲を「3以上20以下」に設定し、その排他条件を条件分岐ブロックの条件に設定します。 ブロックで表現すると ・[答え] > 20 … 20を超える場合、メッセージ表示 ・[答え] < 3 … 3未満の場合は、メッセージ表示 これを、OR条件でつなげます。 |
|
| こちらの設定でも同じですので、両方の組み立てができるかどうか、課題として与えてもいいかもしれません。 ブロックで表現すると ・[答え] > 2 … 2以上の場合は、描画処理を実行 ・[答え] < 21 … 21未満の場合は、描画処理を実行 これを、AND条件でつなげます。 ※どちらの条件も入力値が文字や全角の場合、メッセージを表示します。 |
|
| 【重要】 入力値制御を組み込んだ場合は、必ずテストを行いましょう。OR,AND条件ともに、「21」と「2」を入力し、メッセージが表示されるか。「3～20」を入力し、描画処理が実行されるか、必ず、すべてのルートを通すテストを実施します。 |
|
| ■ 完成したプログラム |
|
| ６．円を描く |
| ①円の描画用に、入力やチェック処理を外して実行します。 円を描画するには、繰り返し回数や歩数、回す角度はどのようにすればいいでしょうか？考えてみましょう。 |
| ②次に、完成した図は円のように見えますが、正しくは「正三百六十角形」です。 プログラムでは[1度回る]とありますので、１度ずつカクカクと回りながら描いています。 |
| ③検証してみましょう。 直径１とする ・外接正三百六十角形の外周の長さを計算すると、約3.14167 ・内接正三百六十角形の外周の長さを計算すると、約3.14155 ・円周率は、約3.14159 3.14167（外接） > 3.14159（円周率） > 3.14155（内接） となり、非常に「円」に近いことがわかります。ただここで、コンピューターは真円を描くことができるのか、コンパスで描いた円は真円なのか、という疑問がわきます。 |
▼続きはこちら
前掲のレジ精算のプログラムに対して、条件を追加したフローチャートを完成させましょう。 【課題】あなたは、スーパーで買い物をする。それをセルフではなく、 レジ係のいるレジで精算する。 【条件】ただし、割引対象の商品も […]
▼続きはこちら 前掲のレジ精算のプログラムに対して、条件を追加したフローチャートを完成させましょう。 【課題】あなたは、スーパーで買い物をする。それをセルフではなく、 レジ係のいるレジで精算する。 【条件】ただし、 […]
課題：あなたは各駅停車の電車に乗って、目的地Ａ駅で降りる。 【指導１】前提条件として、『あなたと電車の動作をそれぞれ分けて描くこと。電車に乗ったところから スタートする。ただし、乗り換えはなく、Ａ駅は終点ではない […]
課題：あなたは路線バスに乗って、目的地Ａ停留所で降りる。 【指導１】前提条件として『あなたと路線バスの動作をそれぞれに分けて描くこと。路線バスに乗るところからスタートする。ただし、運賃は乗車時に支払い、乗り換えはなく、Ａ […]
救命措置の流れ（AEDの使用と心肺蘇生） 次は、アンプラグド・プログラミングの題材にふさわしい「救命措置の流れ（AEDの使用と心肺蘇生）」です。順番が違った、やるべきことが抜けた、判断を間違えた場合、救える命も救えなくな […]
課題：あなたは横断歩道を“安全に”渡ります。 これまで、アンプラグド・プログラミングの課題の問題点を解消すべく、レーンやステップを組み合わせたフローチャートの描き方を述べてきましたが、次は、交差点の横断歩道を“安全”に渡 […]