第3回 マウスに合わせてアニメーション - そら豆スクリプト入門

https://www.catch.jp:443/wiki/index.php?SoraMame.ps.js%2F%C6%FE%CC%E7%2Fpart.3

<< 1 2 3 4 5 6 7 8 >> 目次 用語集 演習回答


前回は、プログラムの改造に、ちょっとだけ挑戦してみた。

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

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

2行のコードで、なにがおきるか

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

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

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

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

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

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

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

2line-view.png

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

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

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

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

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

そら豆スクリプトによるアニメーション

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

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

pub_frame.png

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

pub_anime.gif

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

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

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

code_parts.png

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

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

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

code_yakuwari.png

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

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

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

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

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

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

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

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

いろんなカタチを描くには

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

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

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

カタチをかえる

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

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

{始点X:0、始点y:0}と{終点X:@マウスX、終点y:@マウスy}にセン
sample_31.png

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

{X1:0、Y1:0}と{X2:100、Y2:100}と{X3:@マウスx、Y3:@マウスy}にサンカク
sample_32.png

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

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

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

色を変える

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

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

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

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

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

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

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

ちなみに、色の指定には、赤(Red)・緑(Green)・青(Blue)をまぜる
光の三原色」(RGB)を使っている。
詳しい指定方法については、あとで説明する。

色の指定は、ずっと続く

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

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

塗りつぶし色と背景色

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

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

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

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

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

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

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

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

あれ?
なにか、おかしい。

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

「初期設定する」と「くり返し描画する」

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

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

code_background.png

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

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

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

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

練習問題

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

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

いろんな命令を使うには

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

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

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

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

命令の調べ方について

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

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

命令の使い方を調べる1

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

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

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

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

マルellipse(){X:100、Y:100}に{幅:50、高さ:50}のマル

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

{X:100、Y:100}に{幅:50、高さ:50}のマル

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

命令の使い方を調べる2

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

そら豆スクリプトのサンプルページ

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

命令を使いこなすコツ

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

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

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

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

色を数字で指定する方法

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

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

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

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

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

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

最大の値が、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}のマル
}
sample_38b.png

白黒の指定方法

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

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

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

演習

練習問題の答え

さて問題は、

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

というものだった。

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

//背景色を指定して、マウスの位置にマルを描く(重ね描きあり)
---初期設定する{
  {幅:300, 高さ:300}のサイズ
  {赤:0、緑:255、青:0}の背景色
}

---くり返し描画する{
  {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル
}
sample_37.png

演習問題

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

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

1.マウスの動きに合わせて、円弧(えんこ:円の一部になる曲線)を描いてみよう。
円弧の描き方は、命令リストで確認する

practice_31.png

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

practice_32.png

<< 1 2 3 4 5 6 7 8 >> 目次 用語集 演習回答


  トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-10-30 (火) 23:34:32 (2844d)