プレゼンテーション法 » 第4回：Processing入門(3)：配列、ループ、3D導入

<< 第３回：Processing入門（２）：アニメーションを作る | top | 第5回：pushMatrix()とpopMatrix()、3Dのアニメーション >>

第4回：Processing入門(3)：配列、ループ、3D導入

今日の講義は、データの集合を扱うためのデータ構造である「配列」について学びます。また、いままでは平面(2D)の中での表現でしたが、さらに奥行を加えた3Dの表現について学びます。

配列を使う

配列(array)とは？

配列（はいれつ、Array）は、プログラミング言語の用語。データ構造の一つ。配列はデータの集合であり、添え字でインデックスされたものを指す。古典的言語では、同じデータ型の集合だが、モダンなプログラミング言語では異なった型も許す。(wikipedia「配列」より抜粋)

わかりやすく表現すると、「情報を番号で整理したロッカー」のようなもの。

配列の模式図

配列のイメージ：6つのint型データの箱(= データを格納する領域)を作成している

配列を何故使うのか？

プログラムで似たような構造や情報の型をもったデータを複数必要なケースに多く遭遇する。例えば、ボールがバウンドするプログラムを作成する場合、１つのボールであれば、今までのように個別に変数を指定すればよい。しかし、いくつものボールが同時に画面内でバウンドするプログラムを作成しようと思うと、全てに個別にパラメータを指定するのは大変になる。こうした際に、配列(Array)は活躍する。配列を使うことで似たようなタイプの変数をまとめて保存しておくことが可能となる。

Processingでの配列の生成、値の参照

初期化(最初に配列の領域を宣言する)

配列の型[] 配列の名前 = new 配列の型[配列の数];

(例) int number[] = new int[100];

配列の値の参照

配列の名前[番号];

(例) number[10] = 1;

配列のサンプル1

//箱の数を指定
int num = 8;
//箱の幅
int cellsize;

//箱のx座標のためのint型の配列(x[0],x[1],x[2]...)を箱の数だけ作成
int[] x = new int[num];

void setup() {
    size(200,200);
    noStroke();
    cellsize = width/num;
    //箱のx座標を計算
    for (int i = 0; i < num; i++) {
	x[i] = int(width/num*i);
    }
}

void draw() {
    background(64);
    for (int i = 0; i < num; i++) {
	fill(i*(255/num));
	rect(x[i],75,cellsize,50);
    }
}

配列(2)：2次元配列

2次元配列とは、縦横の2次元で配列を考えるものです。イメージ的には表のようなものだと考えられます。

二次元配列

2次元配列のイメージ：6 x 3のint型データの表を作成している

2次元配列を用いた表現

int num = 10;
int cellsize;

int[] x = new int[num];
int[] y = new int[num];

void setup() {
    size(200,200);
    stroke(128);
    cellsize = width / num;
    for (int i = 0; i < num; i++) {
	x[i] = int(width/num*i);
	y[i] = int(height/num*i);
    }
}

void draw() {
    background(64);
    for (int i = 0; i < num; i++) {
	for (int j = 0; j < num; j++) {
	    fill(i*(255/num), j*(255/num), 128);
	    rect(x[i],y[j],cellsize,cellsize);
	}
    }
}

配列を用いて、複数の物体を同時にアニメーションさせる

int MAX = 20;
int[] xspeed = new int[MAX];
int[] yspeed = new int[MAX];
int[] x = new int[MAX];
int[] y = new int[MAX];
int[] r = new int[MAX];

void setup() {
    size(200,200);
    framerate(30);
    smooth();
    noStroke();   
    fill(64,64,255,100);  
    //initialize all arrays
    for (int i = 0; i < MAX; i++) {
        xspeed[i] = int(random(-4,4));
        yspeed[i] = int(random(-4,4));
        x[i] = int(random(width));
        y[i] = int(random(height));
        r[i] = int(random(10,40));
    }
}

