More realistic sunrise and sunset colours
This commit is contained in:
fraxle
+103
-38
@@ -16,7 +16,7 @@
|
||||
import { h, Fragment } from '../vendor/preact.js';
|
||||
import htm from '../vendor/htm.js';
|
||||
import {
|
||||
skyFillForElev, grassFillForElev,
|
||||
skyGradientForElev, skyFillForElev, grassFillForElev,
|
||||
moonPhaseFraction,
|
||||
} from './utils.js';
|
||||
|
||||
@@ -42,20 +42,41 @@ const html = htm.bind(h);
|
||||
export function SkyScope({ elev, dt, size = 26 }) {
|
||||
const r = size / 2;
|
||||
const innerR = r - 1.2;
|
||||
const skyFill = skyFillForElev(elev);
|
||||
const isDay = elev > -3;
|
||||
const elevClamped = Math.max(-30, Math.min(90, elev));
|
||||
|
||||
// Rising if local hour < 12 (dt.getUTCHours() == local hour after timezone fix)
|
||||
const localHour = dt ? dt.getUTCHours() : 12;
|
||||
const isRising = localHour < 12;
|
||||
|
||||
const skyGrad = skyGradientForElev(elev, isRising);
|
||||
// Flat horizon colour used for moon shadow fill
|
||||
const skyHorizon = skyGrad.bot;
|
||||
|
||||
const isDay = elev > 0; // sun only drawn when actually above horizon
|
||||
const isTwil = elev > -8 && !isDay; // moon shown in twilight too
|
||||
const isNight = elev <= -8;
|
||||
|
||||
// Sun position — clamped so it never goes below the horizon line (y = r)
|
||||
const elevClamped = Math.max(0, Math.min(90, elev));
|
||||
const sunY = r - Math.sin((elevClamped * Math.PI) / 180) * (innerR - 2.5);
|
||||
const sunR = Math.max(2.2, innerR * 0.32);
|
||||
|
||||
// Near-horizon sun gets a warm glow halo
|
||||
const sunGlowOpacity = elev < 10 ? Math.max(0, 1 - elev / 10) * 0.65 : 0.25;
|
||||
const sunGlowR = sunR + (elev < 6 ? 3.5 : 1.8);
|
||||
const sunGlowColor = isRising ? '#ff8c3a' : '#ff9a6a';
|
||||
|
||||
const phase = moonPhaseFraction(dt);
|
||||
const moonR = innerR * 0.55;
|
||||
const phaseOffset = Math.cos(2 * Math.PI * phase) * moonR;
|
||||
const moonLitFromRight = phase < 0.5;
|
||||
const shadowCx = r + (moonLitFromRight ? -phaseOffset : phaseOffset);
|
||||
const grass = grassFillForElev(elev);
|
||||
const uid = `${size}-${Math.round(elev * 10)}-${Math.round(phase * 1000)}`;
|
||||
const clipId = `scope-clip-${uid}`;
|
||||
const grassId = `scope-grass-${uid}`;
|
||||
|
||||
const uid = `ss-${size}-${Math.round(elev * 10)}-${Math.round(phase * 1000)}-${isRising ? 'r' : 's'}`;
|
||||
const clipId = `clip-${uid}`;
|
||||
const skyId = `sky-${uid}`;
|
||||
const grassId = `grass-${uid}`;
|
||||
|
||||
return html`
|
||||
<svg width=${size} height=${size} viewBox=${`0 0 ${size} ${size}`}
|
||||
style=${{ flexShrink: 0, display: 'inline-block', verticalAlign: 'middle' }}>
|
||||
@@ -63,29 +84,54 @@ export function SkyScope({ elev, dt, size = 26 }) {
|
||||
<clipPath id=${clipId}>
|
||||
<circle cx=${r} cy=${r} r=${innerR} />
|
||||
</clipPath>
|
||||
<!-- Sky gradient — top of disk to bottom (zenith → horizon) -->
|
||||
<linearGradient id=${skyId} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color=${skyGrad.top} />
|
||||
<stop offset="100%" stop-color=${skyGrad.bot} />
|
||||
</linearGradient>
|
||||
<!-- Grass gradient — horizon to ground -->
|
||||
<linearGradient id=${grassId} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color=${grass.top} />
|
||||
<stop offset="0%" stop-color=${grass.top} />
|
||||
<stop offset="100%" stop-color=${grass.bot} />
|
||||
</linearGradient>
|
||||
<!-- Moon phase mask: lit area = white, shadow = black punched out -->
|
||||
<mask id=${`moon-mask-${uid}`}>
|
||||
<circle cx=${r} cy=${r} r=${moonR} fill="white" />
|
||||
<circle cx=${shadowCx} cy=${r} r=${moonR} fill="black" />
|
||||
</mask>
|
||||
</defs>
|
||||
<circle cx=${r} cy=${r} r=${innerR} fill=${skyFill} />
|
||||
|
||||
<!-- Sky disk -->
|
||||
<circle cx=${r} cy=${r} r=${innerR} fill=${`url(#${skyId})`} />
|
||||
|
||||
<!-- Ground half (lower semicircle) -->
|
||||
<path d=${`M ${r - innerR} ${r} A ${innerR} ${innerR} 0 0 0 ${r + innerR} ${r} Z`}
|
||||
fill=${`url(#${grassId})`}
|
||||
clip-path=${`url(#${clipId})`} />
|
||||
${isDay
|
||||
? html`
|
||||
<g clip-path=${`url(#${clipId})`}>
|
||||
<circle cx=${r} cy=${sunY} r=${sunR + 1.4} fill="#ffe9a0" opacity="0.55" />
|
||||
<circle cx=${r} cy=${sunY} r=${sunR} fill="#fff3a8" stroke="#e6a32a" stroke-width="0.4" />
|
||||
</g>`
|
||||
: html`
|
||||
<g clip-path=${`url(#${clipId})`}>
|
||||
<circle cx=${r} cy=${r} r=${moonR} fill="#f5edd6" />
|
||||
<circle cx=${shadowCx} cy=${r} r=${moonR} fill=${skyFill} />
|
||||
<circle cx=${r} cy=${r} r=${moonR} fill="none" stroke="rgba(245,237,214,0.45)" stroke-width="0.4" />
|
||||
</g>`}
|
||||
|
||||
${isDay && html`
|
||||
<g clip-path=${`url(#${clipId})`}>
|
||||
<!-- Warm glow halo — bigger and more vivid near the horizon -->
|
||||
<circle cx=${r} cy=${sunY} r=${sunGlowR} fill=${sunGlowColor} opacity=${sunGlowOpacity} />
|
||||
<!-- Sun disk -->
|
||||
<circle cx=${r} cy=${sunY} r=${sunR} fill="#fff8c0" stroke="#e6a32a" stroke-width="0.5" />
|
||||
</g>`}
|
||||
|
||||
${(isTwil || isNight) && html`
|
||||
<g clip-path=${`url(#${clipId})`}>
|
||||
<!-- Lit crescent via mask -->
|
||||
<circle cx=${r} cy=${r} r=${moonR}
|
||||
fill="#f5edd6" mask=${`url(#moon-mask-${uid})`} />
|
||||
<!-- Dim unlit face so the full disk outline remains visible -->
|
||||
<circle cx=${r} cy=${r} r=${moonR}
|
||||
fill="rgba(180,170,210,0.18)" stroke="rgba(245,237,214,0.45)" stroke-width="0.4" />
|
||||
</g>`}
|
||||
|
||||
<!-- Brass scope ring -->
|
||||
<circle cx=${r} cy=${r} r=${innerR} fill="none" stroke="#c8922a" stroke-width="0.9" />
|
||||
<circle cx=${r} cy=${r} r=${innerR - 0.5} fill="none" stroke="rgba(255,255,255,0.22)" stroke-width="0.4" />
|
||||
<!-- Inner highlight glint -->
|
||||
<circle cx=${r} cy=${r} r=${innerR - 0.5} fill="none"
|
||||
stroke="rgba(255,255,255,0.22)" stroke-width="0.4" />
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
@@ -254,16 +300,24 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date() })
|
||||
// grass on the bottom, sun positioned by elevation (or moon at night
|
||||
// with its phase shadow). Mirrors the little hourly SkyScopes.
|
||||
const cx = 100, cy = 100, R = 86;
|
||||
const isDay = elev > -3;
|
||||
const skyFill = skyFillForElev(elev);
|
||||
const localHour = dt ? dt.getUTCHours() : 12;
|
||||
const isRising = localHour < 12;
|
||||
const isDay = elev > 0; // sun only above the actual horizon
|
||||
const isTwil = elev > -8 && !isDay;
|
||||
const skyGrad = skyGradientForElev(elev, isRising);
|
||||
const skyHorizon = skyGrad.bot;
|
||||
const grass = grassFillForElev(elev);
|
||||
const phase = moonPhaseFraction(dt);
|
||||
const lensR = 95; // full back of the dial
|
||||
const elevClamped = Math.max(-30, Math.min(90, elev));
|
||||
const lensR = 95;
|
||||
const elevClamped = Math.max(0, Math.min(90, elev)); // clamp to above horizon
|
||||
const sunY = cy - Math.sin((elevClamped * Math.PI) / 180) * (lensR - 18);
|
||||
const sunDrawR = 14;
|
||||
// Near-horizon glow for the big dial
|
||||
const sunGlowR = sunDrawR + (elev < 10 ? 7 : 3);
|
||||
const sunGlowOp = elev < 10 ? Math.max(0, 1 - elev / 10) * 0.55 : 0.2;
|
||||
const sunGlowCol = isRising ? '#ff8c3a' : '#ff9a6a';
|
||||
const moonDrawR = 15;
|
||||
const moonY = cy - 45; // float in the upper sky, away from the readout
|
||||
const moonY = cy - 45;
|
||||
const phaseOffset = Math.cos(2 * Math.PI * phase) * moonDrawR;
|
||||
const moonLitFromRight = phase < 0.5;
|
||||
const moonShadowCx = cx + (moonLitFromRight ? -phaseOffset : phaseOffset);
|
||||
@@ -327,28 +381,39 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date() })
|
||||
<clipPath id="scope-lens-clip">
|
||||
<circle cx=${cx} cy=${cy} r=${lensR} />
|
||||
</clipPath>
|
||||
<linearGradient id="scope-lens-sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color=${skyGrad.top} />
|
||||
<stop offset="100%" stop-color=${skyGrad.bot} />
|
||||
</linearGradient>
|
||||
<linearGradient id="scope-lens-grass" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color=${grass.top} />
|
||||
<stop offset="100%" stop-color=${grass.bot} />
|
||||
</linearGradient>
|
||||
<!-- Moon phase mask: white = lit area, black = shadow punched out -->
|
||||
<mask id="scope-moon-mask">
|
||||
<circle cx=${cx} cy=${moonY} r=${moonDrawR} fill="white" />
|
||||
<circle cx=${moonShadowCx} cy=${moonY} r=${moonDrawR} fill="black" />
|
||||
</mask>
|
||||
</defs>
|
||||
<circle cx=${cx} cy=${cy} r="96" fill="url(#scope-bg-glow)" />
|
||||
|
||||
<!-- Full sky + grass + sun/moon scene behind the readout -->
|
||||
<g clip-path="url(#scope-lens-clip)">
|
||||
<circle cx=${cx} cy=${cy} r=${lensR} fill=${skyFill} />
|
||||
<circle cx=${cx} cy=${cy} r=${lensR} fill="url(#scope-lens-sky)" />
|
||||
<path d=${`M ${cx - lensR} ${cy} A ${lensR} ${lensR} 0 0 0 ${cx + lensR} ${cy} Z`}
|
||||
fill="url(#scope-lens-grass)" />
|
||||
${isDay
|
||||
? html`<${Fragment}>
|
||||
<circle cx=${cx} cy=${sunY} r=${sunDrawR + 4} fill="#ffe9a0" opacity="0.55" />
|
||||
<circle cx=${cx} cy=${sunY} r=${sunDrawR} fill="#fff3a8" stroke="#e6a32a" stroke-width="0.8" />
|
||||
</>`
|
||||
: html`<${Fragment}>
|
||||
<circle cx=${cx} cy=${moonY} r=${moonDrawR} fill="#f5edd6" />
|
||||
<circle cx=${moonShadowCx} cy=${moonY} r=${moonDrawR} fill=${skyFill} />
|
||||
<circle cx=${cx} cy=${moonY} r=${moonDrawR} fill="none" stroke="rgba(245,237,214,0.55)" stroke-width="0.7" />
|
||||
</>`}
|
||||
${isDay && html`<${Fragment}>
|
||||
<circle cx=${cx} cy=${sunY} r=${sunGlowR} fill=${sunGlowCol} opacity=${sunGlowOp} />
|
||||
<circle cx=${cx} cy=${sunY} r=${sunDrawR} fill="#fff8c0" stroke="#e6a32a" stroke-width="0.8" />
|
||||
</>`}
|
||||
${(isTwil || (!isDay && !isTwil)) && html`<${Fragment}>
|
||||
<!-- Lit crescent — full moon disk clipped by the phase mask -->
|
||||
<circle cx=${cx} cy=${moonY} r=${moonDrawR}
|
||||
fill="#f5edd6" mask="url(#scope-moon-mask)" />
|
||||
<!-- Dim unlit face so the full disk outline is still visible -->
|
||||
<circle cx=${cx} cy=${moonY} r=${moonDrawR}
|
||||
fill="rgba(180,170,210,0.18)" stroke="rgba(245,237,214,0.45)" stroke-width="0.7" />
|
||||
</>`}
|
||||
</g>
|
||||
${stressBands.map((b, i) => html`
|
||||
<path key=${i} d=${bandArcPath(b)} fill="none"
|
||||
|
||||
Reference in New Issue
Block a user