[Processing×Java]   ループの使いかた2---入れ子構造,座標変換

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

![スクリーンショット 2020-07-03 16.03.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/793268a0-97bb-be80-31ff-7d61c0346c30.png)



目次
0.forループ




#0.forループ

##0-0. **forループと座標変換**
Processingでは、"**図形を描くときの基準点**"や"**座標そのもの**"を自分の都合のいいようにカスタマイズできます。
その際に、一緒に使われることが多いのがforループです。
以下ではforループを使った、座標変換について書いていきます。

###◯"図形"の基準点を移動するプログラム

```for00.java
size(500,500);
background(255);
//四角形の中心を基準にして図形を描けるようにする。
rectMode(CENTER);

//5回繰り返す(i = 0,1,2,3,4)
for(int i = 0;i < 5;i++){
  //四角形の辺の大きさを表すint型の変数 s を定義する。
  int s = 400 -i * 80;
  
  noFill();
  stroke(115,237,201);
  //枠線の太さを決める
  strokeWeight(3);
  //中心が(width/2,height/2)で、辺がsの四角形を描く。
  rect(width/2,height/2,s,s);
}
```
![rect0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/d892cefb-4c56-6d4e-0b1c-eeeb82d0c047.png)

**Point** : rectMode(CENTER)
これを使うと、**四角形の中心を基準**にして図形を描くことができます。
(デフォルトの基準点は、四角形の左上端)


###◯"座標"の基準点をずらすプログラム
次のプログラムでは、translate()を使って座標の中心を(width/2,height/2)にずらしています。
つまり、画面(Processingのウィンドウ)の中心の座標が(0,0)になったということです。

```for01.java
size(500,500);
background(255);
//座標の基準点(原点)を画面の中心(width/2,height/2)にずらす
translate(width/2,height/2);

//3回繰り返す
for(int i = 0;i < 3;i++){
  //TWO_PI/6 = 60度、ループの度に回転する
  rotate(TWO_PI/6);
  noFill();
  stroke(12,232,178);
  //画面の中心が(0,0)なので...
  ellipse(0,0,150,375);
}
```

![for00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/73c48249-01fb-921a-0c29-5720297fb7ef.png)

**Point** : translate();
座標の基準点をずらすための関数。
今回は基準点を画面の中央にずらした。

**Point** : rotate();
座標の基準点を軸に回転する。
今回は基準点が画面の中央なので、そこを軸に回転した。
引数は、**PI**や**TWO_PI**を使って指定する。

**Point** : TWO_PI
2π = 360度
ラジアン(孤度,radian)と呼ばれる形式で円弧の長さで角度を表現する。
半径1の単位円の円周の長さは、2 * π = 2π。
単位円の円弧2πは円１周分の角度 = 360度。


##0-1. **forループと入れ子構造**

###◯二重入れ子のプログラム
```for02.java
size(510,510);
background(255);
stroke(12,232,178);

//横の移動を5回繰り返す(i = 10,110,210,310,410)
for(int i = 10;i < width;i += 100){
  //縦の移動を5回繰り返す(j = 10,110,210,310,410)
  for(int j = 10;j < height;j += 100){
    fill(12,232,178,255-i * 0.5);
    rect(i,j,80,80);
  }
}
```
![for03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/f169f103-ba16-31aa-28c5-27e58e0ef560.png)


**Point** : プログラムの実行順番

このプログラムの場合は、1番左の列(の上から)から順番に実行されていきます。


つまり
**◯i = 10のとき**
　・j = 10 : 実行
　・j = 110 : 実行
　・j = 210 : 実行
　・j = 310 : 実行
　・j = 410 : 実行
**◯i = 110のとき**
　・j = 10 : 実行
　・j = 110 : 実行
　・j = 210 : 実行
　・j = 310 : 実行
　・j = 410 : 実行
**◯i = 210のとき**
　　　　:




###◯二重入れ子のプログラム(アニメーション)

```draw.java
//色を変化させたいので変数cを用意する
int c = 0;

void setup(){
  size(510,510);
}

//変数cを徐々にずらしていく。
void draw(){
  //横の移動を500回繰り返す(i = 0,1,2...508,509)
  for(int i = 0;i < width;i ++){
    //縦の移動を500回繰り返す(j = 0,1,2...508,509)
    for(int j = 0;j < height;j ++){
      stroke(c,255-j/2,i/2);
      //1ピクセルの点を描く
      point(i,j);
    }
  }
  //色を徐々に変えていく
  c += 10;
  //色を書き出す
  println(c);
  //もし変数cの値が255を超えたら
  if(c > 255){
    //cを0にする
    c = 0;
  }
}
//マウスが押されたときに1度だけ実行される
void mousePressed(){
  //マウスが押されたときのウィンドウをpng形式で保存する
  save("draw"+ c +".png");
  //画像が保存されましたと出力する
  println("picture is saved.");
}
```

![draw220.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/77e8882f-7375-0d35-7463-98e4f4b3ffa1.png)

![スクリーンショット 2020-07-03 21.45.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/78fe7c13-98f9-ae22-8e49-f4fb1df56d5d.png)

**Point** :save()
画像を保存することができる。
save("~.png");などという形で、名前と保存形式を""の中に書く。
保存した画像は、メニューバーの[スケッチ]から、[スケッチフォルダーを開く]で確認できる。


###◯三重入れ子のプログラム
```for03.java
size(510,510);
background(255);
noFill();
stroke(12,232,178);
//四角形の中心を基準に描けるようにする
rectMode(CENTER);

//5回繰り返す(i = 55,155,255,355,455)
for(int i = 55;i < width;i += 100){
  //5回繰り返す(j = 55,155,255,355,455)
  for(int j = 55;j < height;j += 100){
    //4回繰り返す(s = 10,30,50,70)ことで、四角形の1区画が完成する。
    for(int s = 10;s < 90;s += 20){
      //座標(i,j)で、辺の大きさsの正方形を描く
      rect(i,j,s,s);
    }
  }
}
```
![for.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/ecd42ba9-bea3-a794-6688-2ea811660a11.png)


**Point** :
マトリョーシカのような**大きさの異なる4つの四角形のかたまり**が

```.java
for(int s = 10;s < 90;s += 20){
      rect(,,s,s);
    }
```

の部分。

このかたまりを、並べていく(二重ループの時と同じ)。

























#最後に

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

※この記事は、ダニエルシェフマン氏のyoutube"[Coding Train](https://www.youtube.com/c/TheCodingTrain)"を参考にしています。