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軸に正の数を入れると原点より上に移動するという事がありますね。

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

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

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

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

最近何かと話題のプログラミングツール「Scratch」。

簡単に子供でもプログラムが出来るという事で注目され、現在では外部に接続したロボットなどのマイコンプログラムも出来るようになったりと話題ですが、今回はもっと簡単な内容で「Scratch」を用いた「アルゴリズムを用いたコンピュータグラフィックス」をレクチャーしてみたいと思います。

Scratchの画面（Ver.2）

Scratchは様々な命令が記述されたブロックを組み合わせるような形でプログラミングをするソフトです。

画面右側がプログラムを記述する部分ですが、色々な色のブロックを組み合わせたものがあります。これがプログラム構文です。

様々な命令文は中央に並んでおり、ここから必要な物を右へドラッグしてくっ付けて行きます。

プログラムの結果は左の猫のイラストのある画面で表示されます。

今回はこの猫のイラストにプログラムで様々な命令をして動かしてみたいと思います。

線を描く

実際に画面上に線を引くプログラムを書いてみましょう。

まずは中央の「スクリプト」のところで「イベント」の項目を項目をクリックします。

下に表示されたブロックの中から「緑の旗がクリックされたとき」をマウスでドラッグして右の枠内に置きます。

これは左側のキャラクターが置かれている画面（ステージと言います）の右上にある緑の旗のマークを押すと、これ以下に接続される命令を実行するという「イベント」を表します。

では、画面に絵を描きますので、「スクリプト」の「ペン」から「ペンを下す」というブロックをドラッグして先ほどのブロックの下にくっ付けます。

そうすると、旗のマークがクリックされると絵を描くためにペンを用意するという一連の動作がプログラムできました。

このように「AをすればBをする」というような関係性を構築して行くのです。

では、更にペンの設定、つまり「どのようなペンを使うのか」を指定して行きます。

「スクリプト」の「ペン」から更に以下のように追加します。

「ペンの色を・・・にする」は描画色を選ぶ事ができます。

間の四角の部分をクリックすると、マウスポインタの先にある色をクリックで取る事ができます。（今回は「スクリプト」の「その他」をクリックしました。）

「ペンの太さを・・・にする」はペン先の太さの設定ができます。

数字を変更すれば太くも細くもできます。

更にこのように続けます。

「スクリプト」から「動き」の項目の中の「・・・歩動かす」を追加します。

これは、線を引くとき手にペンを持って「動かす」ようにペン先を移動させてその軌跡を描画するために追加します。

このスクリプトは初期状態ではステージ上の猫のキャラクタに記述されていますので、実行すると猫が現在位置から10歩移動して、その後に線が描かれるという事になります。

最後に以下のように続けます。

「スクリプト」の「制御」の項から「すべてを止める」と指定します。

これで一連の動作を終了して、プログラムを停止する事ができます。

この時にプログラムは終了するのですが、キャラクタの位置は実行後のままですので、繰り返して緑の旗をクリックすると、どんどん右の方向へキャラクタが移動してその後に線が描画されるのが確認できるはずです。

このように「どのような手順で結果を導き出すのか」という事を何らかの形にしたものを「アルゴリズム」と言い、Scratchではブロックの重ね方でその「手順」を作成して行くのです。

近況色々

最近、日曜日の無料相談会を都合で中止したりしておりました。
今週は行います。5/29（日）の10：30～教室でお待ちしております。
教室の運営の詳細はホームページのスケジュールカレンダをご参照ください。

前回のブログアップ以降、だいぶ前に投稿したGIMPのトーンカーブの記事が段々と閲覧数が伸びて行き、現在は完全に逆転して参照ページのトップになっております。
不思議です。なぜにトーンカーブのみ、それも急速に。レベル補正なんかは全然反応ないのに。
何でしょうね、どこかの学校とかで「これ見とけ」とか。あるいはレポートかな？
以前個人でやってたブログでは、前期末辺りに「世界の中心で愛を叫んだけもの」について書いた記事が急激に伸びる事がありましたので。
当ブログにはコメント機能がありますので、よろしければ「レベル補正・トーンカーブの続き早よ」などのご意見を頂ければ、多分頑張りますので。よろしくお願いいたします。

先日、受講されている方の御自宅にマシントラブルのヘルプに行きました。
おそらくと思ってはいましたが、やはりWindows10の自動インストールのトラブルでした。
インストール中に強制終了した為か、ちゃんとインストールできなくなっていたので、クリーンインストールとアプリケーション他の環境復元を行いました。
個人的な意見ですが、Windows10にプリンタやソフトが対応していればアップグレードする方が今後の事を考えると良いと思います。
と言うのも、Windows10以降はMacOSXと同じようにベースシステムは同じで機能の追加や変更などを行うようなアップグレードを行いますので。そういう意味で「最後のWindows」とも呼ばれているようですが。（MacOSXは既に登場してから15年以上このようなアップグレードを繰り返しています）
7から移行しても基本的な操作が同じなので8の時の様な混乱は無いと思いますし...。

で、その作業のお礼としてお菓子やらお酒やら食事を頂いたりしました。
ちゃんとお代は頂いていますので気を使っていただく事もないのですが、心遣いを頂くのはそれはそれで嬉しい事でもあります。
個人レッスンという事で距離感が近いという事もありますが、贈与経済がどうも成立しつつある感じが興味深いというか。
色々ありがとうございます。

最後に、6月のスケジュールも大体決定して更新してあります。
ご確認ください。