１４．図形を敷き詰めよう

１．図形を敷き詰める

繰り返しをうまく使うと、画面を画像で敷き詰める（しきつめる）ことができます。繰り返しの中に繰り返しを入れるというテクニックを使います。やや難しいので順を追って作ってみましょう。

出来上がり

四角形をランダムな色で敷き詰めるプログラムです。for文を２個使います。

void setup(){
    size(600,400);
}
void draw(){
    for(int x = 0; x < 6; x++){
        for(int y = 0; y < 4; y++){
            fill(random(255),random(255),random(255));
            rect(100*x, 100*y, 100, 100);
        }
    }
}

２．縦に並べてみる

このプログラムをゼロから書くのは難しいので、まず、縦に1列並べるところからやってみましょう。

void setup(){
    size(600,400);
}
void draw(){
    for(int y = 0; y < 4; y++){
        fill(random(255),random(255),random(255));
        rect(0, 100*y, 100, 100);
    }
}

このプログラムのfor文では、yの値が0から3まで変化して、そのたびにrect()が描く四角形の位置が変わります。どういうふうに変わるのかを表にするとこのようになります。

繰り返しの回数	yの値	rect()
1	0	rect(0, 0, 100, 100)
2	1	rect(0, 100, 100, 100)
3	2	rect(0, 200, 100, 100)
4	3	rect(0, 300, 100, 100)

このように、y座標が100ずつずれていくので、縦に100x100の四角が４つ並びます。

３．for文の中にfor文を書く

さきほどのやり方で、縦に4つの四角形が並んだので、これを全体に並べるには、縦に4つ並べるのを横方向にも繰り返せばよいことになります。なので、縦に4つ並べるfor文の外側にさらにfor文をつけて繰り返します。

// for文の部分だけ抜き出し
    for(int x = 0; x < 6; x++){
        for(int y = 0; y < 4; y++){
            fill(random(255),random(255),random(255));
            rect(100*x, 100*y, 100, 100);
        }
    }

今回、敷き詰める画面は横600ピクセル、縦400ピクセルの画面です。ここに縦100x横100の正方形を敷き詰めます。なので、横(x)方向に6回繰り返し、縦(y)方向に4回繰り返せばよいことになります。縦に4つ一列作るのを６回繰り返して24個の四角形を描いています。

24回の繰り返しで、変数xとyの値がどのように変化するかを表にすると以下のようになります。それぞれのrect()がどの部分の四角形に当てはまるのかを考えてみましょう。

回数	xの値	yの値	rect()
1	0	0	rect(0, 0, 100, 100)
2	0	1	rect(0, 100, 100, 100)
3	0	2	rect(0, 200, 100, 100)
4	0	3	rect(0, 300, 100, 100)
5	1	0	rect(100, 0, 100, 100)
6	1	1	rect(100, 100, 100, 100)
7	1	2	rect(100, 200, 100, 100)
8	1	3	rect(100, 300, 100, 100)
9	2	0	rect(200, 0, 100, 100)
10	2	1	rect(200, 100,100, 100)
11	2	2	rect(200, 200, 100, 100)
12	2	3	rect(200, 300, 100, 100)
13	3	0	rect(300, 0, 100, 100)
14	3	1	rect(300, 100, 100, 100)
15	3	2	rect(300, 200, 100, 100)
16	3	3	rect(300, 300, 100, 100)
17	4	0	rect(400, 0, 100, 100)
18	4	1	rect(400, 100, 100, 100)
19	4	2	rect(400, 200, 100, 100)
20	4	3	rect(400, 300, 100, 100)
21	5	0	rect(500, 0, 100, 100)
22	5	1	rect(500, 100, 100, 100)
23	5	2	rect(500, 200, 100, 100)
24	5	3	rect(500, 300, 100, 100)