Colin's Blog
자바스크립트로 천문학적인 현상 애니메이션 만들기

이번 튜토리얼에서는 자바스크립트를 사용하여 천문학적인 현상을 시뮬레이션하는 간단한 애니메이션을 만들어 보겠습니다.

준비물

  1. HTML 파일
  2. CSS 파일
  3. JavaScript 파일

개요

이 애니메이션은 HTML5의 canvas 요소를 사용하여 구현됩니다. 우리는 태양과 행성, 그리고 그들 간의 궤도를 그릴 것입니다. 이를 위해 다음과 같은 단계를 따라 진행합니다.

  1. HTML 파일에서 canvas 요소 생성
  2. CSS 파일에서 canvas 요소 스타일링
  3. 자바스크립트 파일에서 애니메이션 구현

애니메이션 구현

1. HTML 파일에서 canvas 요소 생성하기

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

2. CSS 파일에서 canvas 요소 스타일링하기

#myCanvas {
  border: 1px solid black;
}

3. 자바스크립트 파일에서 애니메이션 구현하기

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 태양 그리기
function drawSun() {
  ctx.beginPath();
  ctx.arc(400, 300, 50, 0, 2 * Math.PI);
  ctx.fillStyle = 'yellow';
  ctx.fill();
  ctx.stroke();
}

// 행성 그리기
function drawPlanet(radius, orbitRadius, orbitSpeed, color) {
  const angle = Date.now() * orbitSpeed;
  const x = canvas.width / 2 + Math.cos(angle) * orbitRadius;
  const y = canvas.height / 2 + Math.sin(angle) * orbitRadius;

  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
  ctx.stroke();
}

// 애니메이션 프레임 그리기
function drawFrame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 태양 그리기
  drawSun();

  // 행성 그리기
  drawPlanet(20, 150, 0.01, 'blue');
  drawPlanet(10, 250, 0.03, 'green');
  drawPlanet(15, 350, 0.02, 'red');

  requestAnimationFrame(drawFrame);
}

// 애니메이션 시작
drawFrame();

위의 자바스크립트 코드는 drawSun() 함수를 사용하여 태양을 그리고, drawPlanet() 함수를 사용하여 행성을 그리며, drawFrame() 함수에서 애니메이션 프레임을 그리도록 구성되어 있습니다.

이렇게 구현한 후, 웹 브라우저에서 HTML 파일을 열면 천문학적인 현상을 시각적으로 볼 수 있는 간단한 애니메이션을 확인할 수 있습니다.

결론

이 튜토리얼에서는 자바스크립트를 사용하여 천문학적인 현상 애니메이션을 만드는 방법을 알아보았습니다. canvas 요소를 활용하여 태양과 행성을 그리고, 애니메이션을 구현하는 방법에 대해 배웠습니다. 이를 응용하여 더 복잡한 천문학적인 현상을 시뮬레이션하는 애니메이션을 만들어 볼 수 있습니다.

© 2018 Colin. All rights reserved.