Lovund está a unos 66 grados norte, lo bastante cerca del círculo polar ártico como para que las noches de verano apenas oscurezcan y las de invierno se traguen la mayor parte de la tarde. Quería que el modo oscuro del sitio le hiciera un guiño a eso, un cielo real, no un esparcido genérico de puntos blancos que podría estar en cualquier sitio. En cuanto empecé de verdad a investigar cómo se ve el cielo a esta latitud, "esparcido genérico de puntos" dejó de parecerme suficientemente bueno para publicarlo.
puntos primero, luego un cielo
La primera versión del fondo nocturno era exactamente lo que acabo de decir que no quería, un sprite de estrellas de píxeles colocado como un esparcido más o menos uniforme por los márgenes, solo en tema oscuro:
// first version: just scatter dots, no real positions
const stars = Array.from({ length: 40 }, () => ({
x: Math.random() * width,
y: Math.random() * height
}));Correcto, atmosférico, olvidable. Lo que me hizo cambiar de opinión fue darme cuenta de que desde esta latitud, en invierno especialmente, se pueden distinguir de verdad la Osa Mayor y Casiopea la mayoría de las noches despejadas, girando alrededor de Polaris todo el tiempo porque a 66 norte nunca bajan del horizonte en absoluto, son circumpolares. Ese es un hecho real, específico y verificable sobre desde dónde se escribe este sitio, y un simple esparcido de estrellas lo estaba tirando por la borda sin ninguna razón. Así que el esparcido aleatorio se quedó solo para las estrellas de relleno, y las constelaciones nombradas recibieron coordenadas reales en su lugar.
poniendo estrellas reales en el sitio correcto
Saqué los valores reales publicados de ascensión recta y declinación de las estrellas brillantes de ambas constelaciones, las mismas coordenadas que usa cualquier app de planetario, y las proyecté de la forma en que lo hacen las cartas estelares circumpolares: el ángulo de cada estrella alrededor del polo viene de su AR en grados, su distancia al polo viene de noventa menos su declinación.
Approximate RA/Dec used (hours/minutes, degrees/minutes):
Polaris 2h31m +89 15 Dubhe 11h03m +61 45 Merak 11h01m +56 23
Phecda 11h53m +53 41 Megrez 12h15m +57 02 Alioth 12h54m +55 57
Mizar 13h23m +54 55 Alkaid 13h47m +49 19Las siete estrellas de la Osa Mayor y las cinco de Casiopea caen ambas de esa proyección situándose casi exactamente opuestas entre sí alrededor de Polaris, lo cual coincide con la realidad, sus ascensiones rectas medias están a unos 170 grados de distancia entre sí. Eso también significa que el truco clásico de la astronomía amateur, seguir la línea de Merak a través de Dubhe y apunta hacia Polaris, sale correcto gratis. No tuve que trucar la posición de ni una sola estrella para que esa línea guía funcionara, es simplemente lo que hacen las coordenadas reales cuando las proyectas honestamente.
const DIPPER: Star[] = [
{ x: 1479.6, y: 391.3, r: 1.8, fill: MUTED, opacity: 0.6, twinkle: '-2.1s' }, // Dubhe (pointer star)
{ x: 1475.3, y: 380.3, r: 1.7, fill: MUTED, opacity: 0.6 }, // Merak (pointer star)
{ x: 1490.8, y: 370.6, r: 1.6, fill: SEA, opacity: 0.55 }, // Phecda
{ x: 1498.6, y: 377.5, r: 1.5, fill: SEA, opacity: 0.5 }, // Megrez
{ x: 1511.2, y: 375.9, r: 1.6, fill: MUTED, opacity: 0.55 }, // Alioth
{ x: 1521.1, y: 375.8, r: 1.5, fill: SEA, opacity: 0.5 }, // Mizar
{ x: 1533.4, y: 366.9, r: 1.7, fill: MUTED, opacity: 0.55 } // Alkaid
];Todo lo que queda fuera de ese cúmulo nombrado sigue siendo estrellas de relleno sueltas, deliberadamente irregulares en tamaño y espaciado en vez de en cuadrícula, para que las dos constelaciones reales de verdad destaquen del esparcido de fondo que las rodea en vez de mezclarse como más de lo mismo.
el campo gira, lentamente
Como Polaris está lo bastante cerca del polo celeste real como para que las estrellas circumpolares roten visiblemente a su alrededor a lo largo de una noche, dejé que todo el cúmulo rotara también, una vuelta completa cada 40 minutos, fijado en las propias coordenadas de Polaris como origen de la transformación. A cualquier escala de tiempo de visualización normal, alguien leyendo una entrada de blog durante unos minutos, esto se lee como completamente estático. Deja una pestaña abierta en segundo plano durante una hora y gira visiblemente, de la misma manera que lo hace el cielo real sobre el fiordo si estás fuera el tiempo suficiente para notarlo. Solo dejé rotar al cúmulo real, no a las estrellas de relleno dispersas, ya que no tienen posiciones reales que valga la pena preservar en primer lugar y la mayoría están demasiado lejos de Polaris para que una rotación lenta alrededor de ese pivote siquiera se lea como movimiento.
una luna, y saber cuándo dejar de añadir cosas
También hay un tenue símbolo de luna, transparente de día, una forma pálida y suave metida en el cielo nocturno del horizonte de la cabecera. Eso es genuinamente todo lo que hay en esta escena. Sin aurora, sin estrellas fugaces, sin capa de nubes pasando todavía (las nubes están en la lista, sentadas en el mismo montón de "quizás, luego" que seguir ampliando la reserva de pájaros). Sigo casi añadiendo más y me convenzo a mí mismo de volver a bajar, porque el cielo real de verdad a esta latitud ya está haciendo la parte interesante, mi trabajo aquí está más cerca de apartarme de su camino que de decorarlo más.
contención que no es opcional
Tanto el parpadeo como la rotación entera de 40 minutos respetan prefers-reduced-motion, volviéndose completamente estáticos para cualquiera que lo tenga activado, igual que los pájaros ambientales y los peces en el resto del sitio. Y toda esta capa solo existe en modo oscuro para empezar, el modo día recibe un cielo transparente y ninguna luna en absoluto, porque no hay ninguna versión de un campo de constelaciones visible a plena luz del día que se lea como otra cosa que un error. A veces la contención simplemente significa igualar cómo se ve el cielo en realidad en vez de buscar una excusa para dibujar más.
por qué 66 norte específicamente cambia la respuesta
La mayoría del software escrito en cualquier lugar se lee como sin lugar por defecto, y la mayoría de las decoraciones de campo de estrellas que he visto en otros sitios se inclinan hacia eso, puntos uniformemente esparcidos que podrían estar sobre cualquier ciudad de la tierra. Ese es un valor por defecto razonable para la mayoría de las cosas, pero tira por la borda la única parte de esto que es realmente específica de dónde se escribe el sitio. En algún punto alrededor de los 60 grados norte, más o menos la latitud de Oslo, la Osa Mayor todavía sale y se pone como la mayoría de las constelaciones más al sur, se sumerge bajo el horizonte durante parte de la noche o del año según la estación. Sube a 66 y más allá, y las estrellas lo bastante cerca del polo celeste sencillamente nunca se ponen, están ahí arriba girando alrededor de Polaris sin importar la hora. Esa no es una diferencia estética pequeña, es la razón real por la que esta escena tiene derecho a una rotación lenta e interminable alrededor de un punto fijo en vez de una constelación que sale, cruza el cielo y se pone como hace el sol. El giro de 40 minutos no es decoración añadida sobre la idea, es la idea, traducida directamente de un hecho real sobre esta latitud específica a una transformación CSS.
el parpadeo también hace un trabajo más silencioso
Un puñado de estrellas tanto del cúmulo real como del esparcido de relleno, Polaris incluida, reciben su propio parpadeo de opacidad independiente en un ciclo lento y variado, cada una desfasada con su propio retraso para que nunca parpadeen al unísono. Es un detalle pequeño y es tentador descartarlo como pura atmósfera, pero también está haciendo el mismo trabajo que hacen los retrasos de animación aleatorios en el resto de este sitio, romper cualquier cosa que de otro modo pudiera leerse como una imagen estática con una sola animación CSS aplicada de manera uniforme a cada elemento. Un cielo donde cada estrella pulsara al mismo tiempo se vería como un indicador de carga. Un cielo donde unas pocas, escalonadas, pulsan de forma independiente se lee como algo más cercano a la luz de las estrellas de verdad.