void draw() {
    background(32);
    for (int i = 0; i < MAX; i++) {
        ellipse(x[i],y[i],r[i],r[i]);               
        x[i] = x[i] + xspeed[i];
        y[i] = y[i] + yspeed[i];
        if ((x[i] > width) || (x[i] < 0)) {
            xspeed[i] = xspeed[i] * -1;
        }
        if ((y[i] > height) || (y[i] < 0)) {
            yspeed[i] = yspeed[i] * -1;
        }
    }
}

配列を用いて、複数の物体を同時にアニメーションさせる(2)

int MAX = 20;
int[] xspeed = new int[MAX];
int[] x = new int[MAX];
int[] w = new int[MAX];
color[] col = new color[MAX];
void setup() {
    size(200,200);
    noStroke();
    framerate(30);
    //initialize all arrays
    for (int i = 0; i < MAX; i++) {
        xspeed[i] = int(random(-4,4));
        w[i] = int(random(width/4,width));
        x[i] = int(random(-w[i],width));
        col[i] = color(random(255),random(255),random(255),50);
    }
}
void draw() {
    background(0);                 
    for (int i = 0; i < MAX; i++) {
        fill(col[i]);  
        rect(x[i],0,w[i],height);               
        x[i] = x[i] + xspeed[i];
        if ((x[i] > width) || (x[i]+w[i] < 0)) {
            xspeed[i] = xspeed[i] * -1;
        }
    }
}

3Dの描画イントロダクション

3次元空間の座標

２次元座標と３次元座標

奥行を表現する座標軸zが加わる。

先週の復習、2D形状の回転と移動

float i = 0.0;

void setup() {
    size(200,200);
    framerate(30);
    smooth();
    stroke(128);
    fill(98);
    rectMode(CENTER); 
}
void draw() {
    background(32);
    translate(width/2,height/2);
    rotate(i);
    rect(0,0,width/2,height/2);
    i += 0.05;
}

rectMode関数で四角形の中心を描画の原点に
translate関数で中央に移動
rotate関数で回転

3D座標軸での移動

float i=0.0, z=0.0;

void setup() {
    size(200,200,P3D);
    framerate(30);
    stroke(128);
    fill(98);
    rectMode(CENTER); 
}
void draw() {
    background(32);
    z = 80*sin(i);
    translate(width/2,height/2,z);
    rect(0,0,width/2,height/2);
    i += 0.1;
}

3D座標軸での回転

float z=0.0, i = 0.0;

void setup() {
    size(200,200,P3D);
    framerate(30);
    stroke(128);
    fill(98);
    rectMode(CENTER);
}

void draw() {
    background(32);
    float z = sin(i)*80.0;
    translate(width/2,height/2,z);
    rotateX(i);
    rotateY(i*1.5);
    rect(0,0,width/2,height/2);
    i += 0.1;
}

3D図形の描画

float xspeed,yspeed,zspeed;
float x,y,z,r;
float theta;
void setup() {
    size(200,200,P3D);
    framerate(30);
    xspeed = 3.0; yspeed = 1.0; zspeed = 3.0;
    x = width/2.0; y = height/2.0; z = 0.0;
    r = 100.0;
    theta = 0.0;
    stroke(255,255,255,50);
    fill(64,64,255,50);
    lights(); 
    translate(x,y,z);
}
void draw() {
    background(32);
    translate(x,y,z);
    rotateX(theta);
    rotateY(theta*1.5);
    box(r);
    x = x + xspeed;
    y = y + yspeed;
    z = z + zspeed;
    theta += 0.01;
    if ((x > width) || (x < 0)) {
        xspeed = xspeed * -1.0;
    }
    if ((y > height) || (y < 0)) {
        yspeed = yspeed * -1.0;
    }
    if ((z > 10) || (z < -100)) {
        zspeed = zspeed * -1.0;
    }
}

<< 第３回：Processing入門（２）：アニメーションを作る | top | 第5回：pushMatrix()とpopMatrix()、3Dのアニメーション >>