10：配列 p5.js JavaScript

配列は、共通の名前を共有する、変数のリストです。新しい名前を逐一作成せずに多くの変数が扱えるので非常に便利です。これにより、コードは短く読みやすくなり、更新も容易になります。

変数から配列へ

プログラムで１つか２つの物事を追跡したい場合には、配列を使う必要はありません。実際、配列の追加によってプログラムは必要以上に複雑になる恐れがあります。しかし、多くの要素(たとえばスペースゲームの星や視覚化するときの多くのデータポイント)を扱うときには、配列がコードを書きやすくします。

変数を多くする

「7_2：速度と方向 p5.js JavaScript」の「右に少しずつ移動する」サンプルはシェイプを１つだけ扱うときには問題ありませんが、２つの場合はどうすればよいのでしょう？　新しいx変数を作成してdraw()内で更新する必要があります。

let x1 = -20;
let x2 = 20;

function setup() {
    createCanvas(240, 120);
    ellipseMode(RADIUS);
    angleMode(DEGREES);
    noStroke();
}

function draw() {
    background(0);
    x1 += 0.5;
    x2 += 0.5;
    arc(x1, 30, 20, 20, 30, 330);
    arc(x2, 90, 20, 20, 30, 330);
}

変数をもっと多くする

上記コードはまだ管理できるでしょうが、円が５つ欲しいときにはどうしましょう？　変数を３つ追加すると、コードは次のようになります。

let x1 = -10;
let x2 = 10;
let x3 = 35;
let x4 = 18;
let x5 = 30;

function setup() {
    createCanvas(240, 120);
    ellipseMode(RADIUS);
    angleMode(DEGREES);
    noStroke();
}

function draw() {
    background(0);
    x1 += 0.5;
    x2 += 0.5;
    x3 += 0.5;
    x4 += 0.5;
    x5 += 0.5;

    arc(x1, 30, 10, 10, 30, 330);
    arc(x2, 50, 10, 10, 30, 330);
    arc(x3, 70, 10, 10, 30, 330);
    arc(x4, 90, 10, 10, 30, 330);
    arc(x5, 100, 10, 10, 30, 330);
}

コードの管理はそろそろ限界でしょうか。

変数ではなく配列を使う

円が５個や１０個でなく、3000個必要な場合を想像してみてください。これは、変数を3000個作り、それぞれを別々に更新する、ということです。これほど多くの変数が追跡できるでしょうか？　代わりに配列を使用します。

const x = [];

function setup() {
    createCanvas(240, 120);
    ellipseMode(RADIUS);
    angleMode(DEGREES);
    noStroke();
    fill(255, 200);
    for (let i = 0; i < 3000; i++) {
        x[i] = random(-1000, 200);
    }
}

function draw() {
    background(0);
    for (let i = 0; i < x.length; i++) {
        x[i] += 0.5;
        const y = i * 0.4;
        arc(x[i], y, 10, 10, 30, 330);
    }
}