Processingの基本操作 その３

前回までのプログラムは静止画を描くものでした。
つぎは、動画のプログラムに入ります。
例えば、ellipse()を用いて描いた円が画面の中で右方向に動いていくようなものをプログラムします。
円が画面左から右へ移動するには、円のX座標が常に変化していきます。そのために、前回使った変数を設定しておきます。

まず、X座標のために整数型の変数xを用意する。
円の半径のために整数型の変数rを用意する。
X座標をとりあえず20に設定。
円の半径を25に設定。
画面のサイズは横長にして幅400、高さ200に設定。
背景色をとりあえず255（白）に設定。
Y座標値は100に固定し、変数xとrを用いて円を描く。
そうすると、以下のようになります。

int x;
int r;
x=20;
r=25;
size(400,200);
background(255);
ellipse(x,100,r,r);

ただし、このままでは前回同様静止画の円が描画されます。
動画を描画させるには、setup()とdraw()という関数を用いて、以下のようなフォーマットを用意します。

void setup(){
  //ここに初期設定を記入
}

void draw(){
  //ここに描画内容を記入
}

初期設定には、円の最初の位置や大きさなどを書いておきます。
描画処理を行わせるdraw()には、アニメのセル画のように次から次へと何枚もの絵を描き続ける内容を書きます。
それでは、setup()とdraw()のフォーマットに、はじめに書いた円のプログラムを書き足します。

int x;
int r;

void setup(){
  size(400,200);
  x=20;
  r=25;
}

void draw(){
  background(255);
  ellipse(x,100,r,r);
  x=x+1;
}

draw(){...}内に書かれた内容は、以下のように繰り返し処理されます。

最初にbackground(255);を処理し、
つぎにellipse(x,100,r,r);を処理し、
その次にx=x+1;を処理し、
その次は、最初に戻ってbackground(255);を処理し、
つぎにellipse(x,100,r,r);を処理し、
その次にx=x+1;を処理し、
再びbackground(255);を処理し、
・・・

というように、以後も同様の順番で処理を繰り返します。これをループといいます。
具体的には、まず背景色（白）を画面に塗って、その上に円を描き、次回の準備として円のX座標値を+1しておき、再び背景色（白）で画面を真っ白にしてから、また円を描き、さらにX座標値を+1するという感じです。この繰り返しのループ処理と最後のx=x+1;というのが、円を右方向へ動かすためのプログラムになります。左辺のxは、次回のxの値であり、右辺のxは今回の計算で用いられた値を意味します。つまり、今回のX座標に+1した値を次回のX座標に自己代入するということになります。xには+1が延々と足されていくので、xは処理を繰り返すごとに増大していきます。よって、円のX座標は、初期設定のx=20という値から21、22、23・・・と変化していきます。このプログラムでは、円が画面の右端からはみ出て行っても動き続けるので、画面の右端まで行ったら、左端に戻るような条件を書き足します。

int x;
int r;

void setup(){
  size(400,200);
  x=20;
  r=25;
}

void draw(){
  background(255);
  ellipse(x,100,r,r);
  x=x+1;
  if(x>400){
    x=0;
  }
}

付け加えたif(x>400){x=0;}という部分は、「もしxが増大して400（画面の右端の座標）を超えたら、xの値を0に戻す」という意味です。このように、if文をつかうことで、さまざまな条件分岐が可能になります。
x=x+1;をx++;として書くこともできます。
また、x=x+2;とすれば、スピードは倍になります。
Y座標に関しても変数を用意し、同様にyの値に処理を付け加えれば、円を斜めに動かすことができます。