날짜, 시간 및 위치에 따라 보이는 별자리를 보여주는 인터랙티브 SVG 밤하늘 지도를 생성합니다. 자동 감지 또는 수동 좌표 입력, 별자리 이름, 별 위치 및 수평선 기능이 포함되어 있습니다.
별자리 뷰어 앱은 천문학 애호가와 별 관찰자를 위한 강력한 도구입니다. 사용자가 자신의 위치, 날짜 및 시간에 따라 밤하늘을 시각화하고 보이는 별자리를 식별할 수 있도록 합니다. 이 인터랙티브 애플리케이션은 별자리 이름, 기본 별 위치 및 지평선이 표시된 간단한 SVG 밤하늘 지도를 제공하며, 단일 페이지 인터페이스 내에서 모든 기능을 제공합니다.
앱은 천체 좌표와 시간 계산의 조합을 사용하여 밤하늘에서 보이는 별자리를 결정합니다:
적경(RA) 및 적위(Dec): 이는 각각 경도와 위도의 천체 동등물입니다. RA는 시간(024)으로 측정되며, Dec는 도(-90°+90°)로 측정됩니다.
지역 항성 시간(LST): 이는 관측자의 경도와 현재 날짜 및 시간을 사용하여 계산됩니다. LST는 현재 하늘에서 어떤 부분이 머리 위에 있는지를 결정합니다.
시각각(Hour Angle, HA): 이는 자오선과 천체 객체 간의 각 거리로, 다음과 같이 계산됩니다:
고도(Alt) 및 방위각(Az): 이는 다음 공식을 사용하여 계산됩니다:
여기서 Lat는 관측자의 위도입니다.
앱은 보이는 별자리를 결정하고 하늘 지도를 렌더링하기 위해 다음 단계를 수행합니다:
별자리 뷰어 앱은 다양한 용도로 사용됩니다:
우리의 별자리 뷰어 앱은 밤하늘을 보는 간단하고 접근 가능한 방법을 제공하지만, 다른 도구도 사용할 수 있습니다:
별자리 매핑 및 별 차트의 역사는 수천 년 전으로 거슬러 올라갑니다:
앱은 TypeScript 파일에 저장된 간소화된 별자리 데이터베이스를 사용합니다:
1export interface Star {
2 ra: number; // 적경(시간)
3 dec: number; // 적위(도)
4 magnitude: number; // 별 밝기
5}
6
7export interface Constellation {
8 name: string;
9 stars: Star[];
10}
11
12export const constellations: Constellation[] = [
13 {
14 name: "큰곰자리",
15 stars: [
16 { ra: 11.062, dec: 61.751, magnitude: 1.79 },
17 { ra: 10.229, dec: 60.718, magnitude: 2.37 },
18 // ... 더 많은 별
19 ]
20 },
21 // ... 더 많은 별자리
22];
23이 데이터 구조는 별자리의 효율적인 조회 및 렌더링을 가능하게 합니다.
앱은 D3.js를 사용하여 SVG 밤하늘 지도를 생성합니다. 다음은 렌더링 프로세스의 간단한 예입니다:
1import * as d3 from 'd3';
2
3function renderSkyMap(visibleConstellations, width, height) {
4 const svg = d3.create("svg")
5 .attr("width", width)
6 .attr("height", height)
7 .attr("viewBox", [0, 0, width, height]);
8
9 // 하늘 배경 그리기
10 svg.append("circle")
11 .attr("cx", width / 2)
12 .attr("cy", height / 2)
13 .attr("r", Math.min(width, height) / 2)
14 .attr("fill", "navy");
15
16 // 별 및 별자리 그리기
17 visibleConstellations.forEach(constellation => {
18 const lineGenerator = d3.line()
19 .x(d => projectStar(d).x)
20 .y(d => projectStar(d).y);
21
22 svg.append("path")
23 .attr("d", lineGenerator(constellation.stars))
24 .attr("stroke", "white")
25 .attr("fill", "none");
26
27 constellation.stars.forEach(star => {
28 const { x, y } = projectStar(star);
29 svg.append("circle")
30 .attr("cx", x)
31 .attr("cy", y)
32 .attr("r", 5 - star.magnitude)
33 .attr("fill", "white");
34 });
35
36 // 별자리 이름 추가
37 const firstStar = projectStar(constellation.stars[0]);
38 svg.append("text")
39 .attr("x", firstStar.x)
40 .attr("y", firstStar.y - 10)
41 .text(constellation.name)
42 .attr("fill", "white")
43 .attr("font-size", "12px");
44 });
45
46 // 지평선 그리기
47 svg.append("line")
48 .attr("x1", 0)
49 .attr("y1", height / 2)
50 .attr("x2", width)
51 .attr("y2", height / 2)
52 .attr("stroke", "green")
53 .attr("stroke-width", 2);
54
55 return svg.node();
56}
57
58function projectStar(star) {
59 // RA 및 Dec를 x, y 좌표로 변환
60 // 이는 단순화된 투영이며 적절한 천체 투영으로 대체되어야 합니다.
61 const x = (star.ra / 24) * width;
62 const y = ((90 - star.dec) / 180) * height;
63 return { x, y };
64}
65앱은 다양한 시간대와 위치를 다음과 같이 처리합니다:
앱은 빛 공해를 직접적으로 고려하지 않지만, 사용자는 다음을 알고 있어야 합니다:
지평선 선은 관측자의 위치에 따라 계산됩니다:
앱은 보이는 별자리의 계절적 변동을 다음과 같이 고려합니다: