Processing【8日目】配列

インスタなどショート動画で数学的に美しい映像を見て、自分も作ってみたいと思うようになりました。
そこで調べてみるとProcessingというプログラミング（？）をすることで作れそうでした。
そこで今回から英語の勉強と、文章を書く練習としてProcessingの英語の公式サイトを訳していこうと思います。

7割翻訳、3割感想や自分なりの解説を目指します。
今回の参考ページは以下になります。

Arrays

How to store and access data in array structures.

配列

配列はデータの型の１つです。
複数並んでこそ意味のあるデータを並べるのが得意です。

例えば

日々の株価
クラスのみんなのテストの点数
フォントの一覧

などなど

processingでの配列とfor文

processingで棒グラフのようなものを作ってみましょう。

まずは配列というデータ型を使わずにやってみます。

int x0 = 50; 
int x1 = 61; 
int x2 = 83; 
int x3 = 69; 
int x4 = 71; 
int x5 = 50; 
int x6 = 29; 
int x7 = 31; 
int x8 = 17; 
int x9 = 39; 
fill(0); 
rect(0, 0, x0, 8); 
rect(0, 10, x1, 8); 
rect(0, 20, x2, 8); 
rect(0, 30, x3, 8); 
rect(0, 40, x4, 8); 
rect(0, 50, x5, 8); 
rect(0, 60, x6, 8); 
rect(0, 70, x7, 8); 
rect(0, 80, x8, 8); 
rect(0, 90, x9, 8);

全く同じ棒グラフを、配列とfor文を使って書いたものがこちらです。

int[] x = { 50, 61, 83, 69, 71, 50, 29, 31, 17, 39 }; 

fill(0); // Read one array element each time through the for loop 
for (int i = 0; i < x.length; i++) { 
 rect(0, i*10, x[i], 8);
}

同じグラフが出てくるなら短い行で書けるようになった方が効率的ですよね。

作例

公式サイトのコードに日本語のコメントを書いておきます。

実際にそれぞれの環境で実行してみてください。

float[] sineWave; // 配列sineWaveを宣言

void setup() { 
 size(100, 100); // ウィンドウサイズを設定
 sineWave = new float[width]; // sineWave配列をウィンドウの幅分の大きさで初期化
 
 for (int i = 0; i < sineWave.length; i++) { // sin()から値を取得して配列に入れる
  float r = map(i, 0, width, 0, TWO_PI); // sin()関数に使う値をマッピング
  sineWave[i] = abs(sin(r)); // sin()の絶対値を配列に格納
 } 
} 

void draw() { 
 for (int i = 0; i < sineWave.length; i++) { // 配列から読み込んだ値でストロークの色を設定
  stroke(sineWave[i] * 255); // sin()の結果に255をかけてストロークの輝度を調整
  line(i, 0, i, height); // 横線を引く
 }
}

int[] y; // 配列yを宣言

void setup() { 
 size(100, 100); // ウィンドウサイズを設定
 y = new int[width]; // 配列yをウィンドウの幅分の大きさで初期化
} 

void draw() { 
 background(204); // 背景色をグレーに設定

 // データの上書きを避けるため、配列を後ろから読み込む
 for (int i = y.length-1; i > 0; i--) { 
  y[i] = y[i-1]; // 配列の要素を一つずつ後ろにずらす
 } 

 // 新しい値を配列の先頭に追加
 y[0] = mouseY; // mouseYの値を配列の先頭に格納

 // 各ペアの値を線として表示
 for (int i = 1; i < y.length; i++) { 
  line(i, y[i], i-1, y[i-1]); // 前の値と現在の値を結んで線を引く
 } 
}

二次元配列

二次元の配列はintの後の[]を二つにするだけです。

二次元の配列を使う例としては。

クラスのみんなの数学と英語の点数
二社の株価の推移を比べる

int[][] x = { {50, 0}, {61,204}, {83,51}, {69,102}, {71, 0}, {50,153}, {29, 0}, {31,51}, {17,102}, {39,204} }; 

void setup() { 
 size(100, 100); 
} 

void draw() { 
 for (int i = 0; i < x.length; i++) { 
  fill(x[i][1]); 
  rect(0, i*10, x[i][0], 8); 
 } 
}