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

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

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

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.");
}

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

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

.java

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

の部分。

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

最後に

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

※この記事は、ダニエルシェフマン氏のyoutube"Coding Train"を参考にしています。