[💬] 부드럽게 이동하는 오브젝트 만들기

[vertex(4321vertex)]

가속운동, 감속운동, 그리고 부드럽게 움직이는 오브젝트를 만드는 방법에 대한 글이에요

그리고 저도 잘 아는게 아니라, 제가 아는 범위 안에서만 쓰는 글이에요

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

1. 가속하면서 움직이는 오브젝트 만들기

첫번째는 가속하면서 움직이는 오브젝트를 만드는 방법에 대한 글이에요

그리고 위에 올려놓은 그래프는 x가 0부터 1사이의 값일때, x의 제곱값을 표시한거에요

그리고 이 값은 그래프에 나와있는것처럼 0에서 시작해서 처음에는 조금씩 증가하다가 1에 가까워질수록 더욱 많이 증가하면서, 최종적으로는 1이 되요

그리고 제곱하는 횟수가 커질수록 이런 값의 변화량은 더욱 커져요, 처음에 더 조금씩 증가하다가 마지막에 더 많이 증가하게 되요

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

def accel(x1,y1,x2,y2,p,t)

t1=(t**p)

return x1+(x2-x1)*t1, y1+(y2-y1)*t1

end

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

그리고 위에 올려놓은 코드는 ruby프로그래밍 언어로 작성한 가속운동의 위치를 구하는 코드에요

코드의 입력값에서 x1,y1은 시작점의 좌표를 나타내고, x2,y2는 도착점의 좌표를 나타내요

그리고 t가 0이면 오브젝트는 시작점에 위치하고, t가 1이면 오브젝트는 도착점에 위치해요

그리고 t가 그 사이의 값이면, 이때 오브젝트는 0일때의 시작점과 1일때의 도착점 사이에서 t의 제곱만큼으로 나아간 지점에 위치하게 되요

즉, 위에 올려놓은 그래프대로 위치하게 되는거에요, 이때 t를 제곱하는 횟수는 p값으로 입력할수 있어요

즉, 위에 올려놓은 코드를 이용해서 t를 0부터 시작해서 1까지 동일하게 늘려가면

결국 오브젝트를 가속하는 방식으로 시작점에서 도착점까지 이동시킬수 있게 되는거에요 

그리고 이게 위에 올려놓은 코드로 가속하면서 이동하는 오브젝트를 만든거에요

첫번째가 p값이 2일때고, 두번째 세번째는 각각 p값이 3이랑 4일때에요, 그리고 모두 t값이 증가하는 속도는 동일해요, t값은 0부터 1까지 동일한 값으로 증가해요

즉, 위의 영상에서 보이는것처럼 p값이 증가할수록 점점 처음에는 조금씩 속도가 늘어났다가 나중에는 빠르게 속도가 늘어나게 되요

그렇게 해서 최종적으로는 t가 1일때 모두 같은 지점에 도착하게 되는거에요

2. 감속하면서 움직이는 오브젝트 만들기

두번째는 감속하면서 이동하는 오브젝트를 만드는 방법이에요

그리고 방식은 모두 앞에서 설명한것과 동일해요, 

차이점은 여기서는 t값의 제곱이 아닌 제곱근(루트)을 사용해요

위에 올려놓은 그래프에 나와있는것처럼 x의 제곱근을 이용하면, 처음에는 값이 빠르게 늘어났다가 뒤로 갈수록 값이 천천히 늘어나게 되요

그리고 이때 그래프에 나와있는것처럼 제곱근을 씌우는 값이 커질수록 더욱더 처음에 빠르게 늘어나고, 더욱더 마지막에 천천히 늘어나게 되요

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

def decel(x1,y1,x2,y2,p,t)

t1=(t**(1/p))

return x1+(x2-x1)*t1, y1+(y2-y1)*t1

end

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

그리고 위에 올려놓은 코드가 제곱근을 이용해서 감속운동을 하는 오브젝트의 위치를 구하는 코드에요

역시 방식은 앞과 동일해요

그리고 위에 올려놓은 영상이 앞의 코드를 사용해서 실제로 감속하면서 이동하는 오브젝트를 만든거에요

첫번째가 p값이 2.0일때고 두번째 세번째는 각각 3.0 4.0일때에요

즉 영상에 나와있는것처럼 p값이 늘어날수록 오브젝트는 더욱더 처음에 빠르게 이동했다가 마지막에 천천히 이동하게 되요

그렇게 해서 t가 1일때 최종적으로는 세 오브젝트 모두 동일한 지점에 위치하게 되는거에요, 역시 세 오브젝트에서 t값을 늘리는 속도는 똑같아요

3. 부드럽게 이동하는 오브젝트 만들기

세번째는 부드럽게 이동하는 오브젝트를 만드는 방법이에요

즉, 처음에는 가속했다가, 마지막에는 감속해서 최종적으로 도착지점에 도달하는 오브젝트를 만드는거에요

그리고 여기서는 스무스스텝(smoothstep)의 공식이 사용되요, 위의 그래프에 올려놓은 식이에요

첫번째가 1차 스무스스텝의 공식이고, 두번째 세번째는 각각 2차 3차 스무스스텝의 공식이에요

그리고 그래프에 나와있는것처럼 차수가 높아질수록 더욱더 처음에는 많이 가속했다가 나중에는 많이 감속하게 되요

그리고 x를 이런식으로 스무스스텝의 공식을 이용해서 증가시킨다는것 빼고는 역시 앞과 모두 동일해요

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

def smooth1(x1,y1,x2,y2,t)

t1=-2*t**3+3*t**2

return x1+(x2-x1)*t1, y1+(y2-y1)*t1

end

def smooth2(x1,y1,x2,y2,t)

t1=6*t**5-15*t**4+10*t**3

return x1+(x2-x1)*t1, y1+(y2-y1)*t1

end

def smooth3(x1,y1,x2,y2,t)

t1=-20*t**7+70*t**6-84*t**5+35*t**4

return x1+(x2-x1)*t1, y1+(y2-y1)*t1

end

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

그리고 위에 올려놓은 코드가 각각 1차 2차 3차 스무스스텝의 코드에요

역시 t값을 스무스스텝의 공식을 이용해서 증가시키는것 빼고는 앞과 모두 동일한 방식이에요

그리고 위에 올려놓은 영상이 앞의 코드를 이용해서 부드럽게 이동하는 오브젝트를 만든거에요

첫번째가 1차 스무스스텝이고, 두번째 세번째가 각각 2차 3차 스무스스텝이에요

즉, 영상에서 보이는것처럼 차수가 높아질수록 처음에 많이 가속하고 나중에 많이 감속하게 되요

그렇게해서 최종적으로는 t가 1일때 모두 동일한 지점에 위치하게 되는거에요, 역시 세개 모두 t값을 증가시키는 속도는 동일해요

그리고 이런식으로 하면 부드럽게 움직이는 오브젝트를 만들 수 있어요

[211214(tomatoss)]

[cF(typical4281)]

와우 - dc App

[아이스말차라떼(icedmatchalatte)]

트윈이네 트윈

[익명(lxmbjvd9pc6e)]

항상 좋은 글 잘 보고 있습니다 선생님 감사합니다

[221166(election8944)]