[9日目] "配列"ってなんだろう？

はじめに
私たちStudy-Gazerは、あくまでも「processing」というツールを通して
読者の皆様が「プログラミングのイメージをつかむこと」や「楽しみながらプログラミングの基礎を学んでいくこと」を目的としています．

これまで、私たちは「変数」を様々な場面で使ってきました！
ですが、レベルが上がるにつれて複雑なコードを書くようになり、
たくさんの変数を使うこともあるでしょう．
そんなときの「短縮化」するための手段の一つとして
「配列」というものがあります．

１．「配列」について知ろう！

まず、[6日目]”動き”を加えたプログラムを作ろう！でやったような図形がひたすら右に進むようなコードを書いてみましょう！今回は自転車が進んでいくコードを書いていきます！

int x = -120;
int y = 150;
int x2 = -110;
int y2 = 300;

void setup(){
 size(900,500);
}

void draw(){
background(255);

//bycycle_1
x+=5;
//bycycle tire
strokeWeight(2);
fill(255);
ellipse(x-62,y, 82,82);
ellipse(x+90, y, 80,80);
//bicycle frame
strokeWeight(4);
noFill();
line(x+50,y-97, x+70,y-95);
line(x+70,y-95, x+90,y);
triangle(x-60,y, x+15,y, x+70,y-65);
line(x+15,y, x,y-60);
line(x-13,y-62, x+10,y-60);

//bycycle_2
x2+=4;
//bycycle tire
strokeWeight(2);
fill(255);
ellipse(x2-62,y2, 82,82);
ellipse(x2+90, y2, 80,80);
//bicycle frame
strokeWeight(4);
noFill();
line(x2+50,y2-97, x2+70,y2-95);
line(x2+70,y2-95, x2+90,y2);
triangle(x2-60,y2, x2+15,y2, x2+70,y2-65);
line(x2+15,y2, x2,y2-60);
line(x2-13,y2-62, x2+10,y2-60);
}

上記のコードは自転車が２台でしたが、次は自転車が５台のコードを書いていきましょう！

int x = -120;
int y = 120;
int x2 = -130;
int y2 = 250;
int x3 =-140;
int y3 = 380;
int x4 = -150;
int y4 = 510;
int x5 = -110;
int y5 = 700;

void setup(){
size(1200,800);
}

void draw(){
background(255);

//bycycle_1
x+=5;
//bycycle tire
strokeWeight(2);
fill(255);
ellipse(x-62,y, 82,82);
ellipse(x+90, y, 80,80);
//bicycle frame
strokeWeight(4);
noFill();
line(x+50,y-97, x+70,y-95);
line(x+70,y-95, x+90,y);
triangle(x-60,y, x+15,y, x+70,y-65);
line(x+15,y, x,y-60);
line(x-13,y-62, x+10,y-60);

//bycycle_2
x2+=4;
//bycycle tire
strokeWeight(2);
fill(255);
ellipse(x2-62,y2, 82,82);
ellipse(x2+90, y2, 80,80);
//bicycle frame
strokeWeight(4);
noFill();
line(x2+50,y2-97, x2+70,y2-95);
line(x2+70,y2-95, x2+90,y2);
triangle(x2-60,y2, x2+15,y2, x2+70,y2-65);
line(x2+15,y2, x2,y2-60);
line(x2-13,y2-62, x2+10,y2-60);

//bycycle_3
x3+=6;
//bycycle tire
strokeWeight(2);
fill(255);
ellipse(x3-62,y3, 82,82);
ellipse(x3+90, y3, 80,80);
//bicycle frame
strokeWeight(4);
noFill();
line(x3+50,y3-97, x3+70,y3-95);
line(x3+70,y3-95, x3+90,y3);
triangle(x3-60,y3, x3+15,y3, x3+70,y3-65);
line(x3+15,y3, x3,y3-60);
line(x3-13,y3-62, x3+10,y3-60);

//bycycle_4
x4+=5;
//bycycle tire
strokeWeight(2);
fill(255);
ellipse(x4-62,y4, 82,82);
ellipse(x4+90, y4, 80,80);
//bicycle frame
strokeWeight(4);
noFill();
line(x4+50,y4-97, x4+70,y4-95);
line(x4+70,y4-95, x4+90,y4);
triangle(x4-60,y4, x4+15,y4, x4+70,y4-65);
line(x4+15,y4, x4,y4-60);
line(x4-13,y4-62, x4+10,y4-60);

//bycycle_5
x5+=7;
//bycycle tire
strokeWeight(2);
fill(255);
ellipse(x5-62,y5, 82,82);
ellipse(x5+90, y5, 80,80);
//bicycle frame
strokeWeight(4);
noFill();
line(x5+50,y5-97, x5+70,y5-95);
line(x5+70,y5-95, x5+90,y5);
triangle(x5-60,y5, x5+15,y5, x5+70,y5-65);
line(x5+15,y5, x5,y5-60);
line(x5-13,y5-62, x5+10,y5-60);
}

自転車の数が２台から５台になった分、
上記のコードでは「変数」の数がその分増えました．

