Processing入門|配列について図を用いてわかりやすく解説

Processing
スポンサーリンク

「配列って何?」

「配列ってどんな時に使えばいいの?」

そんな疑問を持つ方に向けて、配列を使う理由や定義の仕方などを詳しく解説しています!

配列を使うときのテクニックなども説明しています!

スポンサーリンク

配列とは?

配列とは、たくさんの変数を一つずつ名前をつける必要がなく、たくさんのデータを取り扱うことのできるようにするものです。

イメージしやすく例えると、家に何人住んでいるのかをデータとして取り扱うとします。

すると、同じマンションに住んでいる人は同じマンションという配列のまとまりにして、その中で部屋ごとの人数を扱っているようなものです。

スポンサーリンク

配列を使う理由

たくさんのデータを一つの変数で取り扱えることにどのような利点があるのでしょうか。

例えば、このような場面を想像してみてください。

二匹の魚(三角形)が移動していくものを作るとき、以下のようなコードになると思います。

float x1=0;
float x2=20;

void setup(){
  size(300,300);
  noStroke();
}

void draw(){
  background(0);
  x1=x1+0.5;
  x2=x2+0.5;
  triangle(x1,50,x1-20,40,x1-20,60);
  triangle(x2,100,x2-20,90,x2-20,110);
}

実行してみると、このように描画されます。

これはx座標を変数とすることで魚を動かしています。また、変数に足す値を「0.5」から増やせば個々ごとに違った速さで動かすことができます。

では次に、20匹描画する場合はどうでしょうか。

変数が「x1」「x2」「x3」とたくさん用意していかなければなりません。

これではさすがに一つずつ書いていくとコード数が増えるし、見にくくなります。

そこで、配列を使うことによってシンプルに、コード数を短くできてとても見やすくなります。

float [] x=new float[20];

void setup(){
  size(300,300);
  noStroke();
  fill(255,200);
  for(int i=0; i<x.length;i++){
   x[i]=random(-100,100);
  }
}

void draw(){
  background(0);
  for(int i=0; i<x.length;i++){
    x[i]=x[i]+0.5;
    float y=i*10;
  triangle(x[i],y,x[i]-20,y-10,x[i]-20,y+10);
  }
}

下の図が実行結果になります。

配列の定義の仕方

まず、配列の定義の仕方を説明します。

配列は、

の形で書きます。

まず、変数を定義するときと同様に、変数の型を決めます。

そして、変数の名前を書いて、「new」と入れるのを忘れないようにしてください。

新しい変数を作っていくと覚えると、「new」と書くのを忘れにくくなると思います。

そして再び変数の型(先ほどと同じもの)を書いて、どれだけの数を扱いたいか、要素数を書きます。

先ほど紹介した魚を動かす例を出すと、

float [] x=new float[20];

「float」型で、変数の名前が「x」、要素数を「20」にしているのがわかります。

「x[0]」から「x[1]」「x[2]」と要素が作られています。

例えば、「x[5]」に「3」という値を入れたい時は、これまでと同様に

x[5]=3;

と書けば変数に値が入ります。

配列を使うときのテクニック:for文

配列は、「for文」と相性がよく、配列の添字を変化させていくことで繰り返し処理の中で配列の要素全てに値を入れていくことができます。

先ほどの魚を描画する例を見ると、

  for(int i=0; i<x.length;i++){
   x[i]=random(-100,100);
  }

このように、変数「i」が0からxの長さ、つまりxの要素数まで1ずつ増えていきます。

そして、「x[I]」と書くと、「x[0]」から順にランダムに、-100から100までの値がこの3行だけで入れることができます。

まとめ

今回は、たくさんの変数を一つずつ名前を付けなくても済むようになる配列というテクニックを紹介しました。

また、配列は「for文」と相性が良いことも解説しました!

次はアニメーション(図形の動かし方)について解説しているので、よかったらこちらもご覧ください。

Processing
スポンサーリンク
カンキリをフォローする
kankiriblog