for

繰り返し回数が既知の場合にコードブロックを繰り返す方法。

forループは、特定の回数だけ文を繰り返すのに役立ちます。 例えば、forループを使えば、「5本の線を描く」というアイデアを 次のように簡単に表現できます：

for (let x = 10; x < 100; x += 20) {
  line(x, 25, x, 75);
}

ループのヘッダーはforキーワードで始まります。ループは一般的に 繰り返し（反復）の際にカウントアップまたはカウントダウンします。括弧内の文 let x = 10; x < 100; x += 20は、ループがどのように繰り返すべきかを指示します：

• let x = 10は、ループに10からカウントを開始し、 変数xを使って反復を追跡するよう指示します。
• x < 100は、ループに100まで（100は含まない）カウントアップするよう指示します。
• x += 20は、ループに各反復の終わりに20ずつカウントアップするよう指示します。

中括弧{}の間のコードがループの本体です。ループ本体内の文は ループの各反復中に繰り返されます。

誤って無限ループを作成してしまうことがよくあります。これが起こると、 スケッチが応答しなくなり、ウェブブラウザが警告を表示する場合があります。 例えば、以下のループはカウントアップしないため、決して停止しません：

for (let x = 10; x < 100; x = 20) {
  line(x, 25, x, 75);
}

文x = 20は変数xを20に固定し続けるため、 常に100未満となります。

forループはカウントダウンすることもできます：

for (let d = 100; d > 0; d -= 10) {
  circle(50, 50, d);
}

forループは他のループを含むこともできます。以下のネストされたループは 点の格子を描画します：

// 左から右へループ
for (let x = 10; x < 100; x += 10) {

  // 上から下へループ
  for (let y = 10; y < 100; y += 10) {
    point(x, y);
  }

}

forループは配列の要素を反復処理するのにも役立ちます。 例えば、描画する場所や内容に関する情報を含む配列を反復処理するのは一般的です：

// x座標の配列を作成
let xCoordinates = [20, 40, 60];

for (let i = 0; i < xCoordinates.length; i += 1) {
  // 要素を更新
  xCoordinates[i] += random(-1, 1);

  // 円を描画
  circle(xCoordinates[i], 50, 20);
}

配列の値が変更されない場合、for...of文を使用してコードを 簡略化できます。これはPythonのforループやC++およびJavaのfor-each ループに似ています。以下のループは同じ効果があります：

// forループを使用して円を描画
let xCoordinates = [20, 40, 60];

for (let i = 0; i < xCoordinates.length; i += 1) {
  circle(xCoordinates[i], 50, 20);
}

// for...of文を使用して円を描画
let xCoordinates = [20, 40, 60];

for (let x of xCoordinates) {
  circle(x, 50, 20);
}

上記のコードスニペットでは、変数iとxは異なる役割を持っています。

最初のスニペットでは、iは0から2までカウントします。 これはxCoordinates.lengthより1小さい値です。iは インデックスiでxCoordinatesの要素にアクセスするために使用されます。

2番目のコードスニペットでは、xはループの進行や インデックスを追跡していません。各反復で、xはxCoordinatesの 次の要素を含みます。xはxCoordinatesの先頭（20）から 始まり、次の反復で値を40、そして60に更新します。