이동 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 을 수행하기 때문 !
