2-5繰り返し

繰り返しは、プログラミングの必須知識です。アニメーション処理を書くためにも、繰り返しを理解することが必要です。完璧にマスターしましょう。


このページの内容

  1. 繰り返し処理のメリット
  2. 円の数を増やす。
  3. 繰り返し処理の文法
  4. 繰り返しの例
  5. 繰り返しを制御する変数の初期値を1にする
  6. 変数の増分を変える
  7. 円をたくさんかく
  8. 円をたくさんかく(失敗例)

繰り返し処理のメリット

2-5-a.png

上記のように三つの円をかくには、今までは円を描く処理を三度記述する必要がありました。円の数が三つくらいならまだしも、五つ六と増えたらどうでしょうか? それがさらに百、二百となったらどうでしょう? プログラムを書くのがとても大変です。そのプログラムのどこかにミスがあった際、それを見つけるのはウンザリするような作業です。さらに円の大きさを変えるといった修正が発生すると、すべてのコードが書き直しになります。「繰り返し処理」という技術を用いると、そういった問題を解決できます。
下記は、繰り返し処理を使わないで書いたコードです。

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;
} 

実行結果は、下記になります。

2-5-b.png

繰り返し処理の文法

まずは大勢を理解しましょう。大まかには、繰り返し処理の文法は下記のようになります。

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)の一行のみですが、複数行の処理を行うことも可能です。(波括弧とは「{」や「}」のことです。「{」をはじめ波括弧、「}」を終わり波括弧と呼びます)


繰り返しの例

2-5-c.png

println()は、丸括弧内の文字や変数の値をコンソールに出力します。文字列の場合は""でくくります。

println(変数);

println("文字列");

上記例では、println()という命令が三度繰り返されました。ではこれを五度繰り返すにはどうしたらよいでしょうか? 答えは簡単です。下記のようになります。

 for(int i=0;i<5;i++){
  println(i); //丸括弧の中身をコンソールに出力する
} 

この際、繰り返しを制御する変数iの値がどのように変化するかを確認しましょう。その答えはコンソールに出力されますが、「0,1,2,3,4」になります。


繰り返しを制御する変数の初期値を1にする

変数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(円の中心座標に用いる変数)の値を増やしていることです。円が重ならないようにするには、こういった処理が必要です。
実行結果は下記になります。

2-5-d.png

円をたくさんかく(失敗例)

やりがちな失敗例です。繰り返しのたびに円を描く位置を移動しないと、同じ場所に円が描かれてしまうため、見た目には繰り返しが行われたことがわかりません。

 size(550,100);
for(int i=0;i<10;i++){  //10回の繰り返しを行う
  ellipse(50,height/2,50,50);  //半径25の円をかく。中心のx座標を50で固定する。
} 

上記コードを実行すると、円を描く処理が10回繰り返されます。ただし下記結果のように、同じ場所に円が描かれてしまうため、それがわかりません。

2-5-e.png