Processingで模様を描く(2)　模様の移動

前回のランダムな模様を描くコードを改良して、模様が動くようにします。

前回は、タイムフレームごとに画面全体がまったく異なる模様になるようになっていました。今回は、右から左へ模様が流れていくようにします。
今回は、一つ前のフレームでどの画像が使われたかを記憶しておく必要があります。そのために、二次元配列を使いましょう。

二次元配列は、以下のように宣言できます（10 × 10 マスの場合）。この状態だと初期値として 0 が入力されます。

int[][] map = new int[10][10];

以下のように、あらかじめ初期値を設定しておくこともできます。

int[][] map = {{0,0,0,0,0,0,0,0,0,0},
　　　・・・この間に8行・・・
　　　　　　　{0,0,0,0,0,0,0,0,0,0}};

ですが、上記はちょっと冗長ですね。初期値が同じ値（例えば 1 ）であれば、setup() の中でfor文を使って以下のように初期化することもできます。
この場合は、2つ前のサンプルコードのような宣言をはじめにしておきます。

for(int i = 0; i<10; i++){
  for(int j = 0; j<10; j++){
    map[i][j] = 1;
  }
}

さて、この後、どのようにすればいいでしょうか。ためしに以下のような流れでコーディングしてみましょう。

<setup() 内>
(1)　それぞれのマスに、画像の数（7）と同じ、7種類の値（0 ~ 6）を代入しておく

<draw() 内>
(2)　配列内の値に応じて画像を表示させる
(3)　マスの値（ map[Y][X] ）が一つ左（ map[Y][X-1] ）に移動するようにする。つまり、マスの値を左のマスに代入する
（この時、配列の値からはみ出てしまわないように注意。例えば、map[0][-1] のような領域は存在しない。）
(4)　一番右側の値を更新する

というわけで、以下のようになりました。（”20″ という値が何度も出てくるので、MASという変数を作りました）

int MAS = 20;
int[][] map = new int[MAS][MAS];
PImage[] E;
int X, Y, num;
void setup(){
  size(400,400);
  background(255);
  E = new PImage[10];
  E[0] = loadImage("01.jpg");
  E[1] = loadImage("02.jpg");
  E[2] = loadImage("03.jpg");
  E[3] = loadImage("04.jpg");
  E[4] = loadImage("05.jpg");
  E[5] = loadImage("06.jpg");
  E[6] = loadImage("07.jpg");
  frameRate(4);
  //　(1)　0から6の初期値を入力
  for(Y = 0; Y < MAS; Y++){
    for(X = 0; X < MAS; X++){
      num = int(random(7));
      map[Y][X] = num;
    }
  }
}

void draw(){  
　//　(2)　配列内の値に応じて画像を表示
  for(Y = 0; Y < MAS; Y++){
    for(X = 0; X < MAS; X++){
      image(E[map[Y][X]], X*MAS, Y*MAS);
    }
  }
　//　(3)　マスの値の移動
  for(Y = 0; Y < MAS; Y++){
    for(X = 1; X < MAS; X++){
      map[Y][X-1] = map[Y][X];
    }
  }
　//　(4)　一番右側の値を更新
  for(int i = 0; i < MAS; i++){
    num = int(random(7));
    map[i][MAS-1] = num;
  }
  
}

画像にしても分かりにくいのですが、模様が右から左へと移動していきます（右の画像から左の画像へ）。