では次は、自転車の数を１００台にしてみるとなるとどうでしょうか？
正直、面倒ですよね...
でも「配列」を使ったコードにすると以下のようになります！
（下の画像は動きません…）

float[] x = new float[100]; //変数の要素（100台の自転車）を用意

void setup(){
size(1800,1500);
//iの数が100未満のとき、xの値を-1500～0のランダのどれかにする
//i = 自転車の台数
for(int i = 0; i<x.length;i++){  //x.length = 100
 x[i] = random(-1500,0);
 }
}

void draw(){
background(255);
//iの数が100未満のとき、xのスピードを3.5にする
for(int i = 0; i<x.length;i++){
 x[i] += 3.5;
//それぞれの自転車のｙの値を設定
 float y = i*10;
//以下 自転車の図形の設定
//bycycle tire
strokeWeight(2);
fill(255);
ellipse(x[i]-62,y, 82,82);
ellipse(x[i]+90, y, 80,80);
//bicycle frame
strokeWeight(4);
noFill();
line(x[i]+50,y-97, x[i]+70,y-95);
line(x[i]+70,y-95, x[i]+90,y);
triangle(x[i]-60,y, x[i]+15,y, x[i]+70,y-65);
line(x[i]+15,y, x[i],y-60);
line(x[i]-13,y-62, x[i]+10,y-60);
 }
}

２．「配列」の作り方

つまり「配列ってどんなものなの？」と思った方もいらっしゃるでしょう．ですのでここでは「分かりやすい配列の説明」と「配列の作り方」についてやっていこうと思います！

・つまり「配列」って？？
簡単に言うと、配列とは変数という「コードを収納する段ボール箱」を「格納するタンス」の役割をもつものです！

＋α（プラス アルファ）
・「length」について
「length」は配列の長さを求めるときに使うもので「width」や「height」に似ています．変数の「要素の数」が「length」の値になり「○○ . length」のように使います．
（○○に配列名を入れ lengthの前に「. (ドット)」を置く）
※上記の配列を使ったコードでlengthを使っているの見てみて下さい．

・「配列」を作るには？？
配列は以下のような手順で作ることができます．

１．「配列」を作るには まず使うデータ型を定義すると同時に配列を宣言する必要があります．これはvoid setup( )の前で行います．

int[] x;    //データ型（int）を定義＆配列を宣言する．

POINT!! 　 「それぞれの違いに注目！」
「変数」として宣言：　int x ;
「配列」として宣言：　int[ ] x ;

２．その次は、配列の「生成」と「要素の数（変数を格納する場所の数）」を定義をします．また、これはvoid setup( )の中で行います．

int[] x;

void setup(){
    size(500,500);
    x = new int[3];    //newで配列を生成する指令を出す．
                       //[]内に これから作る 配列の「要素の数」を入力する．

「new」というのが配列を生成するためのコードです！
int[ ] x は「xは配列だよー！」という宣言をしただけなので、newを入力しなければ配列は作れません．

３．最後に、それぞれの要素の中に値を代入していきます．

int[] x;

void setup(){
    size(500,500);
    x = new int[3];
    x[0] = 9;     //1つ目の要素に９を代入する．
    x[1] = 10;    //2つ目の要素に１０を代入する．
    x[2] = 15;    //3つ目の要素に１５を代入する．
}

POINT!! 　 「要素に代入するときの注意点！」
要素の数は「０」から始まります．
例えば、要素の数を３つにした場合は０を含む
「０」「１」「２」の３つになるということです．

・「配列」の作り方（省略ver.）
次は省略化された「配列」の作り方についてやっていきましょう！

上記のように、配列を宣言するときに 生成から代入まで済ませることも可能です．

例えば こんな感じで使います！

float[] x = {-10,610,-20};
 
void setup(){
 size(600,300);
 noStroke();
 fill(255,255,0);
}

void draw(){
 background(0);
 x[0] += 3;
 x[1] -= 3;
 x[2] += 5;
 arc(x[0],50, 80,80, 0.5,5.7);
 arc(x[1],150, 80,80, 3.7,TWO_PI+2.5);  //TWO_PI ＝ 360度
 arc(x[2],250, 80,80, 0.5,5.7);
}

４．コードを書いて復習しよう！

では最後に、今日やったことを自分で好きなコードを書くことで復習しましょう！

［練習］次のルールに従って、好きなコードを書こう！

ルール
・「配列」を使ったコードを書くこと．
・可能なのであれば「length」を使ったコードにすること．

よろしければ、この記事のコメント欄に
そのコードを見せていただけると嬉しいです！
素晴らしい作品は後ほど紹介させていただきます！

さいごに

今回は「配列」についてやりました！
プログラミング学習をするうえで「配列」は難所の一つであり、ここで
あきらめてしまう人も多々います．ですが、私たちの今回の投稿を通して
少しでも楽しみながら「配列」について学べたのならうれしいです！

今回も見ていただき、ありがとうございました！
これからも一緒に楽しくプログラミングの基礎を学んでいきましょう！