繰り返し
プログラムの中には、同じことを、パラメータを少しづつ変えながら実行することが多々あります。例えば、p5.jsでは複数の円や図形を位置や大きさを変えながら描いたり、それらを同時に動かしたりするときに使います。
JavaScriptには３種類の繰り返しがあります。最初はどれか一つを覚えて使いこなせるようにしましょう。
https://scrapbox.io/files/61ef62eaebeebe001fda0314.svg
code:loop01.js
'use strict'
function setup() {
createCanvas(600, 400);
colorMode(RGB,255,255,255,1);
background(240)
/*
for の繰り返し、tを0に初期化、t<width がtrueならブロックを実行、そうでなければブロックの次へ進む
ブロック：(t,0) から (t+100,200)に線を描く
tの値に40を加えて t に保存し、for の条件式に戻る
*/
for(let t=0; t<width ; t += 40){
line(t,0,t+100,200);
}
/*
while の繰り返し、kを100に初期化、k<width がtrueならブロックを実行、そうでなければブロックの次へ進む
ブロック：中心(k,200)に直径40の円を描く
kの値に40を加えて k に保存する
while の条件式に戻る
*/
let k=100;
while(k<width){
circle(k,200,40);
k += 40;
}
}
描画の結果
https://scrapbox.io/files/61fe24c45eb788001efd10e8.png
https://scrapbox.io/files/61ef62d8ebeebe001fda0232.svg
下のプログラムは、上のwhileループとほぼ同じように見えますが、条件の判定位置が異なります。つまり、下の do while の繰り返しでは、条件を判定せずに必ず1度はブロックを実行します。一方、上のwhileの繰り返しでは、最初に条件を判定するので、最初の判定で条件が false の場合はブロックを一度も実行せずにブロックの次に進みます。
code:ex_loop01.js
let k = 100;
do {
circle(k,200,40);
k += 40;
} while (k<width);
非常に重要なこと
繰り返しの条件となっている変数（ここでは、tとかk ）はブロックの中で不変とならないこと。そうなると条件式の値が変わらないので、無限ループとなってコンピュータは反応しなくなります。
注意事項：もし、無限ループに入り、コンピュータを制御できなくなった場合は、しばらく待ってください。p5エディタは応答していませんとポップアップメニューが出てくるので、そこで冷静にページを離れる をクリックしてください。ただし、その時はプログラムは消えますので、必ず実行する前に保存する癖をつけてください。
繰り返しループの中に、さらに繰り返しループを入れる事もできます。
例題 lineアニメーション
code:line_ex01.js
'use strict'
let x=0;// x をだんだん右に移動する
function setup() {
createCanvas(600, 400);
colorMode(RGB,255,255,255,1)
}
function draw() {
background(220);
stroke('red')
let y=0;
do {
line(x,0,y,height)
y += 10;
} while(y<width)
// ｘを増やして、始点を移動する
x += 1;
// マウスの位置をxの始点にする
// x = mouseX;
}