第9回(配列1)

一次元配列

配列

公式ドキュメント/配列

配列は同じ種類のデータを複数まとめて格納できる型です.整数(int)の配列,少数(float)の配列,文字列(string)の配列,色(color)の配列など,さまざまな型の配列を作ることができます.


配列の作り方

配列を使うには, 宣言・生成・代入 の3つの手順が必要です.

配列を宣言する

int 型を例に説明します.

Processingに以下を宣言したいとき:

  • Aという名前の変数を使います.
  • Aはint型の配列です.

次のように書きます:

int[] A;
コードの説明

コードの意味は,左から

  • int: 配列に入れるデータの型を指定します
  • []: 配列であることを示します
  • A: 名前(自由に決めることができます)

配列を生成する

配列の宣言だけでは,まだ配列そのものは作られていません.

次のように書くことで新しく配列を生成できます.

A = new int[5];
コードの説明
  • new: 新しく配列を生成します
  • int: 配列に入れるデータの型を指定します
  • [5]: 要素数が5個であることを示します

ちゃんと配列が生成されたかを次で確認できます.

println(A);
[0] 0
[1] 0
[2] 0
[3] 0
[4] 0

配列にデータを代入する

配列を生成すると,データを入れる場所が用意されます.この時点では, A は5個の int 型のデータを入れることができる配列です.

配列それぞれの場所には番号が振ってあります.この番号を インデックス(index) といいます.インデックスを使って次のように値を代入します.

A[0] = 11;
A[1] = 5;
A[2] = 79;
A[3] = 35;
A[4] = 82;
コードの説明
  • A[0]: 配列Aのインデックス0の場所を示します

5つの場所すべてに画像のようにデータを入れてみてください.

配列の作り方を以下にまとめます.

int[] A; // 配列の宣言
A = new int[5]; // 配列の生成
A[0] = 11;  // 以下配列の代入
A[1] = 5;
A[2] = 79;
A[3] = 35;
A[4] = 82;

配列の作り方:応用

配列の宣言と生成を同時に行う

上記のコードは次のようにも書くことができます.一行で書けるので便利です.

int[] A = new int[5]; // 配列の宣言と生成
A[0] = 11; // 配列の代入
A[1] = 5;
A[2] = 79;
A[3] = 35;
A[4] = 82;

配列の宣言・生成・代入を同時に行う

上記のコードは次のようにも書くこともできます.

int[] A = {11, 5, 79, 35, 82}; // 配列の宣言と生成

配列の操作

Aを配列とします.

書き方 意味
A.length 配列の長さを調べる
sort(A) 配列を昇順orアルファベット順に並べ替える
reverse(A) 配列の順番を反転する
append(A, 値) 配列の末尾に値を追加した配列を作る
shorten(A) 最後の要素を取り除いた配列を作る
subset(A, 開始インデックス, 個数) 配列の一部を取り出す

配列の各要素には 0,1,2,... とインデックスがついています.一方,for文やwhile文は変数の値を 0,1,2,... と順番に変化させることができます.

そのためfor文やwhile文と組み合わせると便利です.

for文と配列

int[] A = {11, 5, 79, 35, 82};
for(int i = 0; i<A.length; i++){
    println(A[i]);
}
11
5
79
35
82

while文と配列

int[] A = {11, 5, 79, 35, 82};
int i=0;
while(i<A.length){
  println(A[i]);
  i++;
}
11
5
79
35
82

color型の配列

以下のようにcolor型の配列が使えます.

color[] colors;
void setup(){
  size(600,600);
  colors = new color[5];
  for(int i=0; i<colors.length; i++){
  colors[i] = color(int(random(256)),int(random(256)),int(random(256)));
  fill(colors[i]);
  ellipse(100*i+100, height/2, 50,50);
 }
}

本日の課題

課題1:配列-基礎5

異なる型の配列を組み合わせたプログラムを実装してください:

  • 月〜金の曜日名を格納した String[] 型の配列 days を作成してください
  • 各曜日の気温(10〜30度のランダムな整数)を格納する int[] 型の配列 temperatures を作成してください
  • 「〇曜日の気温は〇度です」という形式でコンソールに表示してください
月曜日の気温は23度です
火曜日の気温は28度です
水曜日の気温は15度です
木曜日の気温は30度です
金曜日の気温は27度です

課題2:配列-応用6

課題1のプログラムを拡張します.

  • 500×300のウィンドウを作成してください
  • 月〜金の各曜日の気温(10〜30度のランダムな整数)を配列に格納してください
  • 各曜日の気温を棒グラフで描画してください
    • 棒の幅は40,高さは `気温 × 5` とし,下端(y=height-50)から上に伸びるようにしてください
    • 棒の下に曜日名,棒の上に気温を表示してください
  • x軸・y軸を描画してください

課題3:配列-応用9

4個の整数値を要素に持つ配列から様々な統計量を求めるプログラムを実装してください

  • 要素数4の配列には1〜99のランダムな整数を格納してください
  • 合計・平均・最大値・中央値を求め,コンソールに表示してください
  • 各要素が平均以上か平均未満かを判定して表示してください

できた人は中央値について,配列の要素数が奇数でも偶数でも同一のプログラムで実装できるように工夫してください.

配列の合計は181
配列の平均値は45
1番目の要素は90で平均以上です
2番目の要素は26で平均未満です
3番目の要素は32で平均未満です
4番目の要素は33で平均未満です
配列の最大値は90
配列の中央値は32.5

課題4: 配列-応用7

複数の配列を使って,5つの円が独立して左右に跳ね返るアニメーションを実装してください:

  • 600×400のウィンドウを作成してください
  • x座標・向き・色をそれぞれ要素数5の配列で管理してください
  • 各円の初期x座標(100から80ピクセル間隔),向き(1),ランダムな色を設定してください
  • 5つの円を異なるy座標(80から60ピクセル間隔)に描画し,各円が独立して左右の壁で跳ね返るようにしてください

課題5: 配列-応用8

上述の課題4を拡張し,縦線のゾーンに応じて円の色が変わるアニメーションを実装してください:

  • 縦線をそれぞれランダムな色で100ピクセル間隔に描画してください
  • 各円は,いずれの縦線にも触れていないときは黒で描画してください
  • 各円が縦線に触れているときは,その縦線の色で描画することしてください.
    • ただし,画面端の x=0 および x=width における色の変化は,実装してもしなくてもよいです.実行例では, x=width では色が変化し,x=0 では黒のまま.