라즈이노 iOT

【 프로세싱 기초#24】 화면 4구석을 감속 회전하는 공 표현하기

 지난 시간 원(공)이 출발지점부터 목표지점까지 움직일 때 감속하여 움직이도록 표현하였다. 이번에는 화면의 4군데 모서리 부분을 감속 이동으로 반복 회전 시켜 보자.

[ 프로세싱의 화면 좌표 ]  - 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값 비율 만큼 변경한 값을 반환 함

              4. 이동 목표지점(4 곳 모서리 부분)을 배열 벡터로 선언 , 'PVector[] end = new PVector[4]' ]

[참고]

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

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

   function lerp(a, b, t)

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

   end

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

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

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

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

화면 사이즈(pixel) [ 500 x 500 ]

목표 지점 위치 [ (x, y) : A(50, 50) , B(450, 50) , C(450, 450) , D(50, 450) ]   

[실행결과 영상]

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

PVector current = new PVector(0,0);
PVector[] end = new PVector[4]; //배열 벡터 선언
int cnt =0;
void setup( ) { 
  size(500, 500);
  end[0] = new PVector(50, 50);
  end[1] = new PVector(450, 50);
  end[2] = new PVector(450, 450);
  end[3] = new PVector(50, 450);
  current.set(end[cnt]);  //PVcetor(50,50)위치값 참조(출발점 설정)   
  fill(10);
} 
void draw( ) { 
  background(255);
  // 공의 x좌표와 y좌표를 베열의 좌표로 계속 업데이트
  current.x = lerp(current.x, end[cnt].x, 0.05);  
  current.y = lerp(current.y, end[cnt].y, 0.05);
  ellipse(current.x, current.y, 50, 50);
  // 이동 거리(간격)가 5 pixel이하가 되면 cnt 값 증가 시켜
  // 공이 모서리 지점 1 → 2 → 3 →4 순으로 이동하도록 함 
  if (PVector.dist(current, end[cnt] ) < 5) {
    cnt++;
    cnt = cnt%4;  // 나머지 연산자를 사용하여 0, 1, 2, 3 값을 반복
  }  
}

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