Silverback9

오늘은 각의 크기를 통해 속도 벡터의 x, y 좌표값을 알아내어서 삼각형을 움직이는 프로그램을 만들어 보겠습니다~^^*

어제는 속도 벡터의 x,y 좌표 값을 통해 각의 크기를 알아내어서 삼각형을 회전하는 프로그램을 만들어 보았지요~^^*

오늘은 그 반대 작업을 하는 것이겠네요~^^* 음..그럼 어제는 역삼각함수를 사용했다면, 오늘은 삼각함수를 사용하는 것인가요~^^* 와우, 재미있겠는데요! 시작해 봅~시다~~~^^*

아래 동영상 강의를 클릭하시면 오늘 공부내용을 바로 시작(5:00)하실 수 있어요~~^^*

네, 어제 공부한 삼각함수를 다시 한 번 복습해 볼게요~~^^*

모든 삼각형은,

하나. [ sin(각크기) = 마주보는 변 / 빗변 ]

둘. [ cos(각크기) = 인접하는 변 / 빗변 ]

셋. [ tan(각크기) = 마주보는 변 / 인접하는 변 ]

빗변의 길이가 1인 삼각형은,

하나. sin(각크기) = 마주보는 변 / 1 = 마주보는 변

둘. cos(각크기) = 인접하는 변 / 1 = 인접하는 변

셋. tan(각크기) = 마주보는 변 / 인접하는 변

이었지요~^^*

단위 벡터의 경우 크기 즉, 길이가 1이기 때문에, 빗변의 길이가 1인 삼각형의 경우에 해당하겠네요~^^*

그러면, 단위 벡터의

(1) x축 이동거리는 cos(각크기)이고 (2) y축 이동거리는 sin(각크기)

가 되겠네요!

이 계산 과정을 통해, x, y 좌표를 알아내는 함수를 p5. js가 지원하고 있습니다.

바로 함수 fromAngle() 입니다!!

어제 배운 함수 heading()은 [ y 좌표 / x 좌표 ] 값을 통해 각크기를 알아내는 일을 하고,

오늘 배울 함수 fromAngle()은 각크기를 통해서 x 좌표와 y 좌표를 알아내는 일을 하네요.

함수 heading()은 역탄젠트함수를 내부에서 사용하는데,

함수 fromAngle()은 사인함수와 코사인함수를 내부에서 사용하겠군요.

노트 정리를 해보았습니다~^^*

네, 각크기를 넣어서 단위 벡터를 만들고 이것을 물체의 속도 벡터로 사용해 보겠습니다~^^*

음…그런데, 동영상 강의의 화살표 버튼을 눌러 삼각형을 움직이는 것이, 저의 노트북에서는 구현이 안되네요. 마우스를 사용해서 삼각형을 움직이는 것으로 바꾸어 보고 싶어요.

근데…제가 이제 다른 일이 있어서…오전 안에 마무리는 못하겠어요… 저녁에 다시 돌아와서 코드를 만들어 볼게요….!

즐거운 하루 보내시구요~~^^* 저녁에 다시 만나요~~~^^* Have a Good Day~~^^*

강아지도 연습을 열심히 해서 운전을 해내는데…마우스로 삼각형 운전을 꼭 해 볼게요!

꿈은 이루어 집니다~~!!