Star Art — Draw Your Own Constellations

The Goal — Your Sky, Your Stars

Constellations were made by people connecting dots in the night sky. So why not make your own? Star Art started from that simple idea.

---

Three Tools

Star Art offers three tools:

Tool	Action
⭐ Star	Place a star with a tap or click
✏️ Line	Draw a connection between two stars
🧹 Eraser	Remove a star (connected lines are also deleted)

Each placed star automatically gets a glowing, twinkling animation. Every star has a slightly different phase offset, creating a natural shimmer.

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

The line tool changes the cursor to a pencil icon when hovering over a star. A dynamically generated SVG cursor switches to an active color when a target star is within reach.

---

Star Variety

Stars can be customized with 5 colors, 4 sizes, and 2 shapes:

• Colors: White, blue-white, gold, red, purple
• Sizes: 2px, 4px, 7px, 11px (with glow radii from 6 to 30px)
• Shapes: Circle, 5-pointed star

Each star has a bright core and two layers of radialGradient glow. The outer glow uses lighter compositing to create a luminous bloom effect.

// Outer glow — lighter compositing for additive brightness
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');

---

Random Constellation Placement

The dice button picks a random constellation from the real dataset and places it on the canvas. Star coordinates from all 88 IAU constellations (RA/Dec) are transformed into canvas coordinates.

RA (right ascension) wraps around, so a simple average fails. A circular mean using trigonometric functions computes the true center.

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;

Brighter stars are placed at larger sizes, and the original connection lines are faithfully reproduced.

---

Backgrounds and Atmosphere

Four background gradients are available:

Name	Mood
Deep Space	Dark indigo, the default
Nebula	Purple radialGradient overlay
Milky Way	Diagonal bright band
Dawn Sky	Deepening blue toward the bottom

When the background changes, the 150 ambient stars are regenerated with a new LCG seed, giving each scene a distinct character.

---

Image Sharing

The share button converts the current canvas state into a PNG image for sharing. Since the canvas already contains the complete artwork, no additional compositing is needed — canvas.toBlob() captures everything directly.

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] });

For environments that don't support navigator.share, a text-copy fallback is provided.

---

Closing Thoughts

Constellations are products of imagination. Just as ancient peoples connected dots to tell stories, Star Art lets anyone draw their own night sky.

Place a star, draw a line — and your constellation already exists.