#author("2019-05-22T00:13:13+09:00","default:qua","qua")
#author("2019-05-22T00:14:36+09:00","default:qua","qua")
#navi(Processing/2.ちょっと発展)
* 2-5 座標変換 [#k5c8a46c]
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); 
とした結果は下の図の右下となる。このように変換を組み合わせる場合には、その順序も重要である。 

#ref(http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/img/2-5-1.png)
#ref(http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/img/2-5-1.png,721x430)

長方形をその中心の周りに回転させてみよう。 
それには、長方形の中心に原点を移動して、座標を回転させ、原点を中心とする長方形を描けばよい。次のスケッチは、幅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); 
 
#ref(http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/img/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