웹/Javascript

삼각함수를 이용한 지구와 달의 궤도 그리기

옥돌소녀 2019. 11. 4. 15:01 

<!DOCTYPE html>

<!-- 삼각함수를 이용한 지구와 달의 궤도 그리기  -->
<!-- sin세타 : 높이(b)) / 빗변(c) -->
<!-- b= sin세타 * c -->
<!-- c가 1일 때 , b=sin세타  -->
<!-- cos세타 : 밑변(a) / 빗변(c) -->
<!-- c가 1일 때 , a=cos세타 -->
<!-- tan세타 : 높이(b) / 밑변(a) -->

<!-- 결국 반지름이 1인 원의 X,Y 좌표는 -->
<!-- (X,Y) -> (Cos 세타, Sin 세타) -->

<!-- 라디안 단위 : 호도법 -->
<!-- 호의 길이 R(1) 이고, 반지름이 R(1)인 원에서  -->
<!-- 1라디안 = 180 / PI(3.14) =0.059 실수 값 -->
<!-- 1도 = PI / 180 라디안 -->
<!-- 0도 : 0라디안 -->
<!-- 90도 : PI/2 라디안 -->
<!-- 180도 : PI 라디안 = 3.14 -->
<!-- 360도: 2*PI 라디안= 6.28 -->



<html lang="en">
<head>
    <script>
        window.onload=function(){
            var sun=document.getElementById('sun');
            var earth=document.getElementById('earth');
            var moon=document.getElementById('moon');

            sun.style.position='absolute';
            earth.style.position='absolute';
            moon.style.position='absolute';

            // 태양의 위치를 중심점으로 이동
            sun.style.left=250+'px';
            sun.style.top=200+'px';

            //지구의 각도 값  
            var earthAngle=0;

            //달의 각도 값 
            var moonAngle=0;

            setInterval(()=>{
                //각도로 지구와 달의 좌표(x,y)값을 구한다 
                var earthX = 250+150 *Math.cos(earthAngle);
                var earthY = 250+150 * Math.sin(earthAngle);
                var moonX= earthX + 50 * Math.cos(moonAngle);
                var moonY= earthY + 50 * Math.sin(moonAngle);
                // 위치 이동
                earth.style.left=earthX +'px';
                earth.style.top=earthY+'px';
                moon.style.left=moonX +'px';
                moon.style.top=moonY +'px';

                //각도값을 시간에 따라 증가시킴
                earthAngle+=0.1;
                moonAngle+=0.3;

            },1000 /30);



        };
    </script>
</head>
<body>
    <h1 id="sun">Sun</h1>
    <h1 id="earth">Earth</h1>
    <h1 id="moon">Moon</h1>
</body>
</html>