Star Art — 밤하늘에 나만의 별자리 그리기

시작 — 그려보는 별자리

별자리는 누군가가 밤하늘의 점들을 이어서 만든 것입니다. 그렇다면 나도 내 별자리를 만들 수 있지 않을까 — Star Art는 그 단순한 아이디어에서 출발했습니다.

---

세 가지 도구

Star Art의 도구는 세 가지입니다.

도구	동작
⭐ Star	캔버스 터치/클릭으로 별 배치
✏️ Line	별과 별 사이를 선으로 연결
🧹 Eraser	별 삭제 (연결된 선도 함께 제거)

별을 찍으면 글로우와 함께 반짝이는 애니메이션이 자동으로 적용됩니다. 각 별에는 미세한 위상 차이가 있어 자연스러운 깜빡임을 만듭니다.

const twinkle = st.brightness * (0.7 + 0.3 * Math.sin(tick * 0.02 + st.id * 1.7));

선 도구는 별 위에 마우스를 올리면 커서가 연필 모양으로 바뀝니다. SVG 기반 커스텀 커서를 동적으로 생성해, 대상 별에 가까워지면 활성 색상으로 전환됩니다.

---

별의 다양성

별은 5가지 색상, 4가지 크기, 2가지 형태를 조합할 수 있습니다.

• 색상: 흰색, 청백색, 금색, 적색, 보라색
• 크기: 2px, 4px, 7px, 11px (각각 글로우 반경 6~30px)
• 형태: 원형, 5각 별

별 하나당 코어(밝은 중심)와 두 겹의 radialGradient 글로우가 적용됩니다. 외곽 글로우는 lighter 합성 모드로 겹쳐 밝게 빛나는 효과를 냅니다.

// 외곽 글로우 — lighter 합성으로 밝게
ctx.globalCompositeOperation = 'lighter';
const outerGlow = ctx.createRadialGradient(x, y, 0, x, y, glowR * 1.6);
outerGlow.addColorStop(0, color);
outerGlow.addColorStop(0.35, color + '50');
outerGlow.addColorStop(1, 'transparent');

---

랜덤 별자리 배치

주사위 버튼을 누르면 실제 별자리 데이터에서 무작위로 하나를 골라 캔버스에 배치합니다. IAU 88개 별자리의 항성 좌표(RA/Dec)를 캔버스 좌표로 변환합니다.

RA(적경)는 래핑이 있어 단순 평균이 안 됩니다. 삼각함수 기반 원형 평균으로 중심을 구합니다.

const sinSum = ras.reduce((a, r) => a + Math.sin((r * Math.PI) / 180), 0);
const cosSum = ras.reduce((a, r) => a + Math.cos((r * Math.PI) / 180), 0);
const centerRaDeg = ((Math.atan2(sinSum, cosSum) * 180) / Math.PI + 360) % 360;

등급이 밝은 별일수록 큰 크기로 배치하고, 원본 데이터의 연결선도 함께 재현됩니다.

---

배경과 분위기

4가지 배경 그라디언트를 선택할 수 있습니다.

이름	분위기
깊은 우주	짙은 남색, 기본값
성운	보라색 radialGradient 오버레이
은하수	대각선 밝은 밴드
새벽하늘	하단으로 갈수록 짙은 청색

배경이 바뀌면 배경 별(150개)도 새 LCG 시드로 재생성되어 분위기가 달라집니다.

---

이미지 공유

공유 버튼을 누르면 현재 캔버스 상태를 PNG 이미지로 변환해 공유합니다. 캔버스가 이미 완성작 전체를 담고 있으므로 별도의 합성 과정 없이 canvas.toBlob()으로 바로 이미지를 생성합니다.

const blob = await new Promise<Blob | null>(resolve => canvas.toBlob(resolve, 'image/png'));
const file = new File([blob], `starart-${Date.now()}.png`, { type: 'image/png' });
await navigator.share({ text: 'Star Art — js2devlog', files: [file] });

navigator.share가 지원되지 않는 환경에서는 텍스트 복사로 폴백합니다.

---

마치며

별자리는 상상력의 산물입니다. 옛사람들이 점을 이어 이야기를 만들었듯이, Star Art에서는 누구나 자신만의 밤하늘을 그릴 수 있습니다.

별 하나 찍고, 선 하나 잇고 — 그것만으로 이미 당신의 별자리가 만들어집니다.