핵심 기능은 다 구현이 되었기 때문에, 부가적인 요소를 생각해봅시다.
여러가지 함수를 테스트해봤지만 1차식을 사용했을 때 가장 그럴싸한 결과가 나오는 것을 확인할 수 있었습니다.
5등급정도의 별이 1px정도의 크기를 가지고, 0등급정도의 별이 7px정도의 크기를 가지게 만들어줍시다. 절대적인 공식은 없고, 보기에 적절하게 조절된 것 같을때가지 변수를 조절해주면 됩니다.
1 | // brightness : mag -> size |
지금까지 한 일들은 다음과 같습니다.
이제는 별의 (방위각, 고도)값을 이용하여 브라우저에서 표시될 위치를 계산해야합니다.
모니터는 직사각형이고 천구는 반구의 형태입니다. 그렇기 때문에 반구를 평면에 투영하는 과정이 필요합니다. 이 때, 투영을 어떤 식으로 하냐에 따라서 실제 투영된 평면에 맺힌 상이 다릅니다. 다양한 투영방식이 있고, 그에 따른 다양한 왜곡이 생겨납니다.
이 글에서는 Stereographic Projection과 Cylindrical Projection을 활용합니다.
이번 챕터에서는 브라우저에서 사용될 코드를 작성합니다.
단순한 플라네타리움의 구현이 목표이기 때문에, 프론트(HTML, CSS, JS) 코드는 최소한으로 간단하게만 구성합니다.
이번 챕터에서 프론트에서 구현해야 하는 로직은 다음과 같습니다.
<star>라는 태그이름을 쓰겠습니다) 생성window에 element 배치참고로, 별마다 HTML element를 생성한다면 성능에 큰 문제가 있을 가능성이 높습니다. 하지만 제대로 표현되는 것을 확인하는데에는 문제가 없으니 이대로 진행한 후 성능개선이 필요한 경우 해당 부분을 교체하면 됩니다.
밤하늘의 모든 별의 위치를 한번에 표현할 수 있는 수식은 사실상 없습니다. 즉, 밤하늘에 있는 별들의 위치는 랜덤에 가깝습니다. 따라서 밤하늘의 별들의 위치를 직접 측정한 정보(혹은 데이터베이스)가 필요합니다.
우리가 필요한 것들은 구글링 해보면 보통 나옵니다. 별의 위치를 저장한 데이터베이스중 아무거나 써도 상관없지만, 이 글에서는 HYG-database를 이용합니다.
이 데이터베이스를 꼭 써야하는 이유는 없습니다. 마음에 드는 데이터베이스를 사용하면 됩니다.