Scratchでコンピュータグラフィックス：円を描く

Scratchでコンピュータグラフィックス

・第1回
・第2回
・第3回

回転で円を描く

グラフィック機能を持ったプログラム言語、例えばMSX BASICでは直線以外に点・円・四角形・塗りつぶしのある図形などがPOINT・CIRCLEなどの命令文で描く事が出来ました。

ですが、Scratchにはそのような命令を行うブロックがありません。

Scratchでは直線的な座標の移動による描画は可能ですが曲線の様な形状はそのままでは描画できないのです。

では、出来なければ「工夫をしてみる」という方針で、何とかして「円の様な形状」を描いてみたいと思います。

角の多い「多角形」を考えてみる

多角形と言えば三角を始めとして頂点が増えていく角の多い図形ですね。

五角形とか六角形とか容易にイメージできると思いますが、例えば10角形とか20角形とかどんな形になるでしょうか？



因みに上の多角形は10角形です。
どうでしょう、円に近いように思いませんか？

という事は、移動しながら角度を変更して回転すれば多角形の描画が出来るという事になり、その角が多ければ円のように見えるという事が考えられます。

これであれば、今まで使ったブロックにちょっと付け足せば出来そうです。

では、やってみましょう。

回転する

Scratchの回転動作を指定するブロックは2つあります。



「動き」の中にあり、上が時計回り、下が反時計回りになります。
両方とも回転角度を指定すればキャラクタの進行方向が曲がって行きます。

円の一周は360度ですので10角形なら10分の1の36度を10回、20角形なら20分の1の18度を20回、キャラクタに回転を指定すれば出来そうです。

つまり、

・プログラムをスタート
・描画を開始（ペンの準備）
・繰り返し回数の指定
　・頂点から頂点の移動距離の指定
　・角度の変更
・繰り返しが終わったらプログラムを停止

...という順番を組めば良いのではないのでしょうか？

では、実際に組んでみましょう。

まず開始のイベントとペンの指定をします。



次に繰り返しの指定をします。
これは前回使いましたね。



繰り返しが終わればプログラムを停止しますので、上記のようにしておきます。
先ずは繰り返し回数を10回でやってみます。

では、次に移動を指定します。ここでは最初に使った「・・・歩動かす」を使いましょう。



これだと、30歩の移動を10回繰り返し300歩分の直線を描く事になります。

では、30歩ごとに進行方向の角度を変更しましょう。
先ほどの回転のブロックを挿入します。



今回は36度の時計回り回転を10回繰り返して360度の一回転になるように設定しました。

出来上がったら実行します。



10角形がちゃんと描けましたね。

では、数値を変えてみます。



繰り返し回数を20回、回転角度を半分の18度に変えました。



先ほどよりも大きな20角形が描けましたね。
移動距離が同じ30歩なので角度が小さい分、大周りになりました。

数値を変えると色々な形が考えられそうです、例えば最初の10角形と同じ大きさの20角形を描くならこう出来そうですね。





歩数を半分にすると、かなり円に近い形になりました。

繰り返し回数、移動歩数、回転角度の関係を変える事で、例えば、「大きな10角形」「半円」なども描けそうです。





どうすれば可能か、色々試してみてください。

Scratchでコンピュータグラフィックス・繰り返しと乱数

Scratchでコンピュータグラフィックス

・前回までの内容

　・第1回

　・第2回

繰り返しと乱数

昔話から始めますが、その昔、初めて買ったパソコンは国産機のMSX1パソコンでした。

MSXパソコンにはMSX BASICというプログラム言語が今でいうOSのような役割を持っており、パソコンを使うという事はBASIC言語を覚えるという事に他なりませんでした。

そんな時によく遊びでやっていたのが「POINT文で星空を描く」という単純なブログラムでした。

単純なのですが、乱数で描かれるドットが意外にもきれいで、更に毎回結果が異なるのも面白かったです。

Scratchにはドットを打つという構文は無いのですが、色々工夫して同じようなグラフィックを作ってみようと思います。

まず、以下のようにブロックを作ります。

新しいブロックとしては「スクリプト」の「制御」にある「・・・回繰り返す」です。

これは指定した回数その内側に入れ子になったブロックの内容を繰り返すというものです。

今回は500回繰り返した後、全てのプログラムを停止するように指定しました。

さらに繰り返しの中身を作っていきます。

いきなり今まで見たこともいないようなブロックがありますが、構造は簡単です。

先ず、前回使ったxとｙの座標を指定するブロックを繰り返しの内側にはめ込みます。

そして前回は座標として直接数字を入れていたのですが、今回は「スクリプト」の「演算」の項目から「・・・から・・・までの乱数」をそれぞれx,yの項目にはめ込みます。

これは、指定した範囲の乱数、ある意味不連続なでたらめな並びの数を発生させるブロックです。

今回はｘを-240～240に、ｙを-180～180にしています。

これはステージが中心から上下左右に増減して、端までの座標を範囲で示しているものです。

（例えば左上はx=-240,y=180となる訳です）

このスクリプトを実行するとキャラクタがステージ上の様々な位置に500回表示されて止まります。

キャラクタの位置を指定出来たら、描画の準備をします。

いつも通りペンを下して太さを指定しますが、ここにも新しいブロックを追加しています。

「ペンの色を・・・ずつ変える」です。

これは実行するたびにペンの色が変化していきます。値を大きくすると変化の幅が大きくなります。

では、描画をするブロックを追加します。

ここで変わっているのは、最初に使った「・・・歩動かす」の値を1にしているところです。

1歩動くとすると1ドットの点を描画してくれるのです。

ここまでの構造をおさらいすると、

・プログラム開始

・ある内容を500回繰り返す

　・内容はまず乱数でキャラクタの位置を指定する

　・描画の準備をしてペンを下す

　・1歩だけ動かして点を描く

　・ペンを上げて描画をやめる

・500回繰り返しが終われば全てを停止する

...という風になります。

では、最後にせっかくなので背景を黒にして夜空にしましょう。

中央の「スクリプト」のタブの隣にある「背景」をクリックすると、背景画像の描画になります。

左側の道具の中から「バケツ」を選んで、画面下側のカラーパレットから黒を選んでステージをクリックすると黒で塗りつぶされます。

これで背景色の指定が出来ました。

では、実行してみましょう。

目まぐるしくキャラクタが画面上を動き回り、その後に無数の色とりどりのドットが描かれるはずです。

今回は、座標を演算を繰り返す形で指定しました。

プログラムによる描画では様々な演算を用いて思いもよらない画像を作る事が出来るのです。

Scratchでコンピュータグラフィックス：四角を描く（座標を使う）

Scratchでコンピュータグラフィックス

・前回の内容

四角を描く（座標を使う）

前回、線を引くという事はできましたので、今回は図形を描いてみましょう。

描くのは単純な形状である四角形です。

このような形を描くためには何が必要でしょうか？

四角形を作っているのは4つの直線と4つの頂点ですね。

前回やったように線は「移動の軌跡」として描かれるので、敢えて指定してあげなければいけないのは「頂点の位置」になります。

今回は四角形の4つの頂点の「座標」を指定して描いてみましょう。

先ずはブロックを以下のように配置します。

新しいブロックは「動き」の「x座標を・・・にする」と「y座標を・・・にする」の二つです。

これは何をしているのかというと、プログラムを実行した際に、キャラクターを水平軸0の位置で垂直軸0の位置に移動させるという内容です。

算数のグラフで横・水平軸をX、縦・垂直軸をYとして「x=1,y=2」とか方眼紙で位置を取って折れ線グラフとか描いたのを覚えていますでしょうか？

という事はこれを実行するとx=0,y=0の「原点」にキャラクターを移動させる事ができます。

で、実際に動かしてみて分かると思いますが、キャラクタはステージの中央に表示されると思います。

Scratchでは原点の位置はステージの中央になります。

では次にペンの指定を行います。

先ずペンを下して描画状態にします。そしてペンの色を緑色にして、太さを目立つように10としてみました。これは前回のペンの操作と同じです。

更にこうつなげます。

スクリプトの「動き」から「x座標を・・・、y座標を・・・にする」を配置します。

これは先程のxとy座標を指定するブロックを一つにまとめたものです。（ですので、先程の記述にこれを使っても構いません）

するとこのようになります。

キャラクタが右の方に動いて線が描かれました。

y軸は0のままですがx軸は100増加しています。

この線はx=0からx=100の座標に水平に描かれた事になります。

更に続けます。

先程と同じブロックを追加してx座標を100、y座標を100に指定します。

実行するとこうなります。

キャラクタが垂直に上に移動しました。

直前のブロックでx=100になっていますので、水平位置100のまま動きません。

y=100に指定されましたので先程指定したy=0からy=100までの直線を描いた事になります。

更にこう続けます。

座標変更のブロックを二つ追加しました。

直前まででx=100,y=100の位置に移動していますので、3つ目のブロックでy軸はそのままでx軸を0に戻しています。という事はx=100からx=0の水平線が描かれる事になり、更に4つ目のブロックで最初の原点x=0,y=0に戻っていますので、y=100からy=0の垂直線が描かれます。

その後の処理は前回と同じです。

実行するとこうなります。

キャラクタが原点に戻り四角形が描かれました。

キャラクタをドラッグで少し移動させると最初の図のように四角形がちゃんとできているのが確認できるはずです。

このように形の頂点の座標の分だけブロックで水平・垂直軸を指定すれば色々な図形が描けるのが分かりますね。

色々試してみましょう。

更にここまでで分かる事にx軸に正の数を入れると原点より右に移動する、そしてy軸に正の数を入れると原点より上に移動するという事がありますね。

では、それぞれに「負の数」を入れるとどうなるでしょうか？

これも実際にやって確認してみてください。先程と反対の位置に四角が描かれるはずです。