[프로세싱 시험대비] Lecture08_transform

transform에서 중요한것을 뽑자면

1. sin과 cos이용

2. pushMatrix / popMatrix

3. translate이다.

 

 

예제 1

 

1. sin,cos으로 풀어보기

 

void my_circles1(){
  float radius=300;
  float centerX=width/2;
  float centerY=height/2;
  
  for(float angle=0;angle<TWO_PI;angle+=0.3){
    //TWO_PI ->360 degree PI==3.14
    pushMatrix();
    float x=centerX+radius*cos(angle);
    float y=centerY+radius*sin(angle);
    fill(angle/TWO_PI*255);
    ellipse(x,y,50,50);
    rotate(radians(30));
    popMatrix();
    
  }
  
}

둥글게 ellipse를 찍으려면 중심이 되는 위치인 centerX와 centerY에서 대각선 방향으로 가야한다. 

 

# sin,cos이 뭐죠?

말그대로 삼각함수 쓰는거다. 고딩때 cos은 x값, sin은 y값으로 외웠는데 그거 그대로 가져다 쓰면 된다.

 

cos세타= x값/radius 니까 x= radius*cos 세타가 될 것이고

sin 세타 =y값/radius니까 y=radius*sin세타가 될 것이다. 

 

여기서 세타는 angle인데 angle이 계속 증가해야 대각선 방향으로 원 모양을 그리며 ellipse를 찍을 것이다!

 

++) radians 함수는 각도를 radians 숫자값으로 나오게 해준다.

PI=180도 = 3.14radians 가 나오게!

https://m.blog.naver.com/a7343/222008990258

인터렉티브아트 코딩 [Processing 프로세싱] -constrain(); / radians(); / sin() cos() tan() / degrees();

 

 

# pushMatrix와 popMatrix가 뭐죠?

 

pushMatrix와 popMatrix는 다양한 도형을 각각 따로 원점에서 계산하고 싶을 때 사용하는데

pushMatrix를 통해 현재 위치를 stack에 저장하고 translate,rotate등 여러가지 transform들을 실행한다음 나중에 다시 이 위치로 돌아오고 싶을 때 popMatrix를 사용한다고 생각하면 된다! 

popMatrix를 만나면 pushMatrix에서 진행된 transform들이 모두 clear된다! 

https://pinkwink.kr/919

프로세싱 Processing에서 modelX 명령으로 pushMatrix의 개념을 이해하기...

근데 사실상 이번 예제는 pushMatrix와 popMatrix가 없어도 구현가능하다. 

https://www.gpgstudy.com/forum/viewtopic.php?t=3537 

[Open GL] PopMatrix PushMatrix에 대한 개념이 이해가 잘 안가 - GpgStudy 포럼

 

2.translate과 rotate로 풀어보기

 

void circle2(){
  
  pushMatrix();
  translate(width/2,height/2);
  
  for(int i=0;i<18;i++){
    
    rotate(radians(20)); // 360/20
    fill(0);
    ellipse(200,0,50,50);
    
    
  }
  
  popMatrix();
  
  
}

 

# translate이 뭐죠?

 

translate(50,0) 하고 나서 translate(20,0)을 하면 이는 translate(70,0)과 같고

현재 위치가 (70,0)이 된다! 이 함수는 pushMatrix와 popMatrix를 통해 컨트롤이 가능하다.

 

translate(120, 80);
rect(0, 0, 220, 220);  // Draw rect at new 0,0

 

여기서 (0,0) 은 실질적으로 (120,80)을 의미한다. translate(120,80)을 해주면서 실질적으로 원점이 (120,80)으로 새로 설정된것이나 마찬가지이기 때문이다. 

 

# rotate가 뭐죠?

 

rotate는 제자리에서 돈다고 생각하면 된다. 좌표계를 회전시켜주는 거라고 생각하면 되는데

중요한것이 있다면 rotate안에 각도를 radians로 변환시켜줘야 한다. rotate(radians(20)) 또는 rotate(PI) 

++) 사실상 PI도 180도를 라디안으로 바꾼거여서 실제로는 3.14xxx다!

 

 

 

예제 2 

 

pushMatrix,popMatrix,translate 를 사용해서 집을 일렬로 세워보자! 

 

이전까지는 for문을 통해서

이렇게 triangle과 rect에 직접적인 변화를 줬는데  translate를 사용하는 방법도 있다.

 

 

 
void draw(){
  
  for(int i=0;i<8;i++){
    house3(i*100,300);
  }
  
}
 
 
 
void house1(){
  fill(0);
  triangle(50,0,0,50,100,50);
  fill(128);
  rect(0,50,100,100);
}
 
void house3(float x,float y){
   pushMatrix();
   translate(x,y);
   house1();
   popMatrix();
}

 

translate를 통해 원점을 이동시켜서 집을 일렬로 세울 수도 있다!!

 

 

원을 일렬로 5개 찍어볼 수도 있다~!

 for(int i=1;i<=5;i++){
    pushMatrix();
      fill(c[i-1]);
      translate(i*100,300);
      ellipse(0,0,50,50);
    popMatrix();
  }

 

 

 

 

예제 3 - solar System 만들기 

 

solar system을 만들기 위해 간단한 틀을 짜보자 ! 

 

pushMatrix와 popMatrix 에 익숙해지기 위한 간단한 몸풀기 예제를 구현해볼 것이다.

 

void draw(){
  
   pushMatrix();
     //red
     noFill();
     stroke(#DB9292);
     translate(width/2,height/2);
     rect(0,0,50,50);//(300,300);
   popMatrix();
   
   //back to (0,0)
   
 
   pushMatrix();//(0,0)
     translate(width/2,height/2);
     translate(100,0);
     noFill();
     //green
     stroke(#92DBA7);
     ellipse(0,0,100,100);//(400,300)
     pushMatrix(); //(400,300)
       translate(50,0); //(450,300)
       //yellow
       stroke(#FFED86);
       rect(0,0,25,25);
     popMatrix();
     //purple
     stroke(#9186FF);
     rect(0,0,30,30);
   popMatrix();
}

 

첫번째 빨간 네모는 

pushMatrix 할때 좌표는 (0,0)이다.

translate(width/2,height/2); 하면서 원점좌표가 (300,300)으로 바뀌게 된다.

popMatrix하면 지금까지 한게 clear되면서 다시 (0,0)으로 돌아온다.

 

두번째 연두색 동그라미를 살펴보자.

translate(width/2,height/2);

translate(100,0);

translate를 두번했기 때문에 원점은 (300+100,300+0)으로 바뀐다.

여기서 ellipse를 하면된다.

 

이제 원점이 (400,300)인 상태에서 pushMatrix를해서 노란색 네모를 그려줄거다!

translate(50,0); 을 통해 원점을 (450,300)으로 바꿔준다.

popMatrix를 통해 지금까지 한걸 clear하면 원점이 (400,300)으로 돌아올거고 여기서 보라색 네모를 그려주면 된다!

 

 

solarSystem 만들기

float sun_spin;
float earth_spin,earth_orbit;
float moon_spin,moon_orbit;
 
 
void setup(){
 size(600,600);
 
 
 
}
 
void draw(){
  background(0);
  
  //sun
  
  pushMatrix();
    translate(width/2,height/2); //(300,300)
    rotate(sun_spin);
    sun_spin+=0.01;
    fill(#FF8688);
    rect(0,0,100,100);
  popMatrix();
  
  //earth orbit
  
  noFill();
  stroke(255);
  ellipse(width/2,height/2,400,400); //(300+200)
  
  //earth spin
  pushMatrix();
    translate(width/2,height/2); //(300,300)
    rotate(earth_orbit);
    
    //moon orbit
    translate(200,0); //(500,300)
    noFill();
    stroke(255);
    ellipse(0,0,70,70);
    
    //moon spin
    pushMatrix();//(500,300)
      rotate(moon_orbit);
      translate(35,0); //(535,300)
      rotate(moon_spin);
      moon_orbit+=0.03;
      moon_spin-=0.01;
      //moon
      fill(#FFFFFF);
      rect(0,0,25,25); //(535,300)
    popMatrix();
    
    //earth spin
    
    rotate(earth_spin);
    earth_orbit+=0.005;
    earth_spin+=0.01;
    fill(#0000FF);
    rect(0,0,35,35); //(500,300)
    popMatrix();
  
}

또 rotate를 어디에 걸어주느냐가 중요한데

 

지금 earth_oribt 같은경우는 (300,300)을 중심으로 하는 ellipse이기에

pushMatrix();

translate(width/2,height/2); //(300,300)

rotate(earth_orbit);

translate을 (300,300)으로 하고 그 밑에 바로 걸어준다.

 

(translate 한다음에 rotate걸어줘야한다!)

(예를 들어 내가 (300,400)을 중심으로 하는 원을 회전시키고 싶다고 했을 때 translate(300,400)하고 rotate(ellipse_spin)

식으로 걸어줘야 회전하는게 먹힌다)

https://processing.org/reference/rotate_.html

Reference

공식문서에서도 translate 후 rotate를 걸어줬다!

 

moon_orbit 같은 경우도  (500,300)을 중심으로 하는 원이다. 

 

   translate(200,0); //(500,300)

    noFill();

    stroke(255);

    ellipse(0,0,70,70);

  

    //moon spin

   pushMatrix();//(500,300)

      rotate(moon_orbit);

 

(500,300)을 pushMatrix 한다음에 rotate를 걸어준다. (500,300)을 중심으로 하는 원이 moon_orbit에 해당하는 원이니까