Processing에서 3D 화면의 회전(Rotation), 이동(Translation), 확대(Zoom) 손 쉽게 구현하기

프로세싱(Processing)이라는 언어는 비쥬얼 측면에서 정말 정말 편하게 그리고 간결하게 음~~ 한마디로 효율적(^^)으로 원하는 것을 구현해 볼 수 있는 언어라는 생각이 듭니다. 예전에 이 언어를 가지고 좀 뭔가를 했는데, 지금 보니 그건 프로세싱의 특징을 모르고 그냥 C 처럼 사용했던 것 같습니다. 그리고 최근 Processing의 좌표 변환의 개념에 대해 이야기[바로가기]했는데요. Processing의 특징을 알면 시각화하기 참 편해집니다.^^. 오늘은 서보모터의 3D 모델을 직접 구현했던 글[바로가기]을 조금 더 다듬어 볼까 합니다^^.

void mouseDragged(){
    rotY -= (mouseX - pmouseX) * 0.01;
    rotX -= (mouseY - pmouseY) * 0.01;
}

void keyPressed() {
  if (key == 'a') transX -= 10;
  else if (key == 'd') transX += 10;
  else if (key == 'x') transY += 10;
  else if (key == 'w') transY -= 10;
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  scaleFactor += e * 1.002;
}

바로 회전과 이동과 확대/축소인데요. 그게 위 함수로 다 구현이 됩니다. Processing은 위 코드에서 보이지만 마우스의 드래그(mouseDragged)와 키보드 눌림(keyPressed), 마우스 휠의 움직임(mouseWheel)을 모두 인식할 수 있는 함수가 준비되어 있습니다. 그 각 함수안에서 살짝 양념을 뿌려주는 거죠. mouseDragged함수 안에서는 mouse의 현재값과 이전값의 차이에 0.01정도를 곱해 속도를 조절해서 회전 각도의 증감(-=)을 구현해줍니다. keyPressed함수에서는 좌우, 상하이동을 키보드의 a,d,x,w로 정의하고 그 키가 눌러지면, 10픽셀씩 빼거나 더하도록 해 두었습니다. 마지막으로 휠 움직임은 MouseEvent를 받아서 휠 방향에 대해 증감하도록 간단히 구현한 것입니다.

float rotX, rotY, transX, transY, scaleFactor;
PShape horn, body;

void setup() {
  size(600,600, P3D);
  smooth();
  
  body = loadShape("body.obj");
  horn = loadShape("tmp.obj");
}

void draw() {
  lights();
  background(32);
  
  translate(width/2 + transX, height/2 + transY, 0);
  
  rotateX(rotX);
  rotateY(-rotY);
  
  scale(4 + scaleFactor);
  
  shape(body);
  
  translate(0, 10, 20);
  rotateZ(radians(frameCount));
  
  shape(horn);
}

void mouseDragged(){
    rotY -= (mouseX - pmouseX) * 0.01;
    rotX -= (mouseY - pmouseY) * 0.01;
}

void keyPressed() {
  if (key == 'a') transX -= 10;
  else if (key == 'd') transX += 10;
  else if (key == 'x') transY += 10;
  else if (key == 'w') transY -= 10;
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  scaleFactor += e * 1.002;
}

그러면.. 위의 전체 코드를 보면 어떻게 적용해서 사용하고 있는지 알 수 있겠죠^^.

실제 사용한 동영상은~~~

Processing에서 쉽게 회전, 이동, 확대를 구현해 보았습니다.^^ 이제 이걸 이용하면 뭔가 재미있는 놀이(^^)를 많이 할 수 있을것 같아요^^ 아참... 이 글에 쓰인 obj 파일은 [바로가기]에 있습니다.^^