앞서의 w3schools의 예제는
rotate와 translate를 이용하여
좌표의 기준 축을 이동시켜서
각각의 위치에 시간을 표시했다.
여기서는 간단한 삼각함수를 이용하여 구현하는 방법을 정리한다.
먼저, 시계를 구현하기 위해 삼각함수가 필요한 이유는
다음 그림에서 첫 번째 그림을 참고하면 된다.
시간을 출력하기 위해서
각 시간의 X, Y 좌표 값을 계산한다.
예로 1시의 좌표는 그림에서 보듯이
시계 중앙에서 시작된 직삼각형을 이용할 수 있다.
먼저, X 좌표는 두 번째 그림의 b길이에 해당한다.
(b의 시작점은 0 이고 종료점이 길이 이기 때문에...)
a 값은 원의 반지름,
즉 앞서 예제에서는 radius가 된다.
각도는 1 / 12 * 360 이므로 30도로 계산된다.
즉, 한변과 각도(끼인각)을 이용하면 b를 계산할 수 있고
이때 사용하는 것이 삼각함수 cos 이고
공식은 다음과 같다.
cos 30 = b / a
=> b = cos 30 * a
다만, 라디안으로 구현해야 하므로
=> b = cos (30 / 180) * a
다음으로 Y좌표는
그림에서 보듯이 c 값을 구해야 한다.
각도와 a의 값을 알고 있으니
삼각함수 sin을 이용해서 계산한다.
sin 30 = c / a
=> c = sin 30 * a
=> c = sin (30 / 180) * a
정리하면 X, Y 좌표는
X = cos (30 / 180) * a
Y = sin (30 / 180) * a
으로 간단하게 구할 수 있다.
그런데 다음 그림과 같이 문제가 있다.
첫번째 그림과 같이 Canvas에서는 시작하는 각도는
12시 부분이 기준으로 0 (360)도가 된다.
삼각함수는 두 번째 그림과 같이
3시 부분이 기준으로 0 (360)도가 된다.
이 내용을 다시 다음 표로 정리했다.
|
시간 |
시간에 대한 각도 |
실제 각도 |
| 1 |
30 |
-60 |
2 |
60 |
-30 |
| 3 |
90 |
0 |
| 4 |
120 |
30 |
| 5 |
150 |
60 |
| 6 |
180 |
90 |
| 7 |
210 |
120 |
| 8 |
240 |
150 |
| 9 |
270 |
180 |
| 10 |
300 |
210 |
| 11 |
330 |
240 |
| 12 |
360 |
270 |
여기서 공식이 나오게 된다.
각 시간의 실제 각도 (시간 * 30)는
시간에 계산된 각도에서 90을 빼준 값(-90)이다.
즉, 끼인각은
(시간 * 30) - 90
이라는 공식으로 계산하게 된다.
이 공식을 앞서의 좌표와 합치면 다음과 같다.
X = cos (((시간 * 30) - 90) / 180) * a
Y = sin (((시간 * 30) - 90) / 180) * a
이것을 자바스크립트로 작성하면
다음 코드의 8과 9라인이 된다.
공식에서 사용된 변수 a는 반지름을 의미하므로
radius값을 이용한 pos(시계보다 작은값 부여) 된다.
w3schools 예제에서는 fillText 함수의 좌표 값이 0, 0 이었지만
여기서는 계산된 좌표 값이 부여 되었다.
w3schools는 기준축을 이동시켰고
여기서는 기준축을 시계 중앙에 고정시키고
출력할 좌표 값을 변경하는 방식을 사용한 것이다.
'JavaScript > 아날로그 시계' 카테고리의 다른 글
| 2. 아날로그 시계 - w3schools 예제 분석 I (0) | 2017.03.11 |
|---|---|
| 3. 아날로그 시계 - w3schools 예제 분석 II (0) | 2017.03.11 |
| 5. 아날로그 시계 - 삼각함수 이용 II (0) | 2017.03.11 |
| 6. 아날로그 시계 - SVG I (0) | 2017.03.11 |
| 7. 아날로그 시계 - SVG II (0) | 2017.03.11 |