こーひーをぶんなぐれ！ - アート系学生のためのJAVA with Processing - その2-4 Processingの配列

導入

本記事では，Processingの配列について述べる．

配列の概念

配列とは，一つのデータ型(本記事では整数型「int」)を多数まとめて管理するものである．

沢山の円を個別に動かすアニメーションを考えてみる．この時1つの円につきx座標とy座標，xが進む方向，yが進む方向，動くスピードの，5つの値を保持するための変数を必要とする．
そして，例えば100個の円を同時に動かすアニメーションを作りたい時には，前述の「5つの変数*100個の円=500個」の変数が必要となる．実際にはソースコードに500個の変数を書く事は出来ない．
そこで，同じ用途の変数をまとめて一つの変数のような名前を与えて，管理しやすくしたものが，「配列」である．
intの配列は，

int 配列名[] = new int[サイズ];

という形で宣言を行う．
例えば，

int intArray[] = new int[10];

と書くと，int変数を10個格納できるintArrayという名前の配列を宣言する事が出来る．
配列の各変数にアクセスするためには，以下のような書法を使う．

intArray[0] = 10; //intArrayという配列の1番目の格納変数に10を代入する
intArray[3] = 5; //intArrayの4番目に5を代入する
int x = intArray[5]; //変数xにintArrayの6番目に格納されている値を代入する

以上の用に大括弧[]の中身に0~の値を与える事(添字)で，配列の中身を使う事が出来る．
(1~ではない事に注意)

for文と配列

配列はfor文と非常に相性がいい．
for文で用いるカウンタを配列の添字として用いるのが一般的である．
以下のコードは100個の変数を保持できる(サイズ100)を持つ配列の中にRandomで発生させた値を格納してから描画を行っている．

int xArray[] = new int[100]; //サイズ100の配列を宣言する
int yArray[] = new int[100];

void setup(){
  size(640, 480);
  colorMode(RGB, 255);
  background(255, 255, 255);
  frameRate(10);
  
  for(int i=0; i<100; i++){ //for文のカウンタ変数iを添字として使い配列に代入する
    xArray[i] = (int)random(640);
    yArray[i] = (int)random(480);
  }
}

void draw(){
 noStroke();
 fill(255,255,255);
 rect(0, 0, width, height);

 stroke(0, 0, 0);
 fill(100, 100, 100);

 for(int i=0; i<100; i++){ //for文のカウンタ変数iを使って配列にアクセスし値を取り出す
   ellipse(xArray[i], yArray[i], 10, 10);
 }
}

以下のコードでは，方向も移動速度もバラバラな100個の円をアニメーションさせている．

int xArray[] = new int[100];
int yArray[] = new int[100];
int xspeed[] = new int[100]; //移動速度を格納する配列

int xdirection[] = new int[100]; //移動方向を格納する配列

void setup(){
  size(640, 480);
  colorMode(RGB, 255);
  background(255, 255, 255);
  frameRate(10);
  
  for(int i=0; i<100; i++){
    xArray[i] = (int)random(640);
    yArray[i] = (int)random(480);
    xspeed[i] = (int)random(15) + 5; //5~20の値をrandomで発生させて配列に格納

    //0~2の値をrandom発生させて，1以下なら正方に，1以上なら負方向に動かすことを決め，配列に格納
    if(random(2) < 1){ 
       xdirection[i] = 1;
    }
    else{
       xdirection[i] = -1;
    }
  }
}

void draw(){
 noStroke();
 fill(255,255,255);
 rect(0, 0, width, height);
 
 stroke(0, 0, 0);
 fill(100, 100, 100);
 for(int i=0; i<100; i++){
   ellipse(xArray[i], yArray[i], 10, 10);
   
   //反転させる
   if(xArray[i] > 640){
     xdirection[i] = -1;
   }
   else if(xArray[i] < 0){
     xdirection[i] = 1;
   }
   
   //次のフレームのx座標を決める
   xArray[i] += xdirection[i] * xspeed[i];
 }
}