Processing tutorial 4

じゃあ今回は動きを作ろう。
基本形はコレだ。

void setup(){
}
void draw(){
}

setup関数は起動後一度だけ読まれる関数で、例えば画面の大きさやなんちゃらModeの設定とかグローバル変数への値代入とか、フレームレートの設定とかの初期設定をするために使う。

draw関数はメインループと呼ばれて、起動中繰り返し行われる。
デフォルトでは1秒間で60回繰り返される。
もちろん、重たい処理などがあるときはもっと遅れる。

百聞は一見にしかず。
では実際にやってみよう。

void setup(){
  size(400,400);
}
void draw(){
  ellipse(mouseX,mouseY,mouseX,mouseY);
}

これでこのようにできる。

mouseXとはマウスのx座標。mouseYとはマウスのy座標。
この例はマウスの座標に、マウスの座標によって大きさが変わる楕円を描くというものである。
では次に変数を使ってみよう。

ちょっと脱線するが、変数にはお馴染みの型がある。

• int
• float
• double
• char

その他にも

• boolean
• color
• byte

がある。どういう型なのか、というのは名前から推測できると思う。
booleanはtrueかfalseか。真偽を保存する変数だ。
colorは色情報を保存する変数。
byteは1バイト単位の情報を保存する変数。

脱線終わり。
変数にはグローバル変数とローカル変数というのがある。
関数内で宣言されるものがローカル変数、関数外で宣言されるのがグローバル変数だ。
アニメーションするにはグローバル変数というものを多用する。
ローカル変数は関数が読まれるたびに初期化されてしまうからだ。

では、時間の経過とともに左右に動く短形を作ろう。
しかも、これは残像を残す。

float x=0;
float speed=2;
float d=1;
void setup(){
  size(400,400);
  colorMode(HSB,100);
  background(99);
}
void draw(){
  noStroke();
  fill(99,30);
  rect(0,0,width,height);
  x += speed*d;
  if(x>width) d= -1;
  if(x<0) d= 1;
  fill(0);
  rect(x,height/2,20,20);
}

これでどうだろう。
rectが二つある。
最初のrectは前のフレームを半透明な白い全体を覆い隠すための短形で、次のrectは動いているように見える黒い短形だ。
最初の短形のおかげでアニメのように見える。これがなかったら前のフレームの内容は一つ目の例のようにそのまま残る。
また、この短形が半透明なので残像があるように見える。