Processingで図形を回転させながら描画したいという場面が沢山ありました。
その際に便利な関数として以下の4つの関数があります。
pushMatrix
popMatrix
rotate
translate
4つの関数について調べたので内容をまとめていきます。
1. translate関数
デフォルト(0,0)の座標から指定した位置に座標を平行移動します。
平行移動した後の座標はtranslate関数で指定した位置が原点となる。
void setup(){
size(800,800);
background(255);
fill(255,0,0);
//座標の中心に縦横100px 赤色の四角形
rect(width/2,height/2,100,100);
pushMatrix();
//座標を(400,400)まで平行移動
translate(width/2,height/2);
//座標の中心に縦横50px 黄色の四角形
fill(255,255,0);
rect(0,0,50,50);
popMatrix();
}
上記のコードを実行すると、どちらの四角形も中心に描画されています。
translate関数によって座標の原点が(400,400)まで平行移動したことにより、
rect(0,0,50,50)と指定してもキャンバスの中心に描画されるようになりました。
これがtranslate関数の機能です。
今のままだとtranslate関数の良さが分からないですが、rotate関数と一緒に使うとそのすごさが分かります。
2. rotate関数
原点を中心に座標を回転させます。
rotate関数を呼び出した後に描画した図形は全て回転します。
void setup(){
size(800,800);
pixelDensity(displayDensity());
background(200,200,200);
//座標を45度回転
rotate(radians(45));
//縦横800px 赤色の四角形
fill(255,0,0);
rect(0,0,800,800);
//縦横100px 黄色の四角形
fill(255,255,0);
rect(400,400,100,100);
}
上記のコードを実行すると、赤色と黄色の四角形が45度回転しています。
赤色の四角形はキャンバスと同じ大きさの四角形なので、
■なぜtranslate関数を使うのか
私たちが実現させたいのは、その場で図形を回転させるということですよね。
でもrotate関数を使うと原点から図形が回転してしまいます。
この解決策は、translate関数を使ってキャンバスの中心に原点を移動させれば図形がその場で回転するようになります。
void setup(){
size(800,800);
pixelDensity(displayDensity());
background(200,200,200);
//縦横800の四角形
translate(width/2 , height/2);
//座標を45度回転
for(int i = 0;i<360;i+=45){
rotate(radians(45));
//縦横100の四角形
fill(255,255-i,0);
rect(0,0,100,100);
}
//(200,200)の位置に直径50pxの円
ellipse(200,200,50,50);
}
上記のコードを実行すると、translate関数で原点を(400,400)に平行移動した後に
(0,0)に四角形を配置しました。そこから45度づつ回転をかけると以下のように四角形が描画されます。分かりやすいように色を変化させてみました。
今回は360度回転させたため、ellipseを配置する位置が分かりましたが、
座標変換が積み重なると意図した場所に図形を配置できないことがあります。
3. pushMatrix popMatrix関数
先ほど、座標変換が積み重なると意図した場所に図形を配置できない問題がありました。
その問題を解決するのがpushMatrix関数とpopMatrix関数です。
pushMatrix関数： 座標系の状態を示す変換行列を一時的に保管する
例えば、何も座標変換が行われていない状態でpushMatrix関数を呼び出すと、
原点が(0,0)の座標の状態が保管されます。
popMatrix関数： 保管したものを呼び出す
pushMatrixで保管した座標の状態を取り出すことができます。
保管はスタック構造なので、pushMatrix関数を呼び出すたびに上に積まれ、
popMatrix関数を呼び出すと一番上に積まれている物が取り出されます。
このプッシュされるものが、座標の状態ということです。
translate関数の説明で記載したコードにpushMatrixとpopMatrixが出てきました。
translate関数を呼び出す前にpushMatrixを呼び出しているのは、
座標変換する前に最初の座標の状態(0,0)を保管しておくことで、複雑な座標変換を行った後でもpopMatrixで保管されている状態を取り出すことで、いつも通りの座標に描画するためだったのです。
この便利な関数たちを使い倒して作った作品がこちらです。
この作品は孔雀をモチーフにした作品なのですが、左右対称な作りにしたかったので、
描画する線や図形などを360度回転させながら描画することで実現させました。
以上が座標変換で使える便利な関数の説明です。
最後まで読んでいただきありがとうございました！
Comments