Clolent

이동 translate ( x, y )

확장 scale ( f )

회전 rotate ( r )


프로세싱은 앞에서 다뤘듯 좌표계 자체를 확장하거나, 회전시키거나 이동시켜버린다.

즉 내가 생각한것과 다르게 움직 인다는것. = 거지같다는 것


rotate 에 관하여

rotate( r ) 여기서 r 은 라디안 값이다. 인자로 주어지는 값은

PI 180도

TWO_PI  360도

HALF_PI  90도

QUARTER_PI 45 도


따라서 어떤 물체를 회전 시키고 싶다면


translate( 물체의 x , 물체의 y )

rotate ( 원하는 각도 )

물체 그리기


이 순서를 따라야 할 것이다.

물론 이것이 끝난담에 translate 와 rotate 를 원상태로 해줘야한다.


scale 역시 마찬가지이다.


즉 굉장히 비효율 적이다. 이를 해결하기 위한 것이 앞에서도 다뤘던

popMatrix() 와 pushMatrix() 이다.


pushMatirx() 와

popMatrix () 사이는 

하나의 레이어를 새로 만드는 것이라 볼 수 있다.


즉 pushMatrix( ) 와 popMatrix( ) 사이에서 아무리 translate, rotate, scale 을 한들

이 사이가 아닌 곳에서 물체를 그리는 대에는 아무 영향이 없다는 뜻 


이를 사용해서 예시를 하나 해보자 


float delta = 0.0f ;


void setup(){

  size(400,400);

}


void draw(){

  delta += 0.01f ;

  

 fill(0,10); // 잔상효과

 rect(0,0,width*3,height*3); // 잔상효과

 pushMatrix();

 rectMode(CENTER);

 translate(width/2 , height/2 );

 rotate(delta);

 scale(sin(delta));

 rotate(PI/6);

 noStroke( );

 fill( 255,100,0,255 ) ; 

 rect(0,0,200,200);

 popMatrix();

// rect(0,0,100,100);

  

}


잔상이 남는 효과는 덤이다.


이제 이 예제의 사각형이 우리의 마우스를 쫓아 다니게 해보자

float delta = 0.0f ;


void setup(){

  size(400,400);

}


void draw(){

  delta += 0.01f ;

  

 fill(0,10);

 rect(0,0,width*3,height*3);

 pushMatrix();

 rectMode(CENTER);

 translate(mouseX , mouseY );

 rotate(delta);

 scale(sin(delta));

 rotate(PI/6);

 noStroke( );

 fill( 255,100,0,255 ) ; 

 rect(0,0,100,100);

 popMatrix();

// rect(0,0,100,100);  

}


rect의 위치가 아닌 translate 의 인자값을 마우스 값을 준다. 그래야 중심점이 마우스의 위치로 이동되고 해당 위치를 기준으로 Rotate 나 Scale 을 수행하기 때문 !

댓글 로드 중…

블로그 정보

Clolent - 커피물조절달인

최근에 게시된 글