Home

1次元配列の理解

Filed in processing , 制作応用演習（グラフィカルプログラミング演習） 0 comments

さて、次は配列です。配列の英語名は”array”と言います。これは、軍隊の列に代表されるような、一つに並んだ列のひとかたまりのことを指します。
プログラミングの世界では、変数の列／グループ／セットと理解して下さい。

この配列は、使えるようになると非常に便利な機能です。しかし、たいていのプログラミング初心者は、ここで挫折します。ある意味ここは正念場なので、しっかり理解しましょう。

配列の概念

まずは、配列が一体どういったものなのかを理解しなくでは始まりません。この概念が理解できると使い方も自然に分かると思います。以下の式を見て下さい。

int[] a = new int[3];    //int型の配列a（箱は3つ）を設定
 
a[0] = 1;    //a[0]に1を代入
a[1] = 10;    //a[1]に10を代入
a[2] = 4;    //a[2]に4を代入
println(a);    //aの値を下のメッセージウィンドウに出力

上の式の中で、配列の宣言部分は以下になります。int型の配列a（箱は3つ）を設定しています。

int[] a = new int[3];

また、以下のようにも書けます。

int[] a = { 1, 10, 4 };

概念的には以下のような図になります。

このように、変数の箱が並んでいるイメージです。しかし、この箱は一つ一つ独立なのではなく、全部くっついています。

ここで気をつけなければいけないのは、a[0]のように、配列の番号は必ず0から始まります。
ですから、箱が3つあったら箱の番号は0, 1, 2となります。
これは、言語によって違ったりします。C言語、Java等の言語はProcessingと同じですが、Basicなどは1から始まります。理由はよく分かりません。ちゃんとあるんでしょうけど。とりあえず、ここではそういうものだと覚えておいて下さい。

しかし、まだこれだけではなぜ配列という機能の存在が必要なのか分かりづらいと思います。そこで、次の式を見て下さい。

int[] a = new int[4];    //int型の配列a（箱は4つ）を設定
 
for(int i=0; i<4; i++) {
 a[i] = i ;    //a[i]にiを代入
}
 
println(a);    //aの値を下のメッセージウィンドウに出力

この式の配列の中身は以下のようになります。

もうこの時点で、勘のいい人は分かっていると思います。配列の利点とは、番号に変数が使えるということなのです。
もし上の式に配列を使わなかったら以下のようになります。

int a0, a1, a2, a3;    //int型の変数を設定
 
a0 = 0;
a1 = 1;
a2 = 2;
a3 = 3;
 
println(a0);
println(a1);
println(a2);
println(a3);

長くなりますよね。配列の箱が4つだったらまだいいようなもの、これが100個とかになったらやってられません。
どうですか、配列の便利さが分かってもらえたでしょうか？
また、配列の番号に変数が使えるということは様々な計算式が使えるということです。
以下の式を見て下さい。

int[] a = new int[4];    //int型の配列a（箱は4つ）を設定
 
for(int i=0; i<4; i++) {
 a[i] = i*2 ;    //a[i]にi*2の値を代入
}
 
println(a);    //aの値を下のメッセージウィンドウに出力

この式の配列の中身は以下のようになります。

配列を使う一番の利点は、個々のオブジェクトの属性をコントロールできるという点でしょう。以下のサンプルは、円の大きさを変化させるプログラムです。

ステップ1
まずは一つから始めます。

float eSize;    //円のサイズ
float speed = 0.5;    //円の拡大縮小のスピード
float minSize = 1.0;     //円のサイズの最小値
float maxSize = 100.0;    //円のサイズの最大値
 
void setup() {
  size(200, 200);
  background(255);
  smooth();
  noStroke();
  fill(0);
 
  eSize = minSize;    //円のサイズを最小値に設定
}
 
void draw() {
  background(255);
 
  eSize += speed;    //円のサイズを変化させる
  //もし円のサイズが最大値を超えたか最小値未満になったら、方向を変える
  if(eSize > maxSize || eSize < minSize) speed = -speed;
  ellipse(width/2, height/2, eSize, eSize);    //円を描く
}

結果は、円が拡大縮小するアニメーションになります。

processingscreensnapz001

ステップ2
次に、上記のコードをもとにして、配列を使わずに3つ表示させるプログラムを書いてみます。
円が拡大縮小するスピードは、それぞれの円で変えます。その場合、以下のように書けるでしょう。

float eSize0, eSize1, eSize2;    //円のサイズ
float speed0 = 0.4, speed1 = 0.5, speed2 = 0.3;    //円の拡大縮小のスピード
float minSize= 1.0;     //円のサイズの最小値
float maxSize = 100.0;    //円のサイズの最大値
 
void setup() {
  size(200, 200);
  background(255);
  smooth();
  noStroke();
  fill(0);
 
  eSize0 = minSize;    //円のサイズを最小値に設定
  eSize1 = minSize;
  eSize2 = minSize;
}
 
void draw() {
  background(255);
 
  eSize0 += speed0;
  if(eSize0 > maxSize || eSize0 < minSize) speed0 = -speed0;
  ellipse(0, height/2, eSize0, eSize0);    
 
  eSize1 += speed1;    //円のサイズを変化させる
  //もし円のサイズが最大値を超えたか最小値未満になったら、方向を変える
  if(eSize1 > maxSize || eSize1 < minSize) speed1 = -speed1;
  ellipse(100, height/2, eSize1, eSize1);    //円を描く
 
  eSize2 += speed2;
  if(eSize2 > maxSize || eSize2 < minSize) speed2 = -speed2;
  ellipse(200, height/2, eSize2, eSize2);
 
}

processingscreensnapz002

ステップ3
それでは、上記のコードに配列を使ったらどうなるのでしょう。かなり短くなります。

float[] eSize = new float[3];    //円のサイズ
float[] speed = {0.4, 0.5, 0.3};    //円の拡大縮小のスピード
float minSize = 1.0;     //円のサイズの最小値
float maxSize = 100.0;    //円のサイズの最大値
 
void setup() {
  size(200, 200);
  background(255);
  smooth();
  noStroke();
  fill(0);
 
  for(int i = 0; i < 3; i++){    
    eSize[i] = minSize;    //円のサイズを最小値に設定
  }
}
 
void draw() {
  background(255);
  for(int i = 0; i < 3; i ++) {
    eSize[i] += speed[i];    //円のサイズを変化させる
    //もし円のサイズが最大値を超えたか最小値未満になったら、方向を変える
    if(eSize[i] > maxSize || eSize[i] < minSize) speed[i] = -speed[i];
    ellipse(100*i, height/2, eSize[i], eSize[i]);    //円を描く
  }
}