setup()とdraw()

これまでのプログラムは静止画を表示するだけでしたが、次はアニメーションやインタラクションに必要なプログラムの説明をします。

ここで必ず使う機能はsetup()とdraw()です。
このモードはProcessingプログラミングの中で一番よく使われるものでしょう。
setup()で初期化し、draw()を繰り返し実行することでアニメーションなどが出来ます。
setup()は一度だけしか使えません。以下にその例を挙げます。

繰り返し

点が左から右に動き、右端まで行くとまた左端から始まるアニメーションです。

int eSize = 5;  //オブジェクトのサイズ
int speed = 5;  //オブジェクトのスピード
int x = 0;  //オブジェクトのx座標

void setup() {
  size(400, 400);
  noStroke();      //輪郭を描かない
  frameRate(30);  //再生速度を1秒30フレームに設定（初期値は1秒60フレーム）
  smooth();        //オブジェクトにアンチエイリアスをかける
  fill(0);      //オブジェクトを黒で塗りつぶす
}

void draw() {
  background(255);  //画面の色を更新
  ellipse(x, height/2, eSize, eSize);    //円を描く
  x = x + speed;    //x座標にspeedの値を足す
  if (x >=width) {    //もし、xの値がよ画面の幅を超えたら、xを0に戻す
    x = 0;
  } 
}

折り返し

点が左から右に動き、右端まで行くと左方向に戻っていき、その動作を繰り返すアニメーションです。

int eSize = 5;  //オブジェクトのサイズ
int speed = 5;  //オブジェクトのスピード
int x = 0;  //オブジェクトのx座標

//初期化
void setup() {
  size(400, 400);
  noStroke();      //輪郭を描かない
  frameRate(30);  //再生速度を1秒30フレームに設定（初期値は1秒60フレーム）
  smooth();        //オブジェクトにアンチエイリアスをかける
}

//プログラムが終了するまで、draw()の中は繰り返される
void draw() {
  background(255);  //背景は白
  x = x + speed;    //xの値にspeedを足す
  
  //もし、xの値が画面の右端より大きくなるか、左端より小さくなった場合、
  if(x > width || x <0) {
    speed = -speed;    //speedの正負を入れ替える
  }

  fill(0);  //黒で描く
  ellipse(x, height/2, eSize, eSize);    //円を描く
}