From 6f435238d0064d5059b4f5a54a9aa8df5758d97b Mon Sep 17 00:00:00 2001 From: Michael Moore Date: Tue, 5 Nov 2024 14:03:27 -0600 Subject: [PATCH] feat(map): improved quality of star glow --- package-lock.json | 92 +++++++++++++++++++ package.json | 2 + .../map/solarSystemMap/SolarSystemMap.svelte | 42 ++++----- .../lib/map/solarSystemMap/utils/planets.ts | 29 ++++++ 4 files changed, 143 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index ec4d648..5a87ac5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "d3-hsv": "^0.1.0", "d3-interpolate": "^3.0.1", "d3-path": "^3.1.0", + "d3-scale": "^4.0.2", "d3-selection": "^3.0.0", "d3-shape": "^3.2.0", "d3-zoom": "^3.0.0", @@ -60,6 +61,7 @@ "@types/d3-hsv": "^0.1.7", "@types/d3-interpolate": "^3.0.4", "@types/d3-path": "^3.1.0", + "@types/d3-scale": "^4.0.8", "@types/d3-selection": "^3.0.11", "@types/d3-shape": "^3.1.6", "@types/d3-zoom": "^3.0.8", @@ -4414,6 +4416,15 @@ "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==", "dev": true }, + "node_modules/@types/d3-scale": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz", + "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==", + "dev": true, + "dependencies": { + "@types/d3-time": "*" + } + }, "node_modules/@types/d3-selection": { "version": "3.0.11", "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz", @@ -4429,6 +4440,12 @@ "@types/d3-path": "*" } }, + "node_modules/@types/d3-time": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz", + "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==", + "dev": true + }, "node_modules/@types/d3-voronoi": { "version": "1.1.12", "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.12.tgz", @@ -6159,6 +6176,14 @@ "node": ">=12" } }, + "node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "engines": { + "node": ">=12" + } + }, "node_modules/d3-geo": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.7.1.tgz", @@ -6199,6 +6224,32 @@ "node": ">=12" } }, + "node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale/node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/d3-selection": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", @@ -6218,6 +6269,39 @@ "node": ">=12" } }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time/node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/d3-timer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", @@ -8141,6 +8225,14 @@ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "engines": { + "node": ">=12" + } + }, "node_modules/intl-messageformat": { "version": "10.7.3", "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.3.tgz", diff --git a/package.json b/package.json index 9888629..b6bfe0d 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@types/d3-hsv": "^0.1.7", "@types/d3-interpolate": "^3.0.4", "@types/d3-path": "^3.1.0", + "@types/d3-scale": "^4.0.8", "@types/d3-selection": "^3.0.11", "@types/d3-shape": "^3.1.6", "@types/d3-zoom": "^3.0.8", @@ -87,6 +88,7 @@ "d3-hsv": "^0.1.0", "d3-interpolate": "^3.0.1", "d3-path": "^3.1.0", + "d3-scale": "^4.0.2", "d3-selection": "^3.0.0", "d3-shape": "^3.2.0", "d3-zoom": "^3.0.0", diff --git a/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte b/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte index 4262bb4..de02560 100644 --- a/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte +++ b/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte @@ -37,6 +37,7 @@ isPlanetarySystemPrimaryBody, isStar, PLANET_RING_PATTERN, + STAR_GRADIENT_STEPS, } from './utils/planets'; import { getPathKitShadowPath } from './utils/shadows'; @@ -178,19 +179,6 @@ - - - @@ -261,15 +249,25 @@ {#each planets as planet (planet.id)} {@const coordinate = getPlanetCoordinate(planet, planets, $mapSettings)} {#if isStar(planet)} - - - + + + {#each STAR_GRADIENT_STEPS as step} + + {/each} + + + + {:else} {@const radius = getPlanetRadius(planet, $mapSettings)} total + curWidth, 0) + 1 + width / 2; return { width, opacity, radiusMultiplier }; }); + +function getStarGradientSteps({ + startOffset, + startOpacity, + numSteps, + exponent, +}: { + startOffset: number; + startOpacity: number; + numSteps: number; + exponent: number; +}): { offset: string; 'stop-opacity': number }[] { + const results: ReturnType = []; + const scale = scalePow([0, 100 - startOffset], [startOpacity, 0]).exponent(exponent); + for (let i = 0; i <= numSteps; i++) { + const offset = startOffset + (i / numSteps) * (100 - startOffset); + results.push({ offset: `${offset}%`, 'stop-opacity': scale(offset - startOffset) }); + } + console.log(results); + return results; +} +export const STAR_GRADIENT_STEPS = getStarGradientSteps({ + startOffset: 25, + startOpacity: 0.32, + numSteps: 32, + exponent: 0.25, +});