[Processing×Java]   ループの使いかた

この記事はプログラムの構造をProcessingを通じて理解していくための記事です。
今回はループについて書いていきます。

![gradation01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/1f9768b6-fb64-d646-0345-200958364834.png)




目次
0.何のためにループを使うか
1.forループについて
2.ループを使ったプログラムの例

#0.何のためにループを使うか

**反復的な処理をまとめる**ために使う。
下のプログラムは、**1から10まで数の総和を効率的に求める**ためのプログラム。

```loop00.java
//変数 sum は求めたい総和
int sum = 0;

//1から10までiを1ずつ足していく。
for(int i = 1;i < 11;i++){
  //総和(新) = 総和(旧) + i
  sum = sum + i;
}

//総和をコンソールに表示する。
println(sum);
```
```
55
```



| i      |    sum   |   sum + i    |
|:------:|:--------:|:------------:|
| 1      |    1     |     0 + 1    |
| 2      |    3     |     1 + 2    |
| 3      |    6     |     3 + 3    |
| 4      |    10    |     6 + 4    |
| 5      |    15    |    10 + 5    |
| 6      |    21    |    15 + 6    |
| 7      |    28    |    21 + 7    |
| 8      |    36    |    28 + 8    |
| 9      |    45    |    36 + 9    |
| 10     |    55    |    45 + 10   |


**Point**　:
ループを使うためには、似たような反復動作の中から**共通の部分**(性質・法則)を見つけなければいけません！
つまり**どの部分を反復させるか**を見極める必要があります。



#1.forループについて

##forループ
forループはループをつくるための手段の1つです。
whileループとやることは変わらないですが、こちらの方がコンパクトでわかりやすいので、こちらを紹介していきます。

####◯線を繰り返し描いていくプログラム

```loop01.java
//画面の大きさを決定する。
size(500,250);
//線を20pxおきに配置する。
for(int i = 0;i < width;i += 20){
  line(i,0,i,height);
}
```
![loop03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/9b1dc0e8-82b4-2cbe-1a26-d1f8996c1abc.png)


**Point**　:　i < widthの範囲内で、(i,0)から、(i,height)に引いた直線を20pxおきに描いていくプログラム。

####○**forループの実行順番**(このプログラムで例えると...)

iの値は何ですか？　:　0です！
↓
iの値(=0)は　i < width　を満たしていますか？　:　True！
↓
処理の実行
↓
i += 20　しときますね！
↓
iの値は何ですか？　:　20です！
:
:
iの値は何ですか？　:　500です！
↓
iの値(=500)は　i < width　を満たしていますか？　:　False！(ループ終了)

**Point**　:　i += 20　は、i = i + 20　を略して書いたものです。




####○forループのイメージ
![スクリーンショット 2020-06-30 20.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/cdbc71f4-8608-7495-c5f9-a96acfa0bb24.png)

**Point**　:　**300円におさまるように遠足のお菓子を選んでいくあの感じ**に近いかもしれないです...



#2.forループを使ったプログラムの例

####◯線を少しずつずらしていくプログラム

```variable02.java
//画面の大きさを決める
size(500,500);
//背景の色を決める
background(0);

//i < widthを満たす間、iを10ずつ増やしていく。
for(int i = 0;i < width;i += 10){
  //線の色を決める
  stroke(53,183,193);
  //(0,i)から、(i,height)まで線を引く
  line(0,i,i,height);
}
```
![loop03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/0beb23e3-9367-1e4b-8cc8-311cecd9ab50.png)


**Point**　:　Processingの座標
![スクリーンショット 2020-06-30 20.42.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/c5b49bbe-01f7-0292-8efa-1bfd7bb9fee1.png)
画面下にいくほど、yの値が大きくなるのが特徴。


####◯ランダムに線を描いていくプログラム

```variable03.java
//画面の大きさを決める
size(500,500);
//背景の色を決める
background(0);

//i < widthを満たす間、iを1ずつ増やしていく。(500回繰り返す)
for(int i = 0;i < width;i += 1){
  //線の色を決める
  stroke(#640915);
  //ランダムな地点からランダムな地点まで線を描く
  line(random(500),random(500),random(500),random(500));
}
```
![loop10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/ce19c3f5-aa50-52a3-361c-7b04a640e6e0.png)

**Point**　:　random(min,max);
minからmaxまでの範囲のランダムな値を返す(出力する)。
minは省略可能。


**Point**　:　iが0,1,2,....498,499になるまでの間、つまり500回ループを繰り返す

**Point**　:　色は(R,G,B)のような選び方以外にも方法がある。
メニューバーの[ツール]→[色選択]→好きな色を選択









####◯ループとアニメーション

アニメーションをつくるには、draw()を使うのが効果的です。

```variable03.java
//円の大きさを表す変数sを自分で定義する
float s = 0;

//1回のみ繰り返す
void setup(){
  size(600,600);
  //デフォルトは毎秒60フレーム
  frameRate(10);
  background(0);
}

//無限ループ
void draw(){
  //サイズを1ずつ大きくしていく
  s += 1;
  //色の指定
  fill(random(255),0,255,50);
  noStroke();
  //ランダムな場所に円を配置していく
  ellipse(random(width),random(height),s,s);
  
  //もし、大きさが45より大きくなったら実行される
  if (s > 45) {
    //サイズを0に戻す
    s = 0;
  }
  
}
```
![スクリーンショット 2020-07-02 8.36.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/ffae9379-6270-36b7-eb65-14c2b1a7852d.png)


#最後に

読んでいただきありがとうございました。
より良い記事にしていくために御意見、ご指摘のほどよろしくお願いいたします。