クマさんや串焼きといったキャラクターを作り、動かす方法をすでに学びました。では、こういったものをたくさん同時に出力するにはどうすればいいでしょうか。クマさんにしても串焼きにしても、中心となる座標を変数に格納し、draw()の中でその値を少しずつ変えました。となると、たくさんのクマさんや串焼きを同時に動かすには、その中心となる座標を格納する変数もたくさん必要となるはずです。
たくさんの変数を使いたい場合、どうすればよいでしょうか? x1,x2,x3といったふうにひとつずつ変数を宣言する方法がありますが、このやり方では、三つくらいならよいですが、百や二百、あるいは一万、二万の変数が必要な場合、コードを書くのが大変です。このようなとき、配列を使うと大変便利です。配列は変数と同じくデータの入れ物です。たくさんのデータを扱うための仕組みであるという点で変数と異なるだけで「データの入れ物」という基本的な役割は変数と同じです。
変数を使うには、データ型と変数名を宣言する必要がありました。配列を使う際は、データ型と配列名を宣言することに加え、その配列で用いるデータの個数を確保する必要があります。
下記は三つの要素を持つ配列の宣言です。一行目では、int型の配列xを使うことを宣言しています。二行目では、int型のデータ領域を三つ分確保すると同時に、その確保した領域を配列xに割り当てる、ということをしています。配列を使うには、配列の型と配列名の宣言に加え、配列に用いるデータ領域の確保が必要ということです。
int[] x;
x = new int[3];
上記の二行の処理は、下記のようにして一行で済ませることもできます。
int[] x= new int[3];
配列を使用するためには、「データ領域の確保」ということを理解する必要はあまりありません。そういった点を意識せずに使えるように最近のプログラミング言語は進化しているからです。大事なのは配列の仕組みを理解することではなく、配列の使い方をマスターすることです。つまり、三つの要素のあるint型の配列を宣言するには上記のようにする、と覚えれば十分です。
下記が配列の使い方の例です。配列を宣言し、その配列にデータを入れ、さらにそれを表示しています。
int[] x= new int[3];
x[0] = 1;
x[1] = 2;
x[2] = 3;
println(x[0]);
println(x[1]);
println(x[2]);
配列の要素にアクセスする際、[](角括弧)の中の数値が0から始まることに注意してください。
三つの要素のある配列xを宣言した場合、x[0]、x[1]、x[2]と書くことで、それらの要素にアクセスできます。仮に百個の要素のある配列xを宣言した場合、それらの要素へのアクセスは、x[0]、x[1]、x[2]、x[3]、x[4],,,(省略),,,x[97]、x[98]、x[99]となります。
仮に下記のように書いた場合、五行目がエラーになります。確保していないデータ領域へとアクセスしようとしているからです。
int[] x= new int[3];
x[0] = 1;
x[1] = 2;
x[2] = 3;
x[3] = 4; //エラーになる行
下記に配列のイメージをかきます。(これは十個の要素のある配列のイメージです。int[] x = new int[10];で宣言できます)
十個の要素のある配列xのイメージ
配列を利用して、たくさんのクマさんを出力させてみましょう。しかしまずはおさらいもかねて、配列を使わずに、三つのクマさんを出力します。
int x1; //一つ目のクマさんで使う変数
int x2; //二つ目のクマさんで使う変数
int x3; //三つ目のクマさんで使う変数
void setup() {
size(800, 600);
x1=0;
x2=0;
x3=0;
}
void draw() {
background(200, 200, 200);
x1++;
x2+=2;
x3+=3;
kumasan(x1, height/2-100, 198, 59, 6); //一つ目のクマさんを出力する
kumasan(x2, height/2-50, 100, 200, 6); //縦にずらして、二つ目のクマさんを出力する
kumasan(x3, height/2, 30, 155, 200); //再び縦にずらして、三つ目のクマさんを出力する
}
/*
クマさんを出力する関数
centerX:顔の中心のx座標
centerY:顔の中心のy座標
red:毛皮の色の赤み
green:毛皮の色の緑の強さ
blue:毛皮の色の青み
*/
void kumasan(int centerX, int centerY, int red, int green, int blue) {
fill(red, green, blue); //毛皮の色
ellipse(centerX- 50, centerY -60, 60, 60); //左耳
ellipse(centerX+ 50, centerY -60, 60, 60); //右耳
fill(250, 111, 96); //ピンク
ellipse(centerX- 50, centerY -60, 30, 30); //左耳の内側
ellipse(centerX+ 50, centerY -60, 30, 30); //右耳の内側
fill(red, green, blue); //毛皮の色
ellipse(centerX, centerY, 150, 150); //顔
fill(0, 0, 0); //黒
ellipse(centerX- 20, centerY -20, 20, 40); //左目
ellipse(centerX+ 20, centerY -20, 20, 40); //右目
line(centerX- 20, centerY + 30, centerX+ 20, centerY + 30); //口
}
実行結果は下記のようになります。
では配列を使って、五つのクマさんを出力させてみましょう。変数x1、x2、x3の代わりに、五つの要素のある配列を使います。
int[] x;
void setup() {
size(800, 600);
x = new int[5];
for(int i=0;i<5;i++){
x[i]=0;
}
}
void draw() {
background(200, 200, 200);
x[0]++;
x[1]+=2;
x[2]+=3;
x[3]+=4;
x[4]+=5;
kumasan(x[0], height/2-100, 198, 59, 6);
kumasan(x[1], height/2-50, 100, 200, 6);
kumasan(x[2], height/2, 30, 155, 200);
kumasan(x[3], height/2+50, 30, 255, 200);
kumasan(x[4], height/2+100, 30, 155, 10);
}
/*
クマさんを出力する関数
centerX:顔の中心のx座標
centerY:顔の中心のy座標
red:毛皮の色の赤み
green:毛皮の色の緑の強さ
blue:毛皮の色の青み
*/
void kumasan(int centerX, int centerY, int red, int green, int blue) {
fill(red, green, blue); //毛皮の色
ellipse(centerX- 50, centerY -60, 60, 60); //左耳
ellipse(centerX+ 50, centerY -60, 60, 60); //右耳
fill(250, 111, 96); //ピンク
ellipse(centerX- 50, centerY -60, 30, 30); //左耳の内側
ellipse(centerX+ 50, centerY -60, 30, 30); //右耳の内側
fill(red, green, blue); //毛皮の色
ellipse(centerX, centerY, 150, 150); //顔
fill(0, 0, 0); //黒
ellipse(centerX- 20, centerY -20, 20, 40); //左目
ellipse(centerX+ 20, centerY -20, 20, 40); //右目
line(centerX- 20, centerY + 30, centerX+ 20, centerY + 30); //口
}
実行結果は下記のようになります。
配列の要素を増やすだけで、クマさんを百個でも二百個でも出力させられるようになります。これが配列の便利さです。