Animation Updates

This commit is contained in:
Greg Kilmer
2026-07-04 11:28:13 -04:00
parent 33fa312645
commit 29b4a13345
6 changed files with 124 additions and 23 deletions
+12 -9
View File
@@ -94,14 +94,16 @@ export default function ConstellationField({
canvas.height = Math.floor(height * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
const cx = width / 2;
const cy = height / 2;
const maxR = Math.sqrt(cx * cx + cy * cy) + 40;
// Tuned for ~40% constellation coverage. One star per ~6500 px^2, scaled
// by density; ~14% anchors for a rich constellation backbone.
// Pivot = top-right corner. The disk is centered there so the field
// rotates around that corner; maxR reaches the far (bottom-left) corner.
const cx = width;
const cy = 0;
const maxR = Math.sqrt(cx * cx + height * height) + 40;
// Denser field for richer constellations. One star per ~4500 px^2, scaled
// by density; ~15% anchors for a dense constellation backbone.
const count = Math.min(
260,
Math.floor(((Math.PI * maxR * maxR) / 6500) * density),
360,
Math.floor(((Math.PI * maxR * maxR) / 4500) * density),
);
stars = Array.from({ length: count }, (_, i) => {
const anchor = i % 7 === 0;
@@ -143,8 +145,9 @@ export default function ConstellationField({
angle += ROT_SPEED * dt;
ctx.clearRect(0, 0, width, height);
const cx = width / 2;
const cy = height / 2;
// Pivot = top-right corner (matches the disk center used in resize()).
const cx = width;
const cy = 0;
const cosA = Math.cos(angle);
const sinA = Math.sin(angle);
const project = (rx: number, ry: number): [number, number] => [