[💬] 베지어 곡선과 카이사 Q 스킬 이케시안 폭우

[익명(183.91)]

베지어 곡선을 이용해 Unity 에디터에서 카이사 Q 스킬 연출을 따라해보자.

우선 베지어 곡선(Bezier Curve)이란 무엇인가? 에 대해서는 아래 링크를 참고하자.

https://blog.coderifleman.com/2016/12/30/bezier-curves/

쉽게 얘기하자면 어도비 포토샵에서 지원하는 펜 툴에 적용되는 원리이며, 곡선을 그리는 공식이다.

이케시안 폭우 미사일의 궤적이 곡선을 그리므로 우리는 베지어 곡선을 이용해 따라하기로 한다.

출처: https://www.quora.com/What-is-a-Bezier-curve-in-Adobe-Photoshop-Why-would-we-use-it

위 그림은 포토샵에서 펜툴을 사용해 그린 베지어 곡선이다.

곡선은 하얀 네모(Anchor Point)에서 시작해 하얀 네모에서 끝난다. 여기서 까만 네모(Handle)에 의해 곡선의 휘어짐이 결정된다.

그림에서 A1에서 A2까지 곡선1, A2에서 A3까지 곡선2, 총 두 개의 곡선이 그려져있다.

곡선1은 h1, h2에 의해서 곡선이 결정되고 곡선2는 h3, h4에 의해서 곡선이 결정된다.

h5는 다음 그려질 곡선을 위해 있는 것으로 곡선1과 곡선2 어느 곡선에도 관여하지 않는다.

베지어 곡선은 위 그림에서의 까만 네모(Handle)의 갯수에 따라 1차(Linear), 2차(Quadratic), 3차(Cubic)으로 분류된다.

곡선의 시작과 끝을 담당하는 Anchor Point는 2개로 고정되고,

곡선의 휘어짐을 담당하는 Handle이 없으면 1차, 1개면 2차, 2개면 3차 베지어 곡선인 것이다.

여기서 사용할 것은 2개의 Anchor Point와 2개의 Handle을 사용하는 3차 베지어 곡선이다.

www.desmos.com/calculator/d1ofwre0fr

위 링크에서 수식을 활용해 3차 베지어 곡선을 그려볼 수 있다.

우리가 사용할 공식에 대해서는 대충 알겠다. 그래서 이걸로 어떻게 이케시안 폭우를 만들 것인가?

우선 이케시아 폭우 미사일의 궤적에 대해서 생각해보자.

시전자의 몸에서 사출되어 크게 휘는 곡선을 그리며 대상에게 날아간다.

1. 시전자의 몸에서 사출한다.

2. 사출하자마자 크게 휜다.

3. 대상 근처에서 작게 휜다.

4. 대상에게 명중한다.

위 과정에서 시전자의 몸에서 사출하고 대상에게 명중하는 1번과 4번은 3차 베지어 곡선에서 Anchor Point 이고,

2번 크게 휘는 것과 3번 작게 휘는 것은 3차 베지어 곡선에서의 Handle 이다.

이를 수식으로 그려보면 위 그림과 같다.

주황색 점은 Anchor Point 와 Handle 을 의미하고, 빨간색 선이 베지어 곡선이다.

위 그림은 이케시안 폭우 미사일 12개 중 단 하나의 궤적만을 나타내며, 이케시안 폭우 미사일은 다양한 방향으로 사출되어 다양한 곡선을 그리며 날아간다.

여태까지 베지어 곡선을 이용해 이케시안 폭우 미사일의 궤적을 그려봤다.

이제 그 궤적을 따라 날아가는 미사일을 Unity 에서 구현해보는 것만 남았다.

$$P = {(1-t)}^{3}{P}_{0}+3{(1-t)}^{2}t{P}_{1}+3(1-t){t}^{2}{P}_{2}+{t}^{3}{P}_{3}$$

3차 베지어 곡선의 식은 위와 같다. (참고 링크: https://en.wikipedia.org/wiki/B%C3%A9zier_curve)

티스토리에 쓴걸 복붙한건데 내용이 제한을 넘어서 그냥 티스토리 링크 검

https://tonikat.tistory.com/10

[위스플(wlsh0310)]

아따 이게 수학인가먼가 하는건가보구마잉 - dc App

[김메가(scw973108)]

[익명(223.38)]

개추 3개주고싶다 - dc App

[익명(1.234)]

두트윈 사용 - 끝

[익명(211.195)]

기대된다

[익명(222.120)]

한번 궁금했다가 몰라서 묻어놨는데 개추

[익명(124.57)]

시작점 끝점은 정해져있고 중간에 경로모양만 바꿔주는거임?

[익명(183.91)]

마지막 움짤때문에 약간 오해될 수 있는데 원을 따라 움직이는 두개의 점들은 실시간으로 움직이는게 아니라 저 점들의 위치에 따라 곡선이 어떻게 변화하는가를 보여주기 위한 움짤입니다. 카이사의 Q를 보면 무작위 형태의 곡선을 그리면서 코그모에게 명중하죠? 이 무작위 형태의 곡선을 그리는 데에 어느정도 공식이 있음을 표현하고 싶었습니다.

[익명(124.57)]

정말로 땡큐합니다

[퀼트(mok9181)]

[익명(58.236)]

유익한글이었다