[프로세싱(Processing)] 상호작용과 애니메이션

5. 상호작용과 애니메이션

5.1. 마우스 입력

프로세싱에서는 마우스 입력을 처리할 수 있습니다. 다음과 같이 마우스 입력 함수를 사용하여 마우스 클릭, 마우스 이동 등의 이벤트를 처리할 수 있습니다.

 

• 마우스 클릭 이벤트 처리

void mousePressed() {
  // 마우스 클릭 시 실행할 코드
}

• 마우스 이동 이벤트 처리

void mouseMoved() {
  // 마우스 이동 시 실행할 코드
}

• 마우스 드래그 이벤트 처리

void mouseDragged() {
  // 마우스 드래그 시 실행할 코드
}

 

위와 같이 마우스 입력 함수를 작성하고, 원하는 이벤트에 맞게 코드를 작성하면 됩니다.

 

5.2. 키보드 입력

프로세싱에서는 키보드 입력을 처리할 수 있습니다. 다음과 같이 키보드 입력 함수를 사용하여 키보드 이벤트를 처리할 수 있습니다.

 

• 키보드 눌림 이벤트 처리

void keyPressed() {
  // 키보드 눌림 시 실행할 코드
}

• 키보드 떼어짐 이벤트 처리

void keyReleased() {
  // 키보드 떼어짐 시 실행할 코드
}

 

위와 같이 키보드 입력 함수를 작성하고, 원하는 이벤트에 맞게 코드를 작성하면 됩니다.

 

5.3. 애니메이션 기본 개념

프로세싱에서는 애니메이션을 쉽게 구현할 수 있습니다. 애니메이션을 구현하는 방법은 다음과 같습니다.

 

• draw() 함수 내에서 도형을 그립니다.
• draw() 함수 내에서 변수를 변화시켜 애니메이션을 구현합니다.

 

다음은 원이 일정한 속도로 이동하는 애니메이션 예제 코드입니다.

int x = 0;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  ellipse(x, height/2, 50, 50);
  x = x + 1;
}

 

5.4. 시간에 따른 움직임 구현

시간에 따른 움직임은 애니메이션을 구현할 때 매우 중요한 요소입니다. 프로세싱에서는 다음과 같은 함수를 사용하여 시간에 따른 움직임을 구현할 수 있습니다.

 

• millis(): 프로그램이 시작된 후 경과한 시간을 밀리초 단위로 반환합니다.
• frameRate(): 초당 프레임 수를 반환합니다.

다음은 시간에 따른 움직임을 구현한 예제 코드입니다.

float x = 0;
float speed = 0.1;

void setup() {
    size(400, 400);
}

void draw() {
    background(255);
    ellipse(x, height/2, 50, 50);
    x = x + speed * (millis()/1000.0); // 시간에 따른 움직임 구현
}

위 코드에서는 millis() 함수를 사용하여 경과한 시간을 밀리초 단위로 가져와 초 단위로 변환한 뒤 speed와 곱하여 x 값을 변화시킵니다. 이렇게 함으로써 움직임의 속도를 조절할 수 있습니다. 

 

이처럼 프로세싱에서는 다양한 상호작용과 애니메이션을 구현할 수 있습니다. 다양한 예제 코드를 참고하여 상호작용과 애니메이션을 응용해 보세요.