Processing 入門
７．アニメーションしよう
アニメーションというとテレビのアニメを思い浮かべる人もいるでしょう。
ここで覚えることはイメージと違うかもしれません。
しかし、根本的なしくみは同じなのです。
アニメーションの基本 その１
まずは次のプログラムを入力しましょう。
mouseX と mouseY の XY は大文字なので注意してください。
setup() や draw() の後ろにあるのは波かっこ {} です。
大抵、Enter キーの横にあると思います。
それでは実行してみましょう。
実行して開いたウィンドウのところにマウスカーソルを持っていき
適当に動かしてみてください。
次のように円が描かれると思います。
もう１度、プログラムを見てみましょう。
setup() の波かっこ {} の中に書いた命令は１回だけ実行されます。
初期処理などはここに書きます。
draw() の {} の中は毎フレーム実行されます。
draw() の中にある ellipse で円を描いてます。
そのとき、mouseX と mouseY を使ってマウスカーソルの座標を取得し、
その位置に円を描いているのでマウスの動きと連動するのです。
Processing でアニメーションさせるとき、setup() と draw() を使う方法が
一般的です。
draw() の中で絵を描きかえ、絵が動いているように見せます。
フレームレートとは
フレームレートとは簡単に言えば、１秒間に画像を描きかえる回数です。
もし１秒間に１０回、画像を描きかえているならフレームレートは 10 ということに
なります。
下のページでフレームレートに関する簡単な説明をしています。
別の言語環境のものですが基本的なところは同じです。
[ フレームレートを変更する ]
Processing の場合、フレームレートの設定により draw() の実行回数が
変わってきます。
次のように frameRate を使ってフレームレートを変更してみます。
実行してみると違いがはっきりと分かるでしょう。
フレームレートを 10 にしたので１秒間に 10 回 draw() が実行されます。
フレームレートは指定しないと 60 です。
しかし、描画するものが沢山あったり、パソコンのスペックが足りなかったりすると
60 回描画されないこともあります。
処理が間に合わず描画回数が不安定になった時は、フレームレートを下げてみるもの
いいと思います。
マウスカーソルの座標を調べる方法
アニメーションとは関係ないのですが・・・
マウスカーソルの座標を調べる方法について説明します。
次のように println の行を追加してください。
実行してみると次のように座標が表示されます。
mouseX と mouseY の内容は１フレームごとに更新されます。
以前にも説明しましたが、座標の原点は左上になっています。
カーソルの位置と数値を見ながら、本当にそうなのか確認してみましょう。
アニメーションの基本 その２
次のように draw() の内容を変更してください。
println は削除して backgroud を追加します。
background を使って背景を黒 (0,0,0) で塗りつぶします。
実行してみましょう。
カーソルを動かすと白い円が付いて回ります。
これが Processing のアニメーションの基本となります。
つまり、描画したものを新しい描画で上書きするのです。
今回の場合
全体を黒く塗りつぶす → 白い円を描く → 全体を黒く塗りつぶす → 白い円を描く →(略)
これを繰り返しているだけです。
次のようにプログラムを変更してください。
実行するとカーソルの左右にあわせて四角も左右に動きます。
これはブロック崩しゲームのラケットの動きですね。
Ｙ座標は固定してＸ座標のみ利用するだけの簡単なプログラムです。
新しい描画で上書きする、これが基本となります。