라즈이노 iOT

【 프로세싱 기초#23】 감속하는 공 표현하기 (가속도 적용 - 움직이는 원3)

 지난 시간 PVecter 자료형에 대해 다루어 보았다. 이번 시간부터는 이 벡터 자료형을 본격적으로 활용해볼 텐데, 오늘은 원(공)이 출발지점부터 목표지점까지 움직일 때 목표점에 도달할 수록 가속도가 줄어 들어 서서히 도달 하는 듯한 움직임을 나타내보려 한다. 
(참고, 이런 형태는 게임등에서 많이 활용되는 기법으로 유니티(unity) 등에서 선형보간 함수(기법)를 이용해서 구현하게 된다. )

[ 프로세싱의 화면 좌표 ]  - 100 x 100 pixel 예시 

▶ 문제  :  크기(50x50 pixel) 원을 목표 지점(400,400)까지 움직이되 서서히 감속시켜라.

   [ 조건 :  1. 화면 사이즈(가로x세로 픽셀) : 500 x 500) , 
              2. 배경색 및 라인: background(255), 원 내부 채움색( fill(10) )
              3. 선형 보간 함수 사용 : lerp(a, b, t) -변수 a의 값에서 b의 값까지 t값 비율 만큼 변경한 값을 반환 함 ]

[참고]

 1. 선형 보간법: 출발점과 끝점을 알고 있을 때, 그 사이에 위치한 값을 추정하기 위하여 직선 거리에 따라 선형적으로 계산하는 방법

 2. 선형보간 함수의 계산 식 : 함수 lerp(a, b, t)는 내부적 다음과 같은 식으로 계산된다.

   function lerp(a, b, t)

       return a * (1-t) + (b*t)

   end

▶ 문제 (실행결과) 
아래처럼 동작되도록 코딩하라.

[실행결과 영상]

▶ 프로그램(code) : 
(이미지를 클릭하면 확대 됩니다)

PVector begin, end, current;  // PVector 변수 선언
void setup( ) { 
  size(500, 500);
  begin = new PVector(0, 0);  // 원의 출발점
  end = new PVector(400, 400);   // 원의 도착점
  current = begin;    //참조형 변수, 현재의 위치를 일치시킴(업데이트)
  fill(10);
} 
void draw( ) { 
  background(255);
  current.x = lerp(current.x, end.x, 0.05);  
  current.y = lerp(current.y, end.y, 0.05);
//  println("x=",current.x);    // x 값의 감속 확인용 
//  println("y=",current.y);    // y 값의 감속 확인용 
  ellipse(current.x, current.y, 50, 50);  
}

<감속이 어떻게 이루어 지는 것인지 값을 확인>

[ ※ 참고, 선형보간 함수의 계산 식 : 함수 lerp(a, b, t)는 내부적 다음과 같은 식으로 계산된다.

   function lerp(a, b, t)

       return a * (1-t) + (b*t)

   end    ]
위, 첫 번째 x와 두 번째 x의 차이값(위치)과 두 번째 x와 세 번째 x 차이값을 비교해 보면,  루프를 돌수록 점점 줄어 드는 것을 확인 할 수 있다. y값도 마찬가지.  따라서 루틴을 돌 수록 공이 움직이는 위치가 점점 짧아 지게 됨으로 공이 감속하여 움직이는 것을 볼 수 있는 것이다. 
 그리고 t 값을 조절하면 감속되는 속도를 조절 할 수 있다.

▶ 프로그램(code) 다운로드: 
(압축 파일을 풀어서 사용하세요)