[플라네타리움 구현기] 5. 다듬기

목차

핵심 기능은 다 구현이 되었기 때문에, 부가적인 요소를 생각해봅시다.

별 겉보기등급 반영

여러가지 함수를 테스트해봤지만 1차식을 사용했을 때 가장 그럴싸한 결과가 나오는 것을 확인할 수 있었습니다.

5등급정도의 별이 1px정도의 크기를 가지고, 0등급정도의 별이 7px정도의 크기를 가지게 만들어줍시다. 절대적인 공식은 없고, 보기에 적절하게 조절된 것 같을때가지 변수를 조절해주면 됩니다.

1
2
// brightness : mag -> size
const brightness = mag => Math.min(6.0, (-11/9) * mag + (21/3));;

[플라네타리움 구현기] 4. 투영 구현

목차

지금까지 한 일들은 다음과 같습니다.

이제는 별의 (방위각, 고도)값을 이용하여 브라우저에서 표시될 위치를 계산해야합니다.

투영(Projection)

모니터는 직사각형이고 천구는 반구의 형태입니다. 그렇기 때문에 반구를 평면에 투영하는 과정이 필요합니다. 이 때, 투영을 어떤 식으로 하냐에 따라서 실제 투영된 평면에 맺힌 상이 다릅니다. 다양한 투영방식이 있고, 그에 따른 다양한 왜곡이 생겨납니다.

이 글에서는 Stereographic Projection과 Cylindrical Projection을 활용합니다.

[플라네타리움 구현기] 3. 좌표계 변환

목차

지금까지 한 일들은 다음과 같습니다.

이제 이번 챕터에서는 핵심 로직중 하나인 좌표계 변환을 구현합니다.

코드를 설명하기 전에 간단하게 좌표계에 관한 내용을 다루고 갑시다.

[플라네타리움 구현기] 2. 스켈레톤 구현

목차

지난챕터에는 별들의 좌표를 얻기위해 HYG database에서 필요한 정보만 추출했습니다.

이번 챕터에서는 브라우저에서 사용될 코드를 작성합니다.

단순한 플라네타리움의 구현이 목표이기 때문에, 프론트(HTML, CSS, JS) 코드는 최소한으로 간단하게만 구성합니다.

이번 챕터에서 프론트에서 구현해야 하는 로직은 다음과 같습니다.

  • json 파일 로드
  • json에 들어있는 좌표만큼 element(<star>라는 태그이름을 쓰겠습니다) 생성
  • 좌표값을 이용하여 window에 element 배치

참고로, 별마다 HTML element를 생성한다면 성능에 큰 문제가 있을 가능성이 높습니다. 하지만 제대로 표현되는 것을 확인하는데에는 문제가 없으니 이대로 진행한 후 성능개선이 필요한 경우 해당 부분을 교체하면 됩니다.

[플라네타리움 구현기] #1. HYG Database 처리

목차

HYG 데이터베이스

밤하늘의 모든 별의 위치를 한번에 표현할 수 있는 수식은 사실상 없습니다. 즉, 밤하늘에 있는 별들의 위치는 랜덤에 가깝습니다. 따라서 밤하늘의 별들의 위치를 직접 측정한 정보(혹은 데이터베이스)가 필요합니다.

우리가 필요한 것들은 구글링 해보면 보통 나옵니다. 별의 위치를 저장한 데이터베이스중 아무거나 써도 상관없지만, 이 글에서는 HYG-database를 이용합니다.

이 데이터베이스를 꼭 써야하는 이유는 없습니다. 마음에 드는 데이터베이스를 사용하면 됩니다.

[플라네타리움 구현기] #0. 들어가며

목차

들어가며

눈이 좋은사람이 밤하늘을 본다면 대략 7.9등급의 별까지 보인다고 합니다.

천체투영기(플라네타리움)를 이용하면 시간과 장소에 구애받지 않고, 가상으로 구현된 밤하늘을 볼 수 있습니다.

이 글에서는 웹 브라우저로 실제 접속중인 위치에서의 밤하늘이 어떻게 보이는지 구현하는 방법과 예시를 설명합니다.

보다 더 자세하고 기능이 다양한 플라네타리움 프로그램이 필요한 경우 스텔라리움과 같은 천체투영 프로그램을 이용하면 됩니다. 스텔라리움과 같은 프로그램은 웹 버전 역시 지원하고 있습니다.