第11回 – for loop(繰り返し処理) 3


さて、前回はrandomとforを使って、大量の円を画面いっぱいに描く、というのをやりました。

しかし、聡明なる読者の皆さまのことでありますから、こう思ったに違いありません。

「あれ?このforとかいうやつ、ランダムに描く時にしか使えない事ない……???」

そんなことはありません。forを使って任意の位置に円を沢山描く方法はいくつか存在します。
いくつか存在しますが、今回はそのうちの一つ、変数 i を使う方法をご紹介します。
今後「配列」や「動的配列」、「class」などを学習すれば、さらにfor loopの使い方は広がるのですが、今回はその最初の一歩です。

for loopの変数 i を使って円を並べよう

では、さっそく具体的な方法を見ていきましょう。

void setup(){

  size(600, 600);
  background(0);
  
  for(int i = 0;i<10;i++){
    
    ellipse(i*50,100, 50, 50);
  }

}

 

sketch_160809a_と_Update

最もシンプルなのがこの形です。

左端の円が半分はみ出していますが、円そのものは綺麗に横に並んでいます。

何が起こっているのか少し解りにくいので、for loop内で起こっていることを順番に書いてみます。

//1周目
void setup(){

  size(600, 600);
  background(0);
  
  for(int i = 0;i<10;i++){
    
    ellipse(i*50,100, 50, 50); 
    //1周目は、iが0なので、実際には
    // ellipse(0*50,100, 50, 50)が実行される
    //*は✕(かける)と同じ意味なので、0✕50が行われて、0になる。
    //つまり、1周めに実行されるのは
    // ellipse(0,100, 50, 50)という命令
  }

}
 
//2周目
void setup(){

  size(600, 600);
  background(0);
  
  for(int i = 0;i<10;i++){
    
    ellipse(i*50,100, 50, 50); 
    //2周目は、iが1なので、実際には
    // ellipse(1*50,100, 50, 50)が実行される
    //*は✕(かける)と同じ意味なので、1✕50が行われて、50になる。
    //つまり、2周めに実行されるのは
    // ellipse(50,100, 50, 50)という命令
  }

}
 
//3周目
void setup(){

  size(600, 600);
  background(0);
  
  for(int i = 0;i<10;i++){
    
    ellipse(i*50,100, 50, 50); 
    //3周目は、iが2なので、実際には
    // ellipse(2*50,100, 50, 50)が実行される
    //*は✕(かける)と同じ意味なので、2✕50が行われて、100になる。
    //つまり、2周めに実行されるのは
    // ellipse(100,100, 50, 50)という命令
  }

}

…という風に、iが0〜9になるまで実行されます。
0〜10ではないのは、指定が

i<10

10より小さいだからです。
この指定の部分を、 i <= 10 にすれば、0〜10まで合計11回実行されます。 が、10と書いてあるのに11回実行されてしまい、少し解りにくいので、常に iと指定回数の間は < と書くようにした方が良いでしょう。 しかし、この方法では円が半分表示されなくなってしまっています。 そこで、円を全体的に右側にずらしてやる必要があります。

方法はいくつかありますが、最も単純なのはこのような方法でしょう。

void setup(){

  size(600, 600);
  background(0);
  
  for(int i = 0;i<10;i++){
    
    ellipse(i*50 + 100,100, 50, 50); 
    
    //i * 50の後の + 100 で、全ての円の位置を100だけ右にずらす
    //四則演算は、 *(かける)や/(割る)が実行された後に +(足す) や -(引く)が実行されます。
    //普通の算数のルールと一緒ですね!
  }

}

他にも、

	for(int i = 1;i<=11;i++){
	ellipse(i*50 + 100,100, 50, 50); 
}

という風に、iを最初0でない値から始めるという方法があります。

この方法は一見とても正しいように見えますが、実はあまり使わないほうが良いです。
理由は「配列のindexが0から始まるから」なのですが、また配列を紹介する時に説明します。
今は「iを0から始める方法は採用しない方が無難」とだけ覚えておいてください。

少し長くなってしまいましたが今回はここまで。
次回はfor loopの中で条件分岐をする、をやります!
ただの組み合わせですが、重要なテクニックです。

それでは!