繰り返しは、プログラミングの必須知識です。アニメーション処理を書くためにも、繰り返しを理解することが必要です。完璧にマスターしましょう。
上記のように三つの円をかくには、今までは円を描く処理を三度記述する必要がありました。円の数が三つくらいならまだしも、五つ六と増えたらどうでしょうか? それがさらに百、二百となったらどうでしょう? プログラムを書くのがとても大変です。そのプログラムのどこかにミスがあった際、それを見つけるのはウンザリするような作業です。さらに円の大きさを変えるといった修正が発生すると、すべてのコードが書き直しになります。「繰り返し処理」という技術を用いると、そういった問題を解決できます。
下記は、繰り返し処理を使わないで書いたコードです。
size(200,100);
ellipse(width/2-50,height/2,50,50);
ellipse(width/2,height/2,50,50);
ellipse(width/2+50,height/2,50,50);
繰り返し処理を用いると、下記になります。この例ではコード量が二行ほど増してしまいますが、円の数が百や二百、あるいは一万、二万と増えた場合はこのほうが断然コード量が減ります。修正や変更も容易です。
size(550,100);
int x = 50;
for(int i=0;i<3;i++){
ellipse(x,height/2,50,50);
x += 50;
}
下記は、円を三個から十個に増やす場合のコードです。上記コードとの違いは、三行目の「i <3」が「i<10」になっただけです。
size(550,100);
int x = 50;
for(int i=0;i<10;i++){ //変更箇所
ellipse(x,height/2,50,50);
x += 50;
}
実行結果は、下記になります。
まずは大勢を理解しましょう。大まかには、繰り返し処理の文法は下記のようになります。
for( 繰り返し回数を定める処理 ){
繰り返し行う処理
}
下記はその具体例です。
for(int i=0;i<3;i++){
println(i);
}
では細かく説明します。forからはじまる丸括弧の中には、セミコロンで句切られた三つの処理「int i=0」「i<3」「i++」があります。これによって、繰り返し回数を定めることができます。
「int i =0;」はint型の変数iを宣言し、その初期値に0を代入するという意味です。「<」は不等号記号で、「小なり」と呼びます。「i<3」は、「どのようなときに繰り返処理を行うか」を定めています。「i++」は「繰り返し処理のたびに、iの値が一つ大きくなる」ことを定めています。そのためfor(int i=0;i<3;i++)というのは、「変数iの初期値を0とし、繰り返し処理のたびにその値を1ずつ増やし、iの値が3未満のときに繰り返し処理を行う」という意味になります。
この場合の繰り返し回数は三回になります。変数iが0のとき、1のとき、2のときで合計3回です。
波括弧に囲まれた部分に、繰り返し行う処理を記述します。上記例ではprintln(i)の一行のみですが、複数行の処理を行うことも可能です。(波括弧とは「{」や「}」のことです。「{」をはじめ波括弧、「}」を終わり波括弧と呼びます)
println()は、丸括弧内の文字や変数の値をコンソールに出力します。文字列の場合は""でくくります。
println(変数);
println("文字列");
上記例では、println()という命令が三度繰り返されました。ではこれを五度繰り返すにはどうしたらよいでしょうか? 答えは簡単です。下記のようになります。
for(int i=0;i<5;i++){
println(i); //丸括弧の中身をコンソールに出力する
}
この際、繰り返しを制御する変数iの値がどのように変化するかを確認しましょう。その答えはコンソールに出力されますが、「0,1,2,3,4」になります。
変数iの初期値は0でなくても構いません。1にした場合、繰り返しを制御する変数iがどのように変化するかを確かめましょう。
for(int i=1;i<5;i++){
println(i); //丸括弧の中身をコンソールに出力する
}
上記例の場合、何度の繰り返処理が行われるでしょうか? また、変数iの値はどのように変化するでしょうか? 答えは「四回の繰り返処理が行われ、変数iは「1,2,3,4」と変化する」です。 では、変数iの初期値を1とした場合、五回の繰り返処理を行うにはどうしたらよいでしょうか?
for(int i=1;i<6;i++){
println(i); //丸括弧の中身をコンソールに出力する
}
上記がその答えです。
この場合、変数iの値は「1,2,3,4,5」と変化します。コンソールで確かめましょう。
上記例では、繰り返しのたびに変数iの値を1ずつ大きくしました。この値は自由に変更することができます。下記では、変数の増分を2としました。
for(int i=0;i<11;i+=2){
println(i);
}
この場合、コンソールには「0,2,4,6,8,10」が出力されます。繰り返しのカイスは、6回になります。
変数iの値は増やすだけでなく、減らすこともできます。下記では、「i++」を「i--」に変更しました。これで繰り返しのたびに変数iが1ずつ減ります。ついでに変数iの初期値を10とし、繰り返しの条件は「i>-1」(i大なり-1)とします。これでカウントダウンができます。
for(int i=10;i>-1;i--){
println(i);
}
上記を実行すると、コンソールには「10,9,8,7,6,5,4,3,2,1,0」と出力されます。
再び円を出力する例です。
size(550,100);
int circleX; //x軸の円の中心座標を格納する変数
circleX = 50; //circleXに50を代入する
for(int i=0;i<10;i++){ //10回の繰り返しを行う
ellipse(circleX,height/2,50,50); //半径25の円をかく。中心のx座標にcircleXを用いる
circleX += 50; //繰り返しのたびにcircleXの値を50ずつ大きくする。(円を横にずらす)
}
このコードのポイントは、繰り返しのたびにcircleX(円の中心座標に用いる変数)の値を増やしていることです。円が重ならないようにするには、こういった処理が必要です。
実行結果は下記になります。
やりがちな失敗例です。繰り返しのたびに円を描く位置を移動しないと、同じ場所に円が描かれてしまうため、見た目には繰り返しが行われたことがわかりません。
size(550,100);
for(int i=0;i<10;i++){ //10回の繰り返しを行う
ellipse(50,height/2,50,50); //半径25の円をかく。中心のx座標を50で固定する。
}
上記コードを実行すると、円を描く処理が10回繰り返されます。ただし下記結果のように、同じ場所に円が描かれてしまうため、それがわかりません。