1b-07 配列を使う

配列とは番号の付いた変数。1つの名前の変数で複数の値を持つことができる。

配列を使わないプログラムと配列を使ったプログラムの比較

5つの点A,B,C,D,Eを順に直線で結ぶ

配列を使わないプログラム（変数を使わない）

void setup() {
  size(100, 100);
  noLoop();
}

void draw() {
  // 5つの点A,B,C,D,Eを順に直線で結ぶ
  beginShape(); 
  vertex(50, 18); //点Aの座標を指定
  vertex(29, 82); //点Bの座標を指定
  vertex(83, 43); //点Cの座標を指定
  vertex(17, 43); //点Dの座標を指定
  vertex(71, 82); //点Eの座標を指定
  endShape(CLOSE);
}

配列を使わないプログラム（変数を使う）

void setup() {
  size(100, 100);
  noLoop();
}

void draw() {
  int x0 = 50, y0 = 18; //点Aのx座標, y座標
  int x1 = 29, y1 = 82; //点Bのx座標, y座標
  int x2 = 83, y2 = 43; //点Cのx座標, y座標
  int x3 = 17, y3 = 43; //点Dのx座標, y座標
  int x4 = 71, y4 = 82; //点Eのx座標, y座標
  // 5つの点A,B,C,D,Eを順に直線で結ぶ
  beginShape();
  vertex(x0, y0);
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  vertex(x4, y4);
  endShape(CLOSE);
}

配列を使ったプログラム

void setup() {
  size(100, 100);
  noLoop();
}

void draw() {
  int[] x = {50, 29, 83, 17, 71}; //点A,B,C,D,Eのx座標
  int[] y = {18, 82, 43, 43, 82}; //点A,B,C,D,Eのy座標
  // 5つの点A,B,C,D,Eを順に直線で結ぶ
  beginShape();
  for (int i = 0; i < x.length; i++) {
    vertex(x[i], y[i]);
  }
  endShape(CLOSE);
}

• プログラムが短くシンプルに
• 点の数を増やしたいとき、プログラムの書き換えが簡単

配列宣言

• 《配列データ型》[] 《配列の名前》　例）int[] x
• 《配列データ型》[] 《配列の名前》 = new 《配列の設定》　例）int[] x = new int[5]

配列への代入

• 一度にまとめて　例）x = {50, 29, 83, 17, 71}
• 個別に: x[0] = 50, x[1] = 29, x[2] = 83, x[3] = 17, x[4] = 71　※0番目から始まることに注意

length 配列の長さ

• 上記サンプルで、x.length は 5 となる

配列の使い方1 「過去のデータを記憶する」

int length = 50; //配列の個数
int[] x = new int[length]; //x座標を記録する配列
int[] y = new int[length]; //y座標を記録する配列

void setup() {
  size(800, 600);
  smooth();
  frameRate(60);
}

void draw() {
   background(204); //画面をリセット
  //配列を参照して円を描画する
  for(int i=0 ; i < length ; i++) {
    fill(i * 3);
    ellipse(x[i], y[i], i, i);
  }
}

//マウスが動いたときの処理：マウスの座標を記録する
void mouseMoved() {
  //配列の値をひとつ後ろへ移動する
  for(int i = length - 1 ; i >= 1 ; i--) {
    x[i] = x[i-1];
    y[i] = y[i-1];
  }
  x[0] = mouseX;
  y[0] = mouseY;
}

配列の使い方2 「複数の動きを処理する」

int length = 20;
float[] x = new float[length];
float[] speed = new float[length];

void setup() {
  size(400, 400);
  for (int i = 0; i < length; i++){
    x[i] = width / 2;
    speed[i] = random(-1, 1);
  }
}

void draw() {
  background(204);
  for (int i = 0; i < length; i++){
    x[i] = x[i] + speed[i];
    rect(x[i], (height / length) * i, 10, 10);
  }
}

※ 上のプログラムは、以下のプログラムを応用したもの

float x;
float speed;

void setup() {
  size(400, 400);
  x = width / 2;
  speed = 1;
}

void draw() {
  background(204);
  x = x + speed;
  rect(x, height/2, 10, 10);
}

配列の使い方3 「用意したデータを選ぶ」

String[] message = {"how","are","you?","I","am","fine","thank","you!"};
PFont font;
int count = 0;

void setup(){
  size(400, 400);
  colorMode(HSB, 100);
  background(99);
  font = loadFont("sample.vlw");
  textFont(font);
  textAlign(CENTER);
  frameRate(3);
}

void draw() {
  background(99);
  fill(random(100), 99, 99);
  text(message[count], width/2, height/2);
  count++;
  count %= message.length;
}

練習

• 「おみくじ」を作る