【Processing】座標系関数をまとめてみた

Processing

こんにちは。Evening Music Records株式会社 でインターンをさせて頂いている鶴留です。
Processingでよく使う、座標変換に関する関数をまとめてみたいと思います。覚えることは多くないですが、使いどころは多いので、使いこなせると面白いと思います。

関数translate() 座標をずらす

translate()は座標を変える関数です。Processingは初期座標(0,0)としてキャンバスの左上から数えています。それをtranslate()で変えることができます。
下のコードでは描画の起点となる座標を(witdh/2,height/2)に変換しています。

void setup() {
  size(500, 500);
}
void draw() {
  rect(0, 0, 100, 100);
  translate(width/2, height/2);
  rect(0, 0, 100, 100);
}

 

関数rotate() 座標の回転

rotate()は座標を回転する関数です。初期座標から、rotateでしてた角度に座標を回転させることができます。今回は、(width/2,height/2)に座標変換した正方形を、PI/4=45°回転させました。2回繰り返したので、PI/4 + PI/4 = PI/2、つまり90°回転しています。

void setup() {
  size(500, 500);
}

void draw(){
  line(width/2,0,width/2,height);
  line(0,height/2,width,height/2);
  translate(width/2,height/2);
  fill(255,0,0);
  ellipse(0,0,10,10);
  fill(255);
  rectMode(CENTER);
  rect(100,0,100,100);
  rotate(PI/4);
  rect(100,0,100,100);
  rotate(PI/4);
  rect(100,0,100,100);
}

関数scale() 座標の拡大・縮小

scale()は、座標を拡大・縮小する関数です。scale(x,y)でx座標、y座標を何倍にするかを指定できます。実行画像にあるように、正方形が描画される位置の座標、大きさ、線の太さが2倍、4倍と変化しています。

void setup() {
  size(500, 500);
}
void draw() {
  rect(50, 50, 10, 10);
  scale(2.0, 2.0);
  rect(50, 50, 10, 10);
  scale(2.0,2.0);
  rect(50,50,10,10);
}

関数pushMatrix()、popMatrix() 座標の格納・呼び出し

pushMatrix()は座標を格納し、popMatrix()は座標を取り出します。pushMatrix()とpopMatrix()の間で座標を変換しても、pushMatrix()以前で設定されていた座標を呼び戻すことができる、といった機能です。

void setup() {
  size(500, 500);
}

void draw() {
  pushMatrix();
  translate(width/2, height/2);
  rect(0, 0, 100, 100);
  popMatrix();
  rect(0, 0, 100, 100);
}

このようになります。まず初期の座標は(0,0)です。その後、pushMatrix()を適用し、座標(0,0)は格納されます。一旦休止する、といった感覚でしょうか。その次にtranslate(width/2,height/2)で座標を変換し、①の正方形を描画します。その後、popMatrix()を適用することで、座標(0,0)を呼び戻し、描画の起点となる座標を(0,0)に戻しました。そして描写したものが②の正方形となります。
pushMatrix()、popMatrix()を使うと、細かな座標変換が可能になるので、覚えておくと良いと思います。

今回は以上になります。

音楽情報バイラルメディアEVENING:https://evening-mashup.com/
※ インターンシップの詳細はこちらから:https://evening-mashup.com/home/music-intern 
※ 就職活動に関する情報はこちらから: https://evening-mashup.com/evening-job 

コメント

タイトルとURLをコピーしました