5. 아날로그 시계 - 삼각함수 이용 II

마지막 처리로

시간, 분, 초에 대한 시계 바늘을

삼각함수를 이용하여 자바 스크립트로 구현한다.

원리는 앞서 구현한 시간을 표현하는 것과

동일한 방식으로 계산하기 때문에

다음 내용을 읽기 보다는

직접 구현해 보는 것이 실력향상에 도움이 될 것이다.

여기서 정리할 것은

모두 앞에서 정리되었기 때문에,

여기서는 간단하게 몇 가지만 정리한다.

w3schools 예제에서 현재 시각(Date)을 구한 뒤

시간, 분, 초로 나누어서

변수(hour, minute, second)에 저장했다.

코드는 시간, 분, 초의 순서로 작성했지만

코드가 초, 분, 시간 순서로 복잡해 지기 때문에

쉬운것 부터 정리한다.

function drawTime(ctx, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var pos = radius*0.5; //hour x = pos* Math.cos(Math.PI* ((hour*30)- 90 + 30/60*minute + 30/60/60*second) / 180); y = pos* Math.sin(Math.PI* ((hour*30)- 90 + 30/60*minute + 30/60/60*second) / 180); drawHand(ctx, x, y, radius*0.07); //minute pos = radius*0.8; x = pos * Math.cos(Math.PI* ((minute * 6)- 90 + 6/60*second)/ 180); y = pos * Math.sin(Math.PI* ((minute * 6)- 90 + 6/60*second)/ 180); drawHand(ctx, x, y, radius*0.07); // second pos = radius*0.9; x = pos * Math.cos(Math.PI* ((second * 6)- 90)/ 180); y = pos * Math.sin(Math.PI* ((second * 6)- 90)/ 180); drawHand(ctx, x, y, radius*0.02); } function drawHand(ctx, x, y, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.lineTo(x, y); ctx.stroke(); }

clock.html

먼저, 초를 삼각함수를 이용하여 계산하는 것은

시간과 동일하다.

X = cos (((시간 * 30) - 90) / 180) * a
Y = sin (((시간 * 30) - 90) / 180) * a

시간에서 사용된 위 코드와

21라인과 22라인의 계산 공식을 비교해 보면 동일한 것을 알 수 있다.

30 과 6 이라는 값만 차이가 있다.

시간은 360도를 12로 나누어서 시간당 30도의 값을 가진 것이고

초는 360도를 60으로 나누어서 초당 6도의 값을 가진 것 뿐이다.

다음으로 분도 같은 공식으로 계산된다.

다만, 미세하지만 초가 증가한 만큼 (6/60*second)

분의 각도를 더해 줘야 한다 [15, 16라인].

초가 증가한 만큼 분의 각도를 더해만 주면 되기 때문에

90을 빼지 않는다.

특히, 분에 대한 초의 각도는

360도를 60초 동안 가는 것으로 계산하는 것이 아니고

1분이 가는 각도 6 도를 60으로 나누어서 가기 때문에

증가한 값은 아주 적다.

마지막으로 시간도 앞서 계산한 공식과

같은 원리에 의해서 계산된다 [9, 10 라인].

분침에 초의 값을 더하는 것은 의미가 적지만

시간은 실행 결과가 조금 다를 수 있다.

따라서, 시간의 각도에 분과 초의 각도를 제대로 계산해야 한다.

예로 5시 30분인데 시침이 5시에 있다면 버그가 될 것이다.

시침은 5시와 6시 사이에 있어야 한다.

시간에 대한 분의 각도 계산은 앞서와 동일한 방식으로

1시간에 증가하는 각도 30도를

60으로 나누어서 현재 분의 값을 곱해주면 된다.

= 30 / 60 * 분

실제로 시계 바늘을 그리는 drawHand 함수에도 조금 차이가 있다.

w3schools 예제에서는

각도(pos), 바늘 길이(length), 바늘 굵기(width)가 파라메타로 필요했다.

function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); }

작성된 코드의 26라인을 보면

각도와 길이 대신에 x, y 좌표로 바뀌었다.

w3schools 예제에서는 어떤 각도에 얼마큼의 길이로 그려야 했고

삼각함수에서는

중앙에서 계산된 좌표로 선을 그리면 되기 때문이다.

지금까지 2가지 방식으로

같은 기능을 구현하는 방식을 정리하였다.

어떤 방식이 더 좋다고 단정할 수 없고

개인의 선택 문제로 자신에게 알맞는 방식을 찾길 바란다.