少し高度なプログラミング2～配列変数

配列変数

円の数を増やすことを考えましょう。円を64個に増やします。

同じような、複数の変数を扱う際には「配列変数」を使うと便利です。
processingでは配列変数を次のようにして宣言します。

float[] x = new float[64];

これにより、x[0], x[1], … , x[63]のように、64個の変数が定義されます。
x[]の形で扱います。カギかっこの中は0~63の整数を入れます。

配列変数はたいていのプログラミング言語で使えます。
C言語なら
float x[64];
と定義します。

次の例では、64個の円を画面の中心に描き、マウスのボタンがクリックされるたびにランダムな方向へ動かします。

float[] x = new float[64];  //円のx座標
float[] y = new float[64];  //円のy座標
float[] vx = new float[64];  //円のx方向の速度
float[] vy = new float[64];  //円のy方向の速度
int j;  //動かす円の番号

void setup(){
  size(400, 400);
  background(0);
  smooth();
  for(int i=0; i<64; i++){  //iを1づつ増やして64まで繰り返す
    x[i] = width/2;  //円を画面の中心に
    y[i] = height/2;
    vx[i] = 0;
    vy[i] = 0;
  }
}

void draw(){
  background(0);
  for(int i=0; i<64; i++){
    ellipse(x[i], y[i], 40, 40);  //円を描く
    x[i] = x[i] + vx[i];  //i番目の円の位置を動かす
    y[i] = y[i] + vy[i];
  }
}

void mousePressed(){
  float deg;
  deg = random(2*PI);  //乱数で角度を決める
  x[j] = width/2;  //位置を中心に戻す
  y[j] = height/2;
  vx[j] = cos(deg);
  vy[j] = -sin(deg);
  j = j + 1;  //円の番号を1動かす
  if(j == 64){  //もしjが64番目まで行っていたら
    j = 0;  //jを0に戻す
  }
}

• randam()
  0~かっこに入れた数値の範囲の乱数を発生します。
  円周率として　PIが使えます。(予約語)

画面上の演出

ここまでのメソッドの組み合わせで、たとえば次のようなことができます。

float[] x = new float[64];  //円のx座標
float[] y = new float[64];  //円のy座標
float[] vx = new float[64];  //円のx方向の速度
float[] vy = new float[64];  //円のy方向の速度
float[] visible = new float[64]; //動き始めてからの時間
int j;

void setup(){
  size(400, 400);
  background(0);
  smooth();
  noStroke(); //円の枠線は引かない
  for(int i=0; i<64; i++){
    x[i] = width/2;
    y[i] = height/2;
    vx[i] = 0;
    vy[i] = 0;
    visible[i] = 0; //初期値は0
  }
}

void draw(){
  background(0);
  for(int i=0; i<64; i++){
    if(visible[i] > 0){ //visibleが0より大きい時だけ
      fill(255, 255, 255, visible[i]);  //色(透明度)を設定して
      ellipse(x[i], y[i], 40, 40);  //円を描く
    }
    x[i] = x[i] + vx[i];
    y[i] = y[i] + vy[i];
    visible[i] = visible[i] - 2;  //色は次第に薄くする
  }
}

void mousePressed(){ //マウスクリック時
  float deg;
  deg = random(2*PI);
  x[j] = width/2;
  y[j] = height/2;
  vx[j] = cos(deg);
  vy[j] = -sin(deg);
  visible[j] = 255;  //透明度を0%に設定
  j = j + 1;
  if(j == 64){
    j = 0;
  }
}

ここではvisibleという変数を設定し、時間とともに透明度を増やして、うっすらと消えていくようにしています。

例題

• 円の大きさや色、速さ(上の例では1に固定)をランダムに決めるようにする
• マウスカーソルの位置から円を生じさせる
• 円の進む方向をランダムで決めるのではなく、画面の中心から直線的に遠ざかるようにする