ProcessingでVJ素材を作るブログ　第四回 translateとrotate( ii )

1830 ワード
processing processing テキストリンク

rotate()を使ってみる

前回に引き続き基準点の移動について記載してみよう。
rotate()は軸を基準点から時計回りで傾ける関数だ。
中に入る引数はPI＝１８０°として、PI/６などで表す。
前回触ったtranslate（）を用いて、一回基準点を画面中央にして、軸をずらしてみよう。

sample.pde

void setup(){ 
  size(640, 640);
  background(0);
  stroke(255);


  translate(width/2,height/2 );

  fill(0);
  rect(100,0,100,30);
  rotate(PI/6);

  fill(30);
  rect(100,0,100,30);
  rotate(PI/6);

  fill(60);
  rect(100,0,100,30);
  rotate(PI/6);

  fill(90);
  rect(100,0,100,30);
  rotate(PI/6);

  fill(120);
  rect(100,0,100,30);
  rotate(PI/6);

  fill(150);
  rect(100,0,100,30);
  rotate(PI/6);

}

できた画像がこちら

全て同じ
rect(100,0,100,30);
なのに、徐々に傾いていってる。

これを応用すれば、ロード画面の動画はお手の物な訳で

sample.pde
  int num = 0;
  int numm;

void setup(){ 
  size(640, 640);
  background(0);
  stroke(255);
  frameRate(10);
}

void draw(){
  background(0);
  numm = num % 12;
  translate(width/2, height/2 );
  rotate(-PI/2+(PI /6)*numm);
  fill(numm * 10);
  rect(100,0,100,30);
  num++;
}

こんな感じ。
一定数超えたら初期値に戻す処理は、if使ってもいいけど、
最近数学にハマってる僕は、あまり使いたくなったのでそちらを採用。
rotateの中身に-PI/2入れているのは、最初スタートする位置を12時にしたかったからですね。

基準値の話はあと一回だけ続きます。

ではではー