Processing記事： 座標系関数をまとめてみた（EVENINGテックブログ）

こんにちは。Evening Music Recordsの鶴留です。

本記事では、音楽情報バイラルメディア「EVENING」の運営スタッフにより、テック関連情報をブログ形式でお届けさせていただきます。

今回は、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/

EVENINGテックブログ： http://eveningmusic.wp.xdomain.jp/