10_1:配列の作成 p5.js JavaScript

配列に含まれる各項目は要素と呼ばれ、要素はそれぞれ、配列内のその要素の位置を示すインデックス値を持ちます。キャンバスの座標と同じように、配列のインデックス値も0から数え始めます。たとえば、配列の最初の要素はインデックス値0を持ち、その次の要素はインデックス値1を持っています。配列に20個の値が含まれているとすると、最後の要素のインデックス値は19になります。数は配列yearsを例に、配列の概念的な構造を示しています。

const years = [1920, 1972, 1980, 1996, 2010];

配列の使用は1つの変数の扱いと似ています。xという名前の変数は次のコードで作成できます。

const x;

配列を作成するには、変数の値を空のブラケット([])に設定するだけです。

const x = [];

配列の長さを事前に宣言する必要はありません。長さは配列に入れる要素の数によって決まります。

配列には、すべてのデータ型(ブール値、数値、文字列など)を入れることができ、さまざまなデータ型の値を混在させることも可能です。

配列を作成して、値を入れる

まずsetup()の外で配列を宣言し、その後setup()の中で作成して値を入れます。x[0]は配列の1つめの要素を、x[1]は2つめの要素を参照します。

// 配列を宣言する
const x = [];

function setup() {
    createCanvas(200, 200);
    // 1つめの値を入れる
    x[0] = 12;
    // 2つめの値を入れる
    x[1] = 2;
    print(x); // [12, 2]
}

配列に1回で値を入れる

配列の作成時に値を入れることもできます。

// 配列を宣言する
const x = [12, 2];

function setup() {
    createCanvas(200, 200);
    print(x); // [12, 2]
}

draw()内での配列の作成は避けるようにします。なぜなら毎フレーム、新しい配列を作成すると、フレームレートがスローダウンするからです。

「変数を多くする」サンプルを見直す

10:配列 p5.js JavaScript」の「変数を多くする」サンプルを配列を使って書き直します。

const x = [-20, 20];

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

function draw() {
    background(0);
    // 1つめの要素を大きくする
    x[0] += 0.5;
    // 2つめの要素を大きくする
    x[1] += 0.5;
    arc(x[0], 30, 20, 20, 30, 330);
    arc(x[1], 90, 20, 20, 30, 330);
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA