Color & Rotate

前回、色を変えていくのに便利な演算子％を見つけたところで終わりました。
今回はこれを使って当初やりたかったものを作っていこうと思います。

P3D

レンダラー(renderer)
P2D, P3D, PDF の３種類から選択できる。
P3Dを選択することによって３Dの描画表現ができるようになります。

そもそもレンダラーって何？

to render 〜にする、描写する　と言うのが単語自体の意味らしいです。

レンダリング (コンピュータ) - Wikipedia

用は入れたデータを指定した表現方法で出力することらしいです。（あまり最初の理解から深まってはいない）

rotate

この関数は座標系を回転させることができます。数値は回転角（ラジアン）を指定します。回転の中心は常に(0, 0)になります。

座標が０ってことはこう言うことになります。片隅で回られても全然面白くないですよね。そこで次のtranslateを使うと便利になります。

translate

元々の原点(0, 0)を任意の座標に移動させて、そこを原点とすることができます。
例えば左上でくるくるしているものを画面の中心で回したい時は中心である幅の半分（width/2)、高さの半分(height/2)にするとそこが中心となります。

void setup(){
 size(800, 600);
}
float angle = 0;
void draw(){
 translate(width/2, height/2);
 rotate(angle);
 rect(-100, -25, 200, 50);
 angle += 0.1;
 
}

 Rotate&Translate

この二つは直感的に理解できました。ただ順番は少し気をつけなければいけません。上記のコードの順番を逆にすると違ったものになります。rotateの位置をtranslateより前に持ってきました。

void setup(){
 size(800, 600);
}
float angle = 0;
void draw(){
 rotate(angle);
 translate(width/2, height/2);
 rect(-100, -25, 200, 50);
 angle += 0.1;
}

画面の外を回って帰ってきてます。
translate とrotateの場所は求める結果によって変わるので注意が必要。
あとrotateを使用する際は必ず描画の前にすること。
まず回転してそれから描く
紙を回転させてから、描く。描いてから紙を回してもProcessing上では同じ結果にならないので、こちらも注意が必要です。あ、紙の表現だと誤解が出そうですね。あくまでも座標系の回転。座標系を動かしてから、描画する。描画した後に座標系だけ変えてもその後の図形に影響するだけですね。

void setup(){
 size(800, 600);
}
void draw(){
  translate(400, 300);
  rect(-100, -50, 200, 100);
  rotate(QUARTER_PI);
  rect(-100, -50, 200, 100);
}

二回目のrectは同じパラメーターにも関わらず、rotateの後にきているため、二つ目の四角はQUARTER_PI分傾いた形になっています。

本題

まずは３Dで四角形がくるくるするやつを作ってみましょう。

void setup(){
 size(800, 600,P3D);
 noStroke();
}

float angleX =0;

void draw(){
 background(128);
 translate(width/2, height/2);
 rectMode(CENTER);
 
 rotateX(angleX);
 
 rect(0, 0, 200, 200);
 angleX +=0.1;
  
}

まずはX軸だけでくるくるさせてみましょう。rotateXというのはX軸での回転を指定できます。同じようにY, Zも可能です。基本はrotateと同じ。

ではこれに色の変化をつけてみましょう。

void setup(){
 size(800, 600,P3D);
 noStroke();
}

float angleX =0;

void draw(){
 background(0);
 translate(width/2, height/2);
 rectMode(CENTER);
 
 rotateX(angleX);
 
 fill((angleX*10)%256, 50, 180);
 rect(0, 0, 200, 200);
 angleX +=0.1;
 

}

RectP3D - OpenProcessing

角度の変化に合わせて変化する色ですが、0.1ずつ増えると変化がわかりずらいので10倍にしました。

突然のOpenProcessing導入

いろいろ調べていたら、ブログに埋め込む形でコードをそのまま表示できるサイトを発見しました。これまではgifを作っていたのですが、試行錯誤の過程をその都度記録して作成するのは面倒だったのでこれは便利！

でも埋め込みができない！

なので現状はリンクになってます。誰か教えてください。。。。埋め込みできません。と出てきてしまいます。まぁひとまずはリンクでやっていこうと思います。
ちょっと前進！

Rect XYZ - OpenProcessing

３軸でゆらゆらしながら色が変わり続けるものが作れました！
これにて任務完遂！
（色は確かに変わってるけど、なんかあんまりピンとこない色。。。。次はこの色の変化も調整していきたい。。。。）

次回はこれを発展させてマウスに連動させたものを作りたいと思います。