Fix net code

frontend/src/scripts/game.ts

@@ -34,6 +34,7 @@ import { CharacterShape } from './shapes/character-shape';
 import { PlanetShape } from './shapes/planet-shape';
 import { RenderCommand } from './commands/types/render';
 import { StepCommand } from './commands/types/step';
+import { serverTimeline } from './helper/server-timeline';
 import { Tutorial } from './tutorial';
 import { Scoreboard } from './scoreboard';
 
@@ -74,6 +75,7 @@ export class Game extends CommandReceiver {
     this.isBetweenGames = true;
 
     this.socket?.close();
+    serverTimeline.reset();
     this.gameObjects = new GameObjectContainer(this);
     this.overlay.innerHTML = '';
     this.arrows = {};
@@ -274,6 +276,11 @@ export class Game extends CommandReceiver {
     this.resolveStarted();
     deltaTime /= 1000;
 
+    // Stepped before the end-game time scaling on purpose: the slow motion is
+    // already baked into the snapshots the server sends, so the playback
+    // cursor itself must keep running on wall-clock time.
+    serverTimeline.step(deltaTime);
+
     let shouldChangeLayout = false;
     if (++this.framesSinceLastLayoutUpdate > 1) {
       shouldChangeLayout = true;

frontend/src/scripts/helper/extrapolators/linear-extrapolator.ts

@@ -1,36 +0,0 @@
-export class LinearExtrapolator {
-  private velocity = 0;
-  private compensationVelocity = 0;
-  private timeSinceSet = 0;
-
-  constructor(private currentValue: number) {}
-
-  public addFrame(value: number, rateOfChange: number) {
-    this.timeSinceSet = 0;
-    const differenceFromCurrent = value - this.currentValue;
-
-    if (Math.abs(differenceFromCurrent) > 200) {
-      this.currentValue = value;
-      this.compensationVelocity = 0;
-    } else {
-      this.compensationVelocity = differenceFromCurrent / (1 / 30);
-    }
-
-    this.velocity = rateOfChange;
-  }
-
-  public getValue(deltaTime: number): number {
-    this.currentValue += deltaTime * this.velocity;
-
-    const compensationTimeLeft = 1 / 30 - this.timeSinceSet;
-
-    if (compensationTimeLeft > 0) {
-      this.currentValue +=
-        Math.min(compensationTimeLeft, deltaTime) * this.compensationVelocity;
-    }
-
-    this.timeSinceSet += deltaTime;
-
-    return this.currentValue;
-  }
-}

frontend/src/scripts/helper/interpolators/circle-interpolator.ts

@@ -1,14 +1,14 @@
 import { Circle } from 'shared';
-import { LinearExtrapolator } from './linear-extrapolator';
-import { Vec2Extrapolator } from './vec2-extrapolator';
+import { LinearInterpolator } from './linear-interpolator';
+import { Vec2Interpolator } from './vec2-interpolator';
 
-export class CircleExtrapolator {
-  private center: Vec2Extrapolator;
-  private radius: LinearExtrapolator;
+export class CircleInterpolator {
+  private center: Vec2Interpolator;
+  private radius: LinearInterpolator;
 
   constructor(currentValue: Circle) {
-    this.center = new Vec2Extrapolator(currentValue.center);
-    this.radius = new LinearExtrapolator(currentValue.radius);
+    this.center = new Vec2Interpolator(currentValue.center);
+    this.radius = new LinearInterpolator(currentValue.radius);
   }
 
   public addFrame(value: Circle, rateOfChange: Circle) {

frontend/src/scripts/helper/interpolators/linear-interpolator.ts

@@ -0,0 +1,99 @@
+import { last, mix } from 'shared';
+import { serverTimeline } from '../server-timeline';
+
+interface Frame {
+  time: number;
+  value: number;
+  velocity: number;
+}
+
+// How far past the newest snapshot the value may coast on its last known
+// velocity (network hiccup) before freezing in place.
+const maxCoastSeconds = 0.06;
+
+// When fresh snapshots arrive after a coast, they usually disagree with where
+// the coast ended up; the difference decays away with this time constant
+// instead of being shown as a jump.
+const blendSeconds = 0.12;
+
+// At 25 snapshots per second this spans over a second of state, far more than
+// rendering ever needs; it only bounds memory while the tab is hidden and
+// snapshots keep arriving without being consumed.
+const maxFrames = 32;
+
+/**
+ * Replays a server-streamed scalar by interpolating between timestamped
+ * snapshots at the shared timeline's render time, which trails the newest
+ * snapshot. The streamed rate of change is only used to coast briefly when
+ * the buffer runs dry.
+ */
+export class LinearInterpolator {
+  private frames: Array<Frame> = [];
+  private blendOffset = 0;
+  private lastValue: number;
+  private isCoasting = false;
+
+  constructor(private readonly initialValue: number) {
+    this.lastValue = initialValue;
+  }
+
+  public addFrame(value: number, rateOfChange: number) {
+    const time = serverTimeline.snapshotTime;
+    const newest = last(this.frames);
+    const wasCoasting = this.isCoasting;
+
+    if (newest && time <= newest.time) {
+      this.frames[this.frames.length - 1] = {
+        time: newest.time,
+        value,
+        velocity: rateOfChange,
+      };
+    } else {
+      this.frames.push({ time, value, velocity: rateOfChange });
+      if (this.frames.length > maxFrames) {
+        this.frames.shift();
+      }
+    }
+
+    if (wasCoasting) {
+      // Continue from where the coast left off and let the offset decay,
+      // instead of jumping onto the freshly revealed trajectory.
+      this.blendOffset = this.lastValue - this.sample(serverTimeline.renderTime);
+    }
+  }
+
+  public getValue(deltaTimeInSeconds: number): number {
+    this.blendOffset *= Math.exp(-deltaTimeInSeconds / blendSeconds);
+    return (this.lastValue = this.sample(serverTimeline.renderTime) + this.blendOffset);
+  }
+
+  private sample(time: number): number {
+    if (this.frames.length === 0) {
+      return this.initialValue;
+    }
+
+    while (this.frames.length >= 2 && this.frames[1].time <= time) {
+      this.frames.shift();
+    }
+
+    const [current, next] = this.frames;
+    this.isCoasting = false;
+
+    if (time <= current.time) {
+      return current.value;
+    }
+
+    if (next) {
+      return mix(
+        current.value,
+        next.value,
+        (time - current.time) / (next.time - current.time),
+      );
+    }
+
+    this.isCoasting = true;
+    return (
+      current.value + current.velocity * Math.min(time - current.time, maxCoastSeconds)
+    );
+  }
+}

frontend/src/scripts/helper/interpolators/vec2-interpolator.ts

@@ -1,13 +1,13 @@
 import { vec2 } from 'gl-matrix';
-import { LinearExtrapolator } from './linear-extrapolator';
+import { LinearInterpolator } from './linear-interpolator';
 
-export class Vec2Extrapolator {
-  private x: LinearExtrapolator;
-  private y: LinearExtrapolator;
+export class Vec2Interpolator {
+  private x: LinearInterpolator;
+  private y: LinearInterpolator;
 
   constructor(currentValue: vec2) {
-    this.x = new LinearExtrapolator(currentValue.x);
-    this.y = new LinearExtrapolator(currentValue.y);
+    this.x = new LinearInterpolator(currentValue.x);
+    this.y = new LinearInterpolator(currentValue.y);
   }
 
   public addFrame(value: vec2, rateOfChange: vec2) {

frontend/src/scripts/helper/server-timeline.ts

@@ -0,0 +1,84 @@
+import { clamp, settings } from 'shared';
+
+// Convergence rate of the playback cursor towards its target; a deviation
+// decays with a time constant of 1 / rateGain seconds.
+const rateGain = 2;
+
+// Playback speed stays within [0.75, 1.25]× so corrections are invisible.
+const maxRateAdjustment = 0.25;
+
+// Beyond this divergence (tab was in the background, server changed) chasing
+// the target is pointless: jump straight to it.
+const resyncSeconds = 0.3;
+
+/**
+ * The playback clock for state streamed from the server.
+ *
+ * Snapshot timestamps estimate the server's clock: the newest received
+ * timestamp plus the time elapsed since it arrived. Rendering happens
+ * settings.interpolationDelaySeconds behind that estimate, so there is
+ * normally a newer snapshot to interpolate towards and network jitter is
+ * absorbed by the buffer instead of being shown.
+ *
+ * The cursor never jumps under normal operation: it runs at a gently adjusted
+ * rate to stay on target and only snaps after a long divergence.
+ */
+class ServerTimeline {
+  private cursor?: number;
+  private newestSnapshotTime?: number;
+  private sinceNewestSnapshot = 0;
+  private _snapshotTime = 0;
+
+  /** Timestamp of the update batch currently being applied. */
+  public get snapshotTime(): number {
+    return this._snapshotTime;
+  }
+
+  /** The point on the server's clock that should be rendered this frame. */
+  public get renderTime(): number {
+    return this.cursor ?? 0;
+  }
+
+  public onSnapshot(timestamp: number) {
+    this._snapshotTime = timestamp;
+    if (this.newestSnapshotTime === undefined || timestamp > this.newestSnapshotTime) {
+      this.newestSnapshotTime = timestamp;
+      this.sinceNewestSnapshot = 0;
+    }
+  }
+
+  // Must be called with unscaled wall-clock time, even during the end-game
+  // slow motion: the slowdown is already baked into the snapshots.
+  public step(deltaTimeInSeconds: number) {
+    if (this.newestSnapshotTime === undefined) {
+      return;
+    }
+
+    this.sinceNewestSnapshot += deltaTimeInSeconds;
+    const target =
+      this.newestSnapshotTime +
+      this.sinceNewestSnapshot -
+      settings.interpolationDelaySeconds;
+
+    if (this.cursor === undefined || Math.abs(target - this.cursor) > resyncSeconds) {
+      this.cursor = target;
+      return;
+    }
+
+    const rate = clamp(
+      1 + (target - this.cursor) * rateGain,
+      1 - maxRateAdjustment,
+      1 + maxRateAdjustment,
+    );
+    this.cursor += deltaTimeInSeconds * rate;
+  }
+
+  public reset() {
+    this.cursor = undefined;
+    this.newestSnapshotTime = undefined;
+    this.sinceNewestSnapshot = 0;
+    this._snapshotTime = 0;
+  }
+}
+
+export const serverTimeline = new ServerTimeline();

frontend/src/scripts/objects/game-object-container.ts

@@ -13,6 +13,7 @@ import {
 import { BeforeDestroyCommand } from '../commands/types/before-destroy';
 import { StepCommand } from '../commands/types/step';
 import { Game } from '../game';
+import { serverTimeline } from '../helper/server-timeline';
 import { Camera } from './types/camera';
 import { CharacterView } from './types/character-view';
 import { PlanetView } from './types/planet-view';
@@ -36,7 +37,7 @@ export class GameObjectContainer extends CommandReceiver {
       this.defaultCommandExecutor(c);
 
       if (this.player) {
-        this.camera.center = this.player.position;
+        this.camera.follow(this.player.position, c.deltaTimeInSeconds);
       }
     },
 
@@ -45,10 +46,12 @@ export class GameObjectContainer extends CommandReceiver {
         this.objects.get(c.id)?.processRemoteCalls(c.calls),
       ),
 
-    [PropertyUpdatesForObjects.type]: (c: PropertyUpdatesForObjects) =>
+    [PropertyUpdatesForObjects.type]: (c: PropertyUpdatesForObjects) => {
+      serverTimeline.onSnapshot(c.timestamp);
       c.updates.forEach((u) =>
         u.updates.forEach((au) => this.objects.get(u.id)?.handleCommand(au)),
-      ),
+      );
+    },
 
     [DeleteObjectsCommand.type]: (c: DeleteObjectsCommand) =>
       c.ids.forEach((id: Id) => this.deleteObject(id)),

frontend/src/scripts/objects/types/camera.ts

@@ -13,10 +13,28 @@ export class Camera extends CommandReceiver {
   public center: vec2 = vec2.create();
   private aspectRatio?: number;
 
+  // A short exponential lag masks any residual stepping in the followed
+  // position without the camera noticeably trailing during normal movement.
+  private static readonly followSeconds = 0.08;
+
+  // Swooshing across half the map after a respawn would be disorienting;
+  // beyond this distance the camera cuts instead.
+  private static readonly snapDistance = 1500;
+
   constructor(private game: Game) {
     super();
   }
 
+  public follow(target: vec2, deltaTimeInSeconds: number) {
+    if (vec2.distance(target, this.center) > Camera.snapDistance) {
+      vec2.copy(this.center, target);
+      return;
+    }
+
+    const q = 1 - Math.exp(-deltaTimeInSeconds / Camera.followSeconds);
+    vec2.lerp(this.center, this.center, target, q);
+  }
+
   protected commandExecutors: CommandExecutors = {
     [RenderCommand.type]: this.draw.bind(this),
   };

frontend/src/scripts/objects/types/character-view.ts

@@ -16,8 +16,8 @@ import {
 import { BeforeDestroyCommand } from '../../commands/types/before-destroy';
 import { RenderCommand } from '../../commands/types/render';
 import { StepCommand } from '../../commands/types/step';
-import { CircleExtrapolator } from '../../helper/extrapolators/circle-extrapolator';
-import { LinearExtrapolator } from '../../helper/extrapolators/linear-extrapolator';
+import { CircleInterpolator } from '../../helper/interpolators/circle-interpolator';
+import { LinearInterpolator } from '../../helper/interpolators/linear-interpolator';
 import { Pointer } from '../../helper/pointer';
 import { CharacterShape } from '../../shapes/character-shape';
 import { SoundHandler, Sounds } from '../../sound-handler';
@@ -40,7 +40,7 @@ export class CharacterView extends CharacterBase {
   private muzzleFlashIntensity = 0;
   private hitFlashIntensity = 0;
   private strength = settings.playerMaxStrength;
-  private strengthExtrapolator = new LinearExtrapolator(settings.playerMaxStrength);
+  private strengthInterpolator = new LinearInterpolator(settings.playerMaxStrength);
   private nameElement: HTMLElement = document.createElement('div');
   private statsElement: HTMLElement = document.createElement('div');
   private killCountElement: HTMLElement = document.createElement('span');
@@ -50,9 +50,9 @@ export class CharacterView extends CharacterBase {
 
   public isMainCharacter = false;
 
-  private leftFootExtrapolator: CircleExtrapolator;
-  private rightFootExtrapolator: CircleExtrapolator;
-  private headExtrapolator: CircleExtrapolator;
+  private leftFootInterpolator: CircleInterpolator;
+  private rightFootInterpolator: CircleInterpolator;
+  private headInterpolator: CircleInterpolator;
 
   protected commandExecutors: CommandExecutors = {
     [RenderCommand.type]: this.draw.bind(this),
@@ -80,9 +80,9 @@ export class CharacterView extends CharacterBase {
       0,
     );
 
-    this.leftFootExtrapolator = new CircleExtrapolator(this.leftFoot!);
-    this.rightFootExtrapolator = new CircleExtrapolator(this.rightFoot!);
-    this.headExtrapolator = new CircleExtrapolator(this.head!);
+    this.leftFootInterpolator = new CircleInterpolator(this.leftFoot!);
+    this.rightFootInterpolator = new CircleInterpolator(this.rightFoot!);
+    this.headInterpolator = new CircleInterpolator(this.head!);
 
     this.nameElement.className = 'player-tag ' + this.team;
     this.nameElement.innerText = this.name;
@@ -140,16 +140,16 @@ export class CharacterView extends CharacterBase {
     rateOfChange,
   }: UpdatePropertyCommand) {
     if (propertyKey === 'head') {
-      this.headExtrapolator.addFrame(propertyValue, rateOfChange);
+      this.headInterpolator.addFrame(propertyValue, rateOfChange);
     }
     if (propertyKey === 'leftFoot') {
-      this.leftFootExtrapolator.addFrame(propertyValue, rateOfChange);
+      this.leftFootInterpolator.addFrame(propertyValue, rateOfChange);
     }
     if (propertyKey === 'rightFoot') {
-      this.rightFootExtrapolator.addFrame(propertyValue, rateOfChange);
+      this.rightFootInterpolator.addFrame(propertyValue, rateOfChange);
     }
     if (propertyKey === 'strength') {
-      this.strengthExtrapolator.addFrame(propertyValue, rateOfChange);
+      this.strengthInterpolator.addFrame(propertyValue, rateOfChange);
     }
   }
 
@@ -194,12 +194,12 @@ export class CharacterView extends CharacterBase {
   }
 
   private step({ deltaTimeInSeconds }: StepCommand): void {
-    this.head! = this.headExtrapolator.getValue(deltaTimeInSeconds);
-    this.leftFoot! = this.leftFootExtrapolator.getValue(deltaTimeInSeconds);
-    this.rightFoot! = this.rightFootExtrapolator.getValue(deltaTimeInSeconds);
+    this.head! = this.headInterpolator.getValue(deltaTimeInSeconds);
+    this.leftFoot! = this.leftFootInterpolator.getValue(deltaTimeInSeconds);
+    this.rightFoot! = this.rightFootInterpolator.getValue(deltaTimeInSeconds);
 
     this.strength = clamp(
-      this.strengthExtrapolator.getValue(deltaTimeInSeconds),
+      this.strengthInterpolator.getValue(deltaTimeInSeconds),
       0,
       settings.playerMaxStrength,
     );
@@ -224,7 +224,7 @@ export class CharacterView extends CharacterBase {
   public onShoot(strength: number) {
     const q = clamp01(
       (strength - settings.chargeShotStrengthMin) /
-      (settings.chargeShotStrengthMax - settings.chargeShotStrengthMin),
+        (settings.chargeShotStrengthMax - settings.chargeShotStrengthMin),
     );
     SoundHandler.play(Sounds.shoot, mix(0.55, 1, q), mix(1.15, 0.8, q));
     this.muzzleFlashIntensity = mix(0.35, 1, q);

frontend/src/scripts/objects/types/planet-view.ts

@@ -12,6 +12,7 @@ import {
 import { BeforeDestroyCommand } from '../../commands/types/before-destroy';
 import { RenderCommand } from '../../commands/types/render';
 import { StepCommand } from '../../commands/types/step';
+import { LinearInterpolator } from '../../helper/interpolators/linear-interpolator';
 import { PlanetShape } from '../../shapes/planet-shape';
 
 const fallingPointLifetimeMs = 2000;
@@ -39,7 +40,10 @@ abstract class FlareBudget {
 export class PlanetView extends PlanetBase {
   private shape: PlanetShape;
   private ownershipProgress: HTMLElement;
-  private readonly rotationSpeed: number;
+  // Rotation is owned by the backend (it drives the collision polygon too) and
+  // streamed in; the interpolator replays the angle on the shared snapshot
+  // timeline, in sync with the characters standing on the surface.
+  private readonly rotationInterpolator = new LinearInterpolator(0);
 
   private flareLight?: CircleLight;
   private flareIntensity = 0;
@@ -56,15 +60,13 @@ export class PlanetView extends PlanetBase {
     super(id, vertices);
     this.shape = new PlanetShape(vertices, ownership);
     this.shape.randomOffset = Random.getRandom();
-    this.rotationSpeed =
-      (0.05 + Random.getRandom() * 0.07) * (Random.getRandom() < 0.5 ? -1 : 1);
 
     this.ownershipProgress = document.createElement('div');
     this.ownershipProgress.className = 'ownership';
   }
 
   private step({ deltaTimeInSeconds }: StepCommand): void {
-    this.shape.rotation += deltaTimeInSeconds * this.rotationSpeed;
+    this.shape.rotation = this.rotationInterpolator.getValue(deltaTimeInSeconds);
     this.shape.colorMixQ = this.ownership;
 
     if (this.flareIntensity > 0) {
@@ -120,8 +122,16 @@ export class PlanetView extends PlanetBase {
     this.releaseFlareSlot();
   }
 
-  private updateProperty({ propertyValue }: UpdatePropertyCommand): void {
-    this.ownership = propertyValue;
+  private updateProperty({
+    propertyKey,
+    propertyValue,
+    rateOfChange,
+  }: UpdatePropertyCommand): void {
+    if (propertyKey === 'rotation') {
+      this.rotationInterpolator.addFrame(propertyValue, rateOfChange);
+    } else {
+      this.ownership = propertyValue;
+    }
   }
 
   private draw({ renderer, overlay, shouldChangeLayout }: RenderCommand): void {
@@ -137,7 +147,7 @@ export class PlanetView extends PlanetBase {
 
       if (this.lastGeneratedPoint !== undefined) {
         const element = document.createElement('div');
-        element.className = 'falling-point ' + (this.ownership < 0.5 ? 'decla' : 'red');
+        element.className = 'falling-point ' + (this.ownership < 0.5 ? 'blue' : 'red');
         element.innerText = '+' + this.lastGeneratedPoint;
         element.style.left = `${screenPosition.x}px`;
         element.style.top = `${screenPosition.y}px`;
@@ -159,12 +169,12 @@ export class PlanetView extends PlanetBase {
   }
 
   private getGradient(): string {
-    const sideDecla = this.ownership < 0.5;
+    const sideBlue = this.ownership < 0.5;
     const sidePercent = (Math.abs(this.ownership - 0.5) / 0.5) * 100;
-    return sideDecla
+    return sideBlue
       ? `conic-gradient(
-      var(--bright-decla) ${sidePercent}%,
-      var(--bright-decla) ${sidePercent}%,
+      var(--bright-blue) ${sidePercent}%,
+      var(--bright-blue) ${sidePercent}%,
       rgba(0, 0, 0, 0) ${sidePercent}%,
       rgba(0, 0, 0, 0) 100%
     )`

frontend/src/scripts/objects/types/projectile-view.ts

@@ -10,12 +10,12 @@ import {
 } from 'shared';
 import { RenderCommand } from '../../commands/types/render';
 import { StepCommand } from '../../commands/types/step';
-import { Vec2Extrapolator } from '../../helper/extrapolators/vec2-extrapolator';
+import { Vec2Interpolator } from '../../helper/interpolators/vec2-interpolator';
 
 export class ProjectileView extends ProjectileBase {
   private light: CircleLight;
 
-  private centerExtrapolator: Vec2Extrapolator;
+  private centerInterpolator: Vec2Interpolator;
 
   protected commandExecutors: CommandExecutors = {
     [RenderCommand.type]: this.draw.bind(this),
@@ -36,17 +36,17 @@ export class ProjectileView extends ProjectileBase {
       settings.paletteDim[settings.colorIndices[team]],
       0,
     );
-    this.centerExtrapolator = new Vec2Extrapolator(center);
+    this.centerInterpolator = new Vec2Interpolator(center);
   }
 
   private updateProperty({ propertyValue, rateOfChange }: UpdatePropertyCommand): void {
-    this.centerExtrapolator.addFrame(propertyValue, rateOfChange);
+    this.centerInterpolator.addFrame(propertyValue, rateOfChange);
   }
 
   private handleStep({ deltaTimeInSeconds }: StepCommand): void {
     this.step(deltaTimeInSeconds);
 
-    this.center = this.centerExtrapolator.getValue(deltaTimeInSeconds);
+    this.center = this.centerInterpolator.getValue(deltaTimeInSeconds);
     this.light.center = this.center;
     this.light.intensity = Math.min(
       0.1,

frontend/src/scripts/shapes/planet-shape.ts

@@ -54,19 +54,24 @@ export class PlanetShape extends PolygonFactory(settings.planetEdgeCount, 0) {
               float l = planetLengths[j];
               float randomOffset = planetRandoms[j];
               float rotation = planetRotations[j];
-              vec2 targetCenterDelta = target - center;
-              float targetDistance = length(targetCenterDelta);
-              vec2 targetTangent = targetCenterDelta / clamp(targetDistance, 0.01, 1000.0);
 
               float cr = cos(rotation);
               float sr = sin(rotation);
-              vec2 rotatedTangent = vec2(
-                cr * targetTangent.x - sr * targetTangent.y,
-                sr * targetTangent.x + cr * targetTangent.y
+
+              // Spin the whole planet: evaluate the SDF in the planet's own
+              // rotating frame so the polygon outline turns together with its
+              // terrain, instead of the terrain sliding over a fixed outline.
+              vec2 targetCenterDelta = target - center;
+              float targetDistance = length(targetCenterDelta);
+              vec2 localTarget = center + vec2(
+                cr * targetCenterDelta.x - sr * targetCenterDelta.y,
+                sr * targetCenterDelta.x + cr * targetCenterDelta.y
               );
-              vec2 noisyTarget = target - (
+              vec2 targetTangent = (localTarget - center) / clamp(targetDistance, 0.01, 1000.0);
+
+              vec2 noisyTarget = localTarget - (
                 targetTangent * planetTerrain(vec2(
-                  l * abs(atan(rotatedTangent.y, rotatedTangent.x)),
+                  l * abs(atan(targetTangent.y, targetTangent.x)),
                   randomOffset
                 )) / 12.0
               );
@@ -97,9 +102,9 @@ export class PlanetShape extends PolygonFactory(settings.planetEdgeCount, 0) {
 
               if (dist < minDistance) {
                 minDistance = dist;
-                color = mix(${colorToString(settings.declaPlanetColor)}, ${colorToString(
-        settings.redPlanetColor,
-      )}, planetColorMixQ[j]);
+                color = mix(${colorToString(settings.bluePlanetColor)}, ${colorToString(
+                  settings.redPlanetColor,
+                )}, planetColorMixQ[j]);
               }
             }