2016年6月2日木曜日

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軸に正の数を入れると原点より上に移動するという事がありますね。
では、それぞれに「負の数」を入れるとどうなるでしょうか?
これも実際にやって確認してみてください。先程と反対の位置に四角が描かれるはずです。


0 件のコメント:

コメントを投稿