원의 내각이 주어졌을 때, 원의 좌표(x, y)를 구하는 방법에 대해 정리해보고자 합니다.
구하는 방법은 매우 간단합니다.
반지름(r)이 1인 원이 있다고 가정 해봅시다.
그러면, 위 그림에서 볼 수 있듯이 내각(θ)를 가지는 x, y의 좌표는 (cosθ, sinθ)가 되게 됩니다.
즉, θ 각도를 가지고 있는 x좌표는 cosθ, y좌표는 sinθ를 이용하면 된다는 것 입니다.
그럼, 이제 어떻게 JS를 이용하여 좌표를 구할 수 있는지 코드로 알아보도록 합시다.
구현 코드
JavaScript에서는 sin과 cos을 구하는 메소드를 Math함수를 이용하여 제공( 참고링크 )하고 있습니다.
const cos = Math.cos(0);
const sin = Math.sin(1);이때 주의 할 점은, 인자를 넣을 때 우리가 일반적으로 생각하는 각도를 넣는 것이 아니라 radian이라는 단위로 넣어줘야 한다는 것입니다.
(참고로 JavaScript 대부분에서는 우리가 일반적으로 사용하는 각도가 아닌, radian(호도법)을 사용합니다. )
1. Degree To Radian
radian은 약 57.2958 degree이며,
구하는 방법은 아래와 같습니다.
function toRadian(degree){
return degree * Math.PI / 180
}radian은 우리가 일반적으로 사용하는 각도법을, 호도법이라는 방식으로 나타내는 것으로 자세한 내용은 참고링크를 참조 부탁드립니다.
자, 이렇게 radian을 구하였으니, sin, cos 함수에 넣어서 우리가 원하는 각도를 구해 봅시다.
2. Get Coordinates
구하는 방법은 앞서 설명 드린 것 처럼 매우 간단합니다.
내각(θ)과 원의 반지름(radius)만 주어진다면 아래 처럼 간단히 좌표를 구할 수 있습니다.
function getCircleCoordinates(radians, radius){
return {x: radius * Math.cos(radians), y: radius * Math.sin(radians)}
}
근데, 위의 방식으로 좌표를 구현하면 이상함을 느낄 수 있을 것입니다.
잠시 아래 사진을 살펴 봅시다.
자, 반지름이 1인 원의 각도가 270도라면, 아래 사진의 위치(x: -1, y: 0)가 될 줄 알았으나
그렇다고 하기에는 좌표가 이상했습니다.
그 이유는 radian의 시작 지점(즉, 0도)의 위치가 정동쪽에 있기 때문입니다.
2-1. 오차 조정
아래 사진은, 0도부터 360도까지 500ms 마다 점을 찍도록 만든 결과입니다.
영상에서 볼 수 있듯이 정동쪽에서 시작하여, 시계방향으로 돌아가는 것을 확인 할 수 있었습니다.
저는 기존에 정북쪽이 당연히 0도라고 생각 했기에, 0도의 위치를 조정해줄 필요가 있었습니다.
최종 코드
아래는 최종적으로 저 동영상을 만든 코드 입니다. (즉시 실행 함수를 이용하여 500ms마다 점을 찍도록 만들었습니다.)
<head>
<meta charset="utf-8">
<style>
canvas { border:2px solid black; }
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = 150; //반지름
var center = { x: 200, y: 200 };
var obj = {};
// 0도 ~ 360도 까지 10도씩 증가
(function recursive(i){
if(i > 360){
return;
}
obj.x = Math.floor(radius * Math.cos( toRadians(i) ));
obj.y = Math.floor(radius * Math.sin( toRadians(i) ));
ctx.strokeRect( center.x+obj.x , center.y+obj.y, 2,2);
setTimeout(recursive, 500, i + 10)
})(0)
}
function toRadians(degrees) {
return degrees * (Math.PI / 180);
}
</script>
</body>
</html>
잘못된 정보나 궁금한 점이 있다면 언제든지 댓글로 문의 부탁드립니다.
'JavaScript' 카테고리의 다른 글
| Content-Type vs Accept vs responseType(feat. XHR, ajax) (0) | 2024.01.09 |
|---|---|
| Session Store vs Cache (0) | 2022.11.17 |
| [Solved] 쿠키 삭제가 안되는 문제 (cookies.remove doesn't work) (0) | 2022.10.14 |
| [JS] 깊은 복사, 얕은 복사 (깊은 복사 하는 방법) (0) | 2022.08.26 |
| Cookie 옵션 설정하기 (feat. iframe cookie 문제 해결) (0) | 2022.07.12 |
