今回はProcessingでのアニメーションについてを記事にしました。
[ フレームレートについて ]
フレームレートとは何のことかご存知ですか？フレームレートは簡単に説明すると「1秒間にパソコンの画面が更新される回数」です。フレームレートが60だったら1秒間に60回画面が更新されるというわけです。よくフレームレートのことをFPS(Frame Per Second)なんて言ったりしますね。
[ setupとdrawについて ]
Processingには大きく分けて「setup」と「draw」と言われるものがあります。「setup」は実行ボタンをクリックした後の最初の1フレームだけ呼びされ、「draw」は実行ボタンをクリックしてから停止ボタンをクリックするまでの間、毎フレーム呼び出され続けるという特徴があります。
[ 円を動かさせよう ]
下記のスクリプトを下記の画像のようにエディタ領域に打ち込んで実行ボタンをクリックしてみてください。
void setup() { size(600, 600); background(255, 255, 255); } void draw() { background(0, 255, 0); ellipse(mouseX, mouseY, 150, 150); }
無事にプログラムを実行できた場合、下記の画像と同じようにマウスカーソルに追従する円ができると思います。「mouseX」にはマウスカーソルのX座標が代入され、「mouseY」にはマウスカーソルのY座標が代入される仕様です。どちらとも上記のスクリプトでは「draw」内に書かれているため、毎フレームマウスカーソルの座標が代入されます。したがって常に追従しているように見えます。
[ 跡が残らないようにさせよう ]
下記のスクリプトを下記の画像のようにエディタ領域に打ち込んで実行ボタンをクリックしてみてください。
void setup() { size(600, 600); background(255, 255, 255); } void draw() { background(255, 255, 255); fill(0, 255, 0); ellipse(mouseX, mouseY, 150, 150); }
無事にプログラムを実行できた場合、下記の画像と同じようにマウスカーソルに追従する跡が残らない円ができると思います。
