[ HTML5 ] Sin, Cos을 이용한 Vounce 이해

Your browser does not support HTML5 Canvas.
위와 같이 벽면에서 Circle을 사용할려고 할 때, 입사각과 반사각을 구하게 된다.
이럴 때 사용하는 공식이

좌우 벽면 : 180 - angle
상하 벽면 : 360 - angle 

위와 같은 공식을 사용하게 된다. ( 자세히 알고 싶으신 분은 위 Canvas 소스에 있으니 참고하세요.^^)

왜 저런 공식이 나오는 지 궁금해서 한번 조사해보았다.
Cos Sin의 원리만 알면 간단했다.

위 그림을 보시면 연두색이 Cos 이며 빨간색은 Sin임을 알 수 있다.

[ 원리 ]
1. 180도일 경우 Sin의 값은 동일하다.
2. 360도일 경우 Cos의 값은 동일하다.

하지만!!

3. 360도일 경우 Sin의 값은  동일하나 부호가 반대가 된다.
4. 180도일 경우 Cos의 값은 동일하나 부호가 반대가 된다. 

3번과 4번의 원리를 이용하여 , x값이나 y값의 방향을 바꿔주어 벽면에 바운스 되는 느낌을 표현하는 것이다.

이해하는데 시간이.. 좀 걸렸다.

역시 나이 먹고 머리 굴리는 것은 힘들긴 하지만~ 이해하고 나니 너무 뿌듯하다.^^