SoraMame.ps.js/入門/part.3 の変更点

追加された行はこの色です。
削除された行はこの色です。
SoraMame.ps.js/入門/part.3 へ行く。
#title(第3回　マウスに合わせてアニメーション - そら豆スクリプト入門)

[[＜＜>SoraMame.ps.js/入門/part.1]] [[1>SoraMame.ps.js/入門/part.1]] [[2>SoraMame.ps.js/入門/part.2]] ''3'' [[4>SoraMame.ps.js/入門/part.4]] 5 6 7 8 ＞＞ [[目次>SoraMame.ps.js/入門]] [[用語集>SoraMame.ps.js/入門/Glossary]] [[演習回答>SoraMame.ps.js/入門/Practice]]
[[＜＜>SoraMame.ps.js/入門/part.1]] [[1>SoraMame.ps.js/入門/part.1]] [[2>SoraMame.ps.js/入門/part.2]] ''3'' [[4>SoraMame.ps.js/入門/part.4]] 5 6 7 8 [[＞＞>SoraMame.ps.js/入門/part.4]] [[目次>SoraMame.ps.js/入門]] [[用語集>SoraMame.ps.js/入門/Glossary]] [[演習回答>SoraMame.ps.js/入門/Practice]]

----

[[前回>SoraMame.ps.js/入門/part.2]]は、プログラムの改造に、ちょっとだけ挑戦してみた。~

マルをシカクにしたり~
サイズや表示する位置を変更したり、~
なんてことを、ほんの1行かえるだけで実現した。~

今回は、プログラム全体の組み立てについて、しらべてみよう。~
それから、カタチや色や線の太さを変更する方法を理解する。~
そして、これらを組み合わせて、~
もう少し複雑な、マウスに合わせて動くアニメーションプログラムを作ろう。~

#contents


*2行のコードで、なにがおきるか [#r7bb5688]

そら豆スクリプトによるアニメーションについて説明するまえに~
コードが2行あったら、どんなことがおきるのか考えてみよう。~

前回の記事では、プログラムを1行だけ改造してみたが、~
一番最後の演習に、次のような問題があった。~

 ５．マルを描く行のあと、次の行でシカクを描いてみる。
 どんな結果が得られるだろうか

じっさいにやってみたら、どんな結果になっただろうか。~

たとえば、2つの行を続けてかくと、こんなふうになる。~

 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル
 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカク

これを実行すると、~
次のようにマルの上にシカクが描かれる。~

#ref(2line-view.png);

-[[マルとシカクを描く:http://www.catch.jp/program/soramame/sample/practice/SoraMame_practice_25.html]]

まずマルを描いて、それからシカクを描くので、~
このようになるんだ。~

そら豆スクリプトでは、~
基本的に、複数のコードが続いていると、~
上から順番に実行していく。~

そして、見た目としては~
最初に描かれたカタチが下になり~
最後に描かれたカタチは上に重ねて描かれる。~

今回のように、~
マルを描く行と、シカクを描く行が続いている場合、~
まずマルを描いて、~
それからシカクを描くんだ。~

では、これをふまえて~
そら豆スクリプトによるアニメーションについて~
説明しよう。~



*そら豆スクリプトによるアニメーション [#x818066e]

イラストやマンガは、ほんとうは止まっているけれど、~
テレビとか映画とかゲームは、動いているように見える。~
このような「アニメーション」が、~
どのような原理になっているか~
知っているよね。~

そう。ペラペラマンガのように、~
まず、ちょっとずつカタチがちがう絵を大量に用意して、~

#ref(pub_frame.png);


それを速いスピードで順番に表示すると~
目の錯覚で、絵が動いているように見えるんだ。~

#ref(pub_anime.gif);

そら豆スクリプトでも、アニメーションを表示する方法は同じだ。~

ただし、あらかじめ大量の絵を用意するかわりに~
ちょっとずつカタチがちがう絵を~
プログラムで作り出す。~

いつものデモプログラムを例に、実際のコードを調べてみよう。~
コードは、大きく2つの部分に分かれている。~

#ref(code_parts.png);

よく見ると、「---初期設定する」の部分と、「---くり返し描画する」の部分があるよね。

「---初期設定する」の部分は、そのプログラムをうごかしたときに、最初に１回だけ実行される。~
「---くり返し描画する」の部分は、そのあと何度もくりかえし実行されるんだ。~

じっさいに実行される部分は、すぐあとの「{」と「 }」で囲まれているところだ。~
だから、「---初期設定する」の後ろの「{」と「 }」の間のコードが、~
最初に１回だけ実行されて、~
そのあと、「---くり返し描画する」の後ろの「{」と「 }」の間のコードが、~
くりかえし実行される。~

#ref(code_yakuwari.png);


じつは、「---(命令語) {・・・}」と書いてある部分は、~
ほかから呼び出される命令を定義している。~

とくに、「---初期設定する」と「---くり返し描画する」の部分は、~
そら豆スクリプト本体から動的に呼び出される、特別な命令なんだ。~

ちなみに、「---初期設定する」の後ろの「{」と「 }」の間には

 {幅:300, 高さ:300}のサイズ

というコードがあるけれど、~
これは、カタチを描くエリアのサイズを指定する命令だ。~

この命令は、最初に一回だけ実行されることになる。~

それから、「{」と「 }」の間のコードは、~
行頭に空白を入れて、位置を右にずらしている。~
このように行頭をそろえると、~
どこからどこまでが「{」と「 }」の間なのか、~
ひとめで判断できるので、~
コードが見やすくなる。~

このように行頭を下げることを~
「字下げ」とか「インデント」と呼ぶ。~



*いろんなカタチを描くには [#pe62550a]

では、もう一度、コード全体を見てほしい。~

前回改造した1行は、このような「---くり返し描画する」の後ろの~
「{」と「 }」の間にある。~
だから、ここにマルを描く行があれば、くりかえしマルを描くことになる。~
くりかえすたびに、マウスの位置が変わっていれば、~
その位置に合わせてマルを描く位置も変わるんだ。~

そして、この行を改造すれば、マルをシカクにしたり、描き方を変えることができた。~


**カタチをかえる [#h7fa56ea]

それでは、マルとシカクいがいのカタチを描いてみよう。~
そら豆スクリプトでは、いろんな種類のカタチを描ける。~
ここでは、その例として「セン」と「サンカク」を描いてみよう。~

センは、次のようにして描く。~

 ｛始点X：0、始点y：0｝と｛終点X：@マウスX、終点y：@マウスy｝にセン

#ref(sample_31.png);

-[[センを描く:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_31.html]]

サンカクは、次のようにして描く。~

 ｛X1：0、Y1：0｝と｛X2：100、Y2：100｝と｛X3：@マウスx、Y3：@マウスy｝にサンカク

#ref(sample_32.png);

-[[サンカクを描く:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_32.html]]


マルやシカクを書く行との違いが、わかるかな。~
そう、引数(ひきすう)が、ちがっているよね。~

このように、そら豆スクリプトでは、命令語ごとに引数の書き方がちがっている。~
あたり前だけど、「セン」を描くときは、2つの点の位置を指定する。~
「サンカク」を描くときは、3つの点の位置を指定する。~
なお、命令によっては、複数の方法で引数を指定できる場合がある。~

どのような命令語があって、引数をどのようにあたえるか、~
それをしらべる方法は、あとで説明する。~


**色を変える [#nf27c621]

次は、色を変えてみよう。~
変えられる色には、「輪郭色」「塗りつぶし色」「背景色」の３つがある。~

まず、「輪郭色」を例にして、色を変えてみよう。~
マルの輪郭色を変えるには、次のように書く。~

 {赤:255、緑:0、青:0}の輪郭色
 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル

#ref(sample_33.png);

-[[輪郭色を指定してマルを描く:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_33.html]]

「輪郭色」は、輪郭の色を指定するための命令語だ。~
ここでは、まず輪郭の色を赤色に指定して、~
それからマルを描いている。~

今回の記事の冒頭で、~
複数のコードがつづいている場合、~
上から順番に実行していくことを説明した。~
たとえば、マルを描く行があって、~
つづいてシカクを描く行がある場合は、~
まずマルを描いて、それからシカクを描くのだったよね。~

輪郭色など色を指定する場合は、~
まず専用の命令(この場合は、輪郭色)で色を指定し、~
それから、じっさいに描くカタチを指定する。~
すると、指定した色でカタチが描かれるんだ。~

絵の具で紙に絵を描く場合に、~
パレットの上から色を選んで、~
それから紙に絵を描いている、~
なんて感じを想像してもらうと、いいかもしれない。~

ちなみに、色の指定には、赤(Red)・緑(Green)・青(Blue)をまぜる~
「[[光の三原色:http://web.canon.jp/technology/kids/mystery/m_04_02.html]]」(RGB)を使っている。~
詳しい指定方法については、あとで説明する。~

**色の指定は、ずっと続く [#c0eaa7f0]

さて、輪郭色の指定は、一度行うと、~
次の輪郭色を指定するまで、ずっと有効になっている。~
そのために、次のように２つのカタチを連続して描くと、~
どちらも同じ色で描かれることになる。

 {赤:255、緑:0、青:0}の輪郭色
 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル
 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカク

#ref(sample_34.png);

-[[輪郭色を指定してマルとシカクを描く:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_34.html]]


**塗りつぶし色と背景色 [#f58ef0f5]

塗りつぶし色と背景色のやり方も、輪郭色の指定方法とほぼ同じだ。~

「塗りつぶし色」は、カタチの中を塗りつぶす色を指定する命令だ。~
次のようにすると、カタチを塗りつぶすことができる。~

 {赤:255、緑:0、青:0}の輪郭色
 {赤:0、緑:0、青:255}の塗りつぶし色
 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル

#ref(sample_35.png);

-[[塗りぶつし色を指定してマルを描く:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_35.html]]

ここでは、まず輪郭の色を赤色に指定して、~
つづいて、塗りつぶし色を青色に指定して、~
それからマルを描いている。~

こんどは、背景色を指定してみよう。~

「背景色」は、カタチを描く背景の色を指定する命令だ。~
なにも指定しない場合は、灰色になっている。~
ここに、自由に色をつけることができる。~

次のようにすると、背景色をつけることができる。

 {赤:0、緑:255、青:0}の背景色
 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル

#ref(sample_36.png);

-[[背景色を指定してマルを描く？:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_36.html]]

あれ？~
なにか、おかしい。~

いままでは、マルが重ね描きされていたのに、~
今回は、マルが移動しているように見える。~
これは、いったい・・・~


*「初期設定する」と「くり返し描画する」 [#n8b03199]

なにが、おきているんだろうか。~
もう一度、コードをよく読んでみよう。~

そら豆スクリプトでアニメーションを作る場合、~
「初期設定する」の部分が一回だけ実行されて、~
「くり返し描画する」の部分が何度もくりかえし実行されるのだった。~

#ref(code_background.png);

そして、背景色を指定する行は、~
この「くり返し描画する」の中にある。~
つまり、背景色が、何度もくりかえし指定されていることになる。~

じつは、そら豆スクリプトでは、~
背景色を指定するたびに、描かれていたカタチを消してしまうんだ。~

だから、背景色が、何度もくりかえし指定されると~
そのたびに、描かれたカタチを消えてしまい、~
毎回、1個だけカタチを描きなおすことになる。~

コレはコレで、とてもおもしろい効果だね。~

**練習問題 [#y8d579ce]

でも、いままでと同じように、カタチを重ね描きしながら~
背景色を指定するには、どうすればいいだろうか？~

(答えは、このページの最後で！)


*いろんな命令を使うには [#fd771e0b]

さて、いろんなカタチや色を使えるようになったら、~
表現の幅が大きく広がるはずだ。~

ぜひ、自分の作ってみたいものを、~
自分で考えて自分で作ってみよう。~

そら豆スクリプトには、まだ説明していない命令が、いくつかある。~
その種類と数は、これからどんどん増えていく。~

そこで、命令について調べる方法を説明しよう。

**命令の調べ方について [#b04ffaab]

そら豆スクリプトで使える全部の命令は、~
次の命令一覧ページにまとめてある。~

-[[そら豆スクリプトの命令一覧>http://www.catch.jp/wiki/index.php?SoraMame.ps.js/Reference]]

これらの命令を組み合わせることで、いろいろな動きを作り出すことができる。~
今後、新しい命令も、どんどん追加していく予定だ。~



**命令の使い方を調べる１ [#x0e519f6]

使える命令が分かったら、次は、どのように使うのか~
調べる必要がある。~

そのためには、2つの方法がある。

まず最初の方法は、さきほどの命令一覧ページを見ること。~
ここで、サンプルコードを見ると、使い方の例が載っているんだ。~

たとえば、マル命令の場合、

|マル|ellipse()|｛X：100、Y：100｝に｛幅：50、高さ：50｝のマル|

となっているよね。~
一番右にある~

 ｛X：100、Y：100｝に｛幅：50、高さ：50｝のマル

がサンプルコードになる。~
これをコピペすれば、とりあえず使えるはずだ。~

**命令の使い方を調べる２ [#v41872a4]

さて、命令の使い方を調べる、もうひとつの方法は~
次のようなサンプルページを見ること。~

[[そら豆スクリプトのサンプルページ>SoraMame.ps.js/Samples]]

キミのやりたいことと、よく似たサンプルページを見つけて~
そのコードをよく読んでみよう。~
そうすれば、きっと使い方のヒントが見つかるはずだ。~


**命令を使いこなすコツ [#nf6d5a24]

命令を調べて、プログラムを作るとき大事なことは、~
まず、サンプルコードをよく読むこと~
いろんなコードを詳しく読んでみることで~
プログラミングのヒントがたくさん手に入るんだ。~

もうひとつは、順番にすこしずつ改造してみること~
解説を読むだけでは、じっさいに動くプログラムを~
作ることは、なかなかできない。~

だから、じっさいのコードを読んだり、~
改造してみたりすることは、~
とても重要なんだ。~

最初は、思いどおりにできないかも知れないけれど~
ちょっとずつ改造したり、~
ともだちに相談したり、~
いろいろ実験したりしながら~
がんばってみよう。~



*色を数字で指定する方法 [#x5d7059c]

そら豆スクリプトでは、次のように、~
3つの数値の組み合わせで指定する。~
次の例は、赤色で背景を塗りつぶしている。~

 {赤:255、緑:0、青:0}の背景色

さきほど説明したように、そら豆スクリプトでは、~
光の3原色つまり赤(R:Red)、緑(G:Green)、青(B:Blue)の3つの色の量で表している。~

色の量は、0から255までの数字で指定する。~
だから、 {赤:255、緑:0、青:0}だと、赤色が255でもっとも多く、~
緑色と青色は0なので、まったくない。~~

また、次のように指定すると
赤色を半分と緑色を半分ずつ混ぜた、暗い紫色になる。

 {赤:125、緑:0、青:125}の背景色

#ref(sample_38a.png);

-[[暗い紫色の背景色でマルを描く:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_38a.html]]

最大の値が、255というのが、中途半端に感じると思う。~
たしかに人間にとっては、中途半端だが、~
実はコンピュータにとっては、キリのいい数字なんだ。~

主な色の指定方法は、下記のようになる。

|赤色|{赤:255、緑:0、青:0}|
|緑色|{赤:0、緑:255、青:0}|
|青色|{赤:0、緑:0、青:255}|
|水色|{赤:0、緑:255、青:255}|
|黄色|{赤:255、緑:255、青:0}|
|紫色|{赤:255、緑:0、青:255}|
|白色|{赤:255、緑:255、青:255}|
|黒色|{赤:0、緑:0、青:0}|

そして、次のようにすると~
マウスの位置によって、マルを塗りつぶす色が変化する。

 ---くり返し描画する{
  {赤:@マウスX、緑:255、青:@マウスY}の塗りつぶし色
  {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル
 }

#ref(sample_38b.png);

-[[マウスの位置に合わせて、マルの色を変える:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_38b.html]]

**白黒の指定方法 [#pd5ad582]

白色と黒色は、~
このように光の3原色でも指定できるが、~
次のように、白と黒の濃さで指定することもできる。~

 {白黒:0}の背景色 //黒色

 {白黒:255}の背景色 //白色

この場合は、白黒の量で、白と黒の濃さを調整する。~
白黒が0だと、黒色になり~
白黒が255だと、黒色になる。~
そして、白黒を0から255の間で調整することで、~
灰色の濃さを調整できるんだ。~


*演習 [#t632ce27]


**練習問題の答え [#i4e30eaa]

さて問題は、~

 いままでと同じように、カタチを重ね描きしながら
 背景色を指定するには、どうすればいいだろうか？

というものだった。~

背景色を指定すると、いままでのカタチが消えてしまうので~
背景色を1回だけ指定するようにすればいい。~
そのためには、「くり返し描画する」ではなく、~
「初期設定する」で背景色を指定する。~

 //背景色を指定して、マウスの位置にマルを描く（重ね描きあり）
 ---初期設定する{
   {幅:300, 高さ:300}のサイズ
   {赤:0、緑:255、青:0}の背景色
 }
 
 ---くり返し描画する{
   {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル
 }

#ref(sample_37.png);

-[[背景色を指定して、マウスの位置にマルを描く（重ね描きあり）:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_37.html]]

**演習問題 [#h2172580]

次のようなプログラムを作ってみよう。~

これらも、自分の予想どおりになるか~
じっさいに手を動かして~
ためしてみよう。~

''1.''マウスの動きに合わせて、円弧(えんこ：円の一部になる曲線)を描いてみよう。~
円弧の描き方は、[[命令リスト>SoraMame.ps.js/Reference]]で確認する~


#ref(practice_31.png);


''2.''かんたんなお絵かきツールを作ってみよう。~
マウス動きに合わせて、マウスの位置に赤色の小さなマルを描く。

#ref(practice_32.png);

----

[[＜＜>SoraMame.ps.js/入門/part.1]] [[1>SoraMame.ps.js/入門/part.1]] [[2>SoraMame.ps.js/入門/part.2]] ''3'' [[4>SoraMame.ps.js/入門/part.4]] 5 6 7 8 ＞＞ [[目次>SoraMame.ps.js/入門]] [[用語集>SoraMame.ps.js/入門/Glossary]] [[演習回答>SoraMame.ps.js/入門/Practice]]

[[＜＜>SoraMame.ps.js/入門/part.1]] [[1>SoraMame.ps.js/入門/part.1]] [[2>SoraMame.ps.js/入門/part.2]] ''3'' [[4>SoraMame.ps.js/入門/part.4]] 5 6 7 8 [[＞＞>SoraMame.ps.js/入門/part.4]]  [[目次>SoraMame.ps.js/入門]] [[用語集>SoraMame.ps.js/入門/Glossary]] [[演習回答>SoraMame.ps.js/入門/Practice]]