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

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

高度な動画であれば出てくるtranslateとrotateを学ぶ

よくわからんが、頻出関数translate()とrotate()を学んだので、解説する。

前提

translate()やrotate（）を学ぶ前にProcessingに置ける座標の考え方をおさらいしておこう。Processingでは、以下のように左上をスタート地点として、x座標は右に、y座標は下に広がっていくイメージである。

translate()

translate()は、この基準とする（０、０）の位置をずらす。
イメージとしては以下のような感じになる.

基準点（０、０）の位置をずらすっていうイメージだろうか。

実際にソースコードと、できた絵をみてみよう。

sample.pde
void setup(){ 
  size(640, 640);
  background(0);
  stroke(255);
  noFill();
  circle(0,0,100);

  translate(320, 320);
  circle(0,0,100);

}

↓できた絵がこちら

左上がcircle(0,0,100);の実行結果、真ん中中央がtranslate(320, 320);circle(0,0,100);の実行結果である。

まぁこれだけであればCircle(320, 320, 100)でいいはず。
おそらくだがtranslateは、x座標、y座標をそこそこ計算すれば、不要だと思う。

rotate()

ただrotate()はそうも行かない。rotate()は座標の方向を回転させるからだ。

次回はrotate()の具体的な動き、そしてこんがらがった基準点の戻し方やってみようと思う。

では今日はこの辺で!