"BOKU"のITな日常

62歳・文系システムエンジニアの”BOKU”は日々勉強を楽しんでます

Scratch(スクラッチ)入門(3)/ペンを使って正多角形を描いてみる

Scratch3.0でペンを使って、基本的な図形(正方形とか正五角形とか)を描くプログラムを作ってみます。

f:id:arakan_no_boku:20200824233948p:plain

 

はじめに

 

前回、Scratch(スクラッチ)の基本的な用語を整理しました。

arakan-pgm-ai.hatenablog.com

今回はその続きで正多角形を描く簡単なスクリプトを作ってみます。

用語の意味とかがわからない場合は、前回の記事を参照ください。

 

線を引いてみる=ペンの使い方

 

今回は、ペンを使います。

ペンはデフォルトのブロックパレットには表示されていません。

使うためには、左下の「拡張機能を追加する」ボタンで、一覧を表示して「ペン」を選び、ブロックパレットに表示させる必要があります。

f:id:arakan_no_boku:20200827164832p:plain

追加されたペンのブロックパレットは、こんな感じです。

f:id:arakan_no_boku:20200901232527p:plain

 

初期状態に戻すスクリプト

 

初期状態に戻せるスクリプトを最初に用意しておきます。

今回は、以下のようにします。

f:id:arakan_no_boku:20200901233353p:plain

ペンの色、太さを指定しています。

描かれているものは消す必要がありますので、「全部消す」も追加しています。

スプライトの最初の位置は「X座標が-50、Y座標が50」です。

スプライトの向きは「90度」・・つまり右向きです。

そして、描き終わった後に、スプライトを非表示にするつもりなので、それを、強制的に「表示する」も必要です。

これら一連のスクリプトは「緑の旗」が押されたら実行するようにします。 

 

まずベタなやり方で四角形を描く

 

じゃあ、図形を描いていきます。

ペンで線を引くときは「ペンを下す」にします。

線を引きたくないときは「ペンを上げる」にします。

動くきっかけは「イベント」から、Gaboくんをマウスでクリックする=「スプライトが押されたとき」を選びます。

まずは四角形。

すべての手順をベタにプログラムで記述してみます。

初期状態は、「X座標=-50」、「Y座標=50」の位置で右(90度)を向いた状態です。

そこから。

  1. 右に100進む。
  2. 下(180度)に向けて、100歩進む。
  3. 左(-90度)に向けて、100歩進む。
  4. 上(0度)に向けて、100歩進む。

みたいに順番に線を描き、最後にスプライト画像(Gaboくん)を非表示にすると四角形がかけるはずです。 

それを、そのままスクリプトにすると、以下のようになります。

f:id:arakan_no_boku:20200827181609p:plain

このスクリプトを動かした結果がこうです。

f:id:arakan_no_boku:20200827181817p:plain

いちおういけてます。

 

繰り返しを使って四角形を描く

 

上記の方法でも描けます。

でも、あまりにもベタです。

四角形以外を描こうと思ったら、毎回スクリプトを大幅に書き直さないといけません。

それではプログラムにする意味がない・・ということで・・見直します。

上記をよく見ると。

-90度は240度、0度は360度でもあります。

(240度と指定すると、自動的に-90度と解釈してくれます)

そう考えると、90度ずつ角度が加算されているということがわかります。

つまり。

  • 100進んで、90度右方向に回転する。

これを、4回繰り返せばよい・・という法則性が見えてきます。

その法則性を使って、繰り返しブロックを使って書き直したスクリプトが以下です。

f:id:arakan_no_boku:20200827182640p:plain

実行した結果は同じ。

f:id:arakan_no_boku:20200827181817p:plain

でも、繰り返しを使うメリットがあります。

それは、四角形以外を描くときのスクリプトの修正が少なくなることです。

 

繰り返し回数と角度を変えて正八角形を描く

 

上記の修正したスクリプトを使って、四角形以外・・例えば正八角形を描きます。

考え方としては、とてもシンプルです。

90度で4回繰り返すと四角形が描ける。

ならば、半分の45度にして8回繰り返せば、八角形がかけるだろう・・です。

つまり。

スクリプトの構成はそのままで、繰り返しの回数・角度の部分を書き換えるだけです。

f:id:arakan_no_boku:20200827183038p:plain

スクリプトを実行した結果は、以下の通りです。

f:id:arakan_no_boku:20200827183230p:plain

八角形ですね。

 

ほかにも色々遊んでみよう

 

上記の応用で、360度が割り切れるなら何角形でも描けるだろうなと想像がつきます。

例えば。

  • 六角形なら「60度で6回」
  • 五角形なら「72度で5回」
  • 九角形なら「40度で9回」
  • 十二角形なら「30度で12回」

などなど。

繰り返せばいいことになります。

例えば、六角形ならこんな感じ。

f:id:arakan_no_boku:20200827192242p:plain

なら。

f:id:arakan_no_boku:20200827192319p:plain

五角形だと。

f:id:arakan_no_boku:20200827192556p:plain

こんな感じ

f:id:arakan_no_boku:20200827192717p:plain

 

最後に正十二角形です。

f:id:arakan_no_boku:20200827213702p:plain

動かした結果です。

f:id:arakan_no_boku:20200906224338p:plain

いけてますね。

すごい当たり前なんですけど・・妙に楽しいです。

自分も学校の時に、こんな風に教えてもらうと授業も楽しくなったかもしれんな・・などと思ったりします。

 

最後に

 

プロジェクトを公開しておきました。

デフォルトだと正十二角形を書きます。

適当に角度や繰り返し回数などを書き換えて、やってみてください。

以下のリンクで表示します。

https://scratch.mit.edu/projects/423110893

 

f:id:arakan_no_boku:20200906225524p:plain

とはいえ。

これでもスクリプトを書き換えないといけない・・という点でイケてません(笑)。

変数を使って、実行後の画面で「角度」や「繰り返し回数」などを書き換えられるようにするべきです。

でも。

それは、次回にします。 

今回はこんなところで。

ではでは。