この記事はプログラムの構造をProcessingを通じて理解していくための記事です。
今回はループについて少しだけ詳しく書いていきます。
目次
0.forループ
0.forループ
0-0. forループと座標変換
Processingでは、"図形を描くときの基準点"や"座標そのもの"を自分の都合のいいようにカスタマイズできます。
その際に、一緒に使われることが多いのがforループです。
以下ではforループを使った、座標変換について書いていきます。
◯"図形"の基準点を移動するプログラム
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)になったということです。
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πは円1周分の角度 = 360度。
0-1. forループと入れ子構造
◯二重入れ子のプログラム
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のとき
:
◯二重入れ子のプログラム(アニメーション)
//色を変化させたいので変数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");などという形で、名前と保存形式を""の中に書く。
保存した画像は、メニューバーの[スケッチ]から、[スケッチフォルダーを開く]で確認できる。
◯三重入れ子のプログラム
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つの四角形のかたまりが
for(int s = 10;s < 90;s += 20){
rect(,,s,s);
}
の部分。
このかたまりを、並べていく(二重ループの時と同じ)。
最後に
読んでいただきありがとうございました。
より良い記事にしていくために御意見、ご指摘のほどよろしくお願いいたします。
※この記事は、ダニエルシェフマン氏のyoutube"Coding Train"を参考にしています。