通常、配列の要素数はnew int[10]などのように始めに決めることになっています。しかし、実はこのやり方だと、最初にどのぐらい必要かわからない時には不便です。
例えば、ユーザのインタラクション次第でどんどん増やせると便利そうです。
実はみなさんがすでに学習した配列でも、プログラムの実行中に増やすことが可能です。1次元配列のサンプルを書き換えてみましょう。
すでに作成した拡大縮小する円をマウスクリックで増やし、キーボードを押して削除していくサンプルです。
ポイントは、
append()で配列の要素をその最後尾に追加し、shorten()で配列の最後尾から一つ減らすということです。
float[] x = {}; // 円のx座標
float[] y = {}; // 円のy座標
float[] size = {}; // 円のサイズ
float[] speed = {}; // 円の拡大・縮小スピード
void setup() {
size(400, 400);
noStroke();
fill(0, 127);
}
void draw() {
background(255);
for (int i = 0; i < x.length; i++) {
// 円のサイズを変える
size[i] += speed[i];
// 大きすぎる、または小さすぎる場合は向きを反転
if (size[i] > 100 || size[i] < 1) {
speed[i] *= -1;
}
// 円を描く
ellipse(x[i], y[i], size[i], size[i]);
}
}
void mousePressed() {
// クリックした場所に円を追加
x = append(x, mouseX);
y = append(y, mouseY);
size = append(size, random(1, 100));
speed = append(speed, random(0.1, 2));
}
void keyPressed() {
// 円が1個以上あるときだけ、最後の円を削除
if (x.length > 0) {
x = shorten(x);
y = shorten(y);
size = shorten(size);
speed = shorten(speed);
}
}このappend()、shorten()を使うと、ユーザがインタラクションする限りいくらでも配列の要素を増やすことができます。マウスの軌跡を記録する1次元配列のサンプルを拡張してみましょう。
float[] x = {}; // 円のx座標
float[] y = {}; // 円のy座標
float[] size = {}; // 円のサイズ
int counter = 0; // 何番目の円を描くか
void setup() {
size(400, 400);
background(255);
noStroke();
}
void draw() {
// 透明な白を重ねて、少しずつ軌跡を消す
fill(255, 10);
rect(0, 0, width, height);
// マウスを押していないときだけ、記録した点を順番に描く
if (x.length > 0 && !mousePressed) {
fill(0);
ellipse(x[counter], y[counter], size[counter], size[counter]);
counter++;
// 最後まで行ったら最初に戻る
if (counter >= x.length) {
counter = 0;
}
}
}
void mousePressed() {
background(255);
// 配列を空にする
x = new float[0];
y = new float[0];
size = new float[0];
counter = 0;
}
void mouseDragged() {
// マウスの座標を記録する
x = append(x, mouseX);
y = append(y, mouseY);
// マウスの移動スピードを円のサイズにする
size = append(size, dist(mouseX, mouseY, pmouseX, pmouseY) * 2);
}