2-5 座標変換†

Processingの図形は座標を元にして描いている。何も指定しなければ、座標は原点が左上隅、x軸が右方向、y軸が下方向であった。また、座標の単位は1ピクセルであった。 それを元にして、例えば、

rect(100,150,20,20);

は、点(100,150)と(120,170)を対角線とする長方形を描く。

Processingでは座標を任意に指定することができる。 原点を点(x0,y0)に移動するには、translate(x0,y0)を用いる。 原点を中心として座標軸をthラジアンだけ回転させるには、rotate(th)を用いる。 座標の単位をsピクセルにするには、scale(s)を用いる。

次の2つのスケッチは同じ結果を与える。

size(200,200); 
rect(100,150,20,20); 
size(200,200); 
translate(100,150); 
rect(0,0,20,20);

座標変換は組み合わせて使うことができる。次の例は、原点を点(100,100)に移動し、さらに移動した後の原点を中心にして30度だけ座標を回転させる（結果は下の図の右上）。

translate(100,100); 
rotate(radians(30));

また、変換の順序を逆にして

rotate(radians(30)); 
translate(100,100);

とした結果は下の図の右下となる。このように変換を組み合わせる場合には、その順序も重要である。

2-5-1.png

長方形をその中心の周りに回転させてみよう。 それには、長方形の中心に原点を移動して、座標を回転させ、原点を中心とする長方形を描けばよい。次のスケッチは、幅40、高さ20の長方形を点(200,300)を中心に30度回転させて描く。

translate(200,300); 
rotate(radians(30)); 
rect(-20,-10,40,20);

幅30、高さ50の長方形を点(100,200)を中心に45度回転させて描くには次のようにする。

translate(100,200); 
rotate(radians(45)); 
rect(-15,-25,30,50);

それぞれを別々のスケッチで実行させればうまくいくが、2つともを描こうとすると、座標変換は累積されて実行されるので、これらを両方並べて書いただけではうまくいかない。そこで、今の座標を記憶させておくpushMatrix()と、記憶した座標に戻すpopMatrix()を用いる。

size(400,400); 
line(100,200,200,300); 
noFill(); 

pushMatrix(); 
translate(200,300); 
rotate(radians(30)); 
rect(-20,-10,40,20); 
popMatrix(); 

translate(100,200); 
rotate(radians(45)); 
rect(-15,-25,30,50);
2-5-2.png

次のスケッチでは、画面中央の四角形が回転する。drawが実行されるたびに座標はデフォルトにリセットされるので、回転角度を変数thに覚えさせている。

float th=0; 
 
void setup(){ 
  size(400,400); 
} 
 
void draw(){ 
  background( 128 ); 
  translate( width/2, height/2 ); 
  rotate( th ); 
  rect( -100, -100, 200, 200 ); 
  th = th + 0.01; 
}

以前実施した以下のスケッチでは座標を指定して〇を描いていた。

float x, y, dx; 

void setup(){ 
  size(400,400); 
  x = 0; 
  y = height / 2; 
  dx = 2; 
} 
void draw(){ 
  background(64); 
  circle(x, y, 20); 
  if( x < 0 || x > width ) { dx = -dx; } 
  x = x + dx; 
}

これは座標変換を用いて、次のようにも書くことができる。

float x, y, dx; 

void setup(){ 
  size(400,400); 
  x = 0; 
  y = height / 2; 
  dx = 2; 
} 
void draw(){ 
  background(64); 
  translate(x, y); 
  circle(0, 0, 20); 
  if( x < 0 || x > width ) { dx = -dx; } 
  x = x + dx; 
}
トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS