0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-09

##pushMatrix()とpopMatrix()
前回までで基準点の移動、基準座標の傾きを見てきました。

さらっと見た感じ基準点の移動は、引数の計算で代替えきくのでは?とか思ったりしますが、まぁ複雑なコードを読み解く力もないので置いときましょう。

今日はpushMatrix(), popMatrix()。
pushMatrix()は基準点、基準座標の傾き情報の保存、
popMatrix()はpushMatrix()で保存した情報の展開。

translate()は面白くないので、rotate()を使ってみました。

sample.pde
void setup(){ 
  size(640, 640);
  background(0);
  stroke(255);
  frameRate(10);

  translate(width/2, height/2 );
  rotate(-PI/2);
  pushMatrix();
  fill(255,0,0);
  rect(100,0,100,30);
  rotate(PI/6);
  fill(255);
  rect(100,0,100,30);
  popMatrix();
  fill(255);
  rotate(PI/3);
  rect(100,0,100,30);
  
}

完成図はこんな感じ。
image.png

popMatrix()を使わない以下のコードだと、

sample.pde
void setup(){ 
  size(640, 640);
  background(0);
  stroke(255);
  frameRate(10);

  translate(width/2, height/2 );
  rotate(-PI/2);
  //pushMatrix();
  fill(255,0,0);
  rect(100,0,100,30);
  rotate(PI/6);
  fill(255);
  rect(100,0,100,30);
  //popMatrix();
  fill(255);
  rotate(PI/3);
  rect(100,0,100,30);
  
}

完成図は以下になります。
(3回目のrotateがPI/6+PI/3=PI/2になってしまうんですね。)

image.png

も少しVJっぽい動画を作りたいですが、まぁまぁゆっくりとやってければなと思います。
動画作るにしてもアイデアが必要ですしねぇ。どうしようかな。

以上、translateとrotateでした。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?