@guinetik/gcanvas 1.0.0 → 1.0.2

package/demos/js/tde/accretiondisk.js

@@ -17,9 +17,9 @@ const DISK_CONFIG = {
     outerRadiusMultiplier: 9.0,    // Wide disk with margin from screen edges
 
     // Particle properties
-    maxParticles: 4000,
-    particleLifetime: 80,
-    spawnRate: 50,
+    maxParticles: 10000,
+    particleLifetime: 1000,
+    spawnRate: 500,
 
     // Orbital physics
     baseOrbitalSpeed: 0.8,
@@ -40,8 +40,8 @@ const DISK_CONFIG = {
     colorMid: { r: 255, g: 160, b: 50 },    // Mid (orange)
     colorCool: { r: 180, g: 40, b: 40 },    // Outer (deep red)
 
-    sizeMin: 1,
-    sizeMax: 2.5,
+    sizeMin: .8,
+    sizeMax: 1.2,
 };
 
 export class AccretionDisk extends GameObject {
@@ -278,20 +278,73 @@ export class AccretionDisk extends GameObject {
             let yCam = y * cosX - zCam * sinX;
             zCam = y * sinX + zCam * cosX;
 
-            // === GRAVITATIONAL LENSING (from blackhole.js) ===
-            // Only affects particles behind the BH (zCam > 0)
-            if (lensingStrength > 0 && zCam > 0) {
-                const currentR = Math.sqrt(xCam * xCam + yCam * yCam);
+            // === GRAVITATIONAL LENSING ===
+            // Creates the Interstellar effect: disk curves around BH
+
+            // Camera tilt: 0 when edge-on, 1 when top-down
+            const cameraTilt = Math.abs(Math.sin(this.camera.rotationX));
+            const isBehind = zCam > 0;
+            const currentR = Math.sqrt(xCam * xCam + yCam * yCam);
+
+            if (lensingStrength > 0 && currentR < this.bhRadius * 6) {
                 const ringRadius = this.bhRadius * DISK_CONFIG.ringRadiusFactor;
                 const lensFactor = Math.exp(-currentR / (this.bhRadius * DISK_CONFIG.lensingFalloff));
                 const warp = lensFactor * 1.2 * lensingStrength;
 
+                // Determine upper/lower half for asymmetric effects
+                const angleRelativeToCamera = p.angle + this.camera.rotationY;
+                const isUpperHalf = Math.sin(angleRelativeToCamera) > 0;
+
+                // === RADIAL PUSH: Curves particles around BH silhouette ===
+                // Bottom ring should have TIGHTER radius (less expansion) at edge-on views
+                // But stay symmetric at top-down views
                 if (currentR > 0) {
-                    const ratio = (currentR + ringRadius * warp) / currentR;
+                    let radialWarp = warp;
+
+                    // Edge-on factor: 1 at edge-on, 0 at top-down
+                    const edgeOnFactor = 1 - cameraTilt;
+
+                    // Reduce radial expansion for bottom half, but only at edge-on angles
+                    // This creates the tighter bottom ring radius seen in Interstellar
+                    if (!isUpperHalf && isBehind) {
+                        // At edge-on: bottom gets 40% of radial push (tight ring)
+                        // At top-down: bottom gets 100% (symmetric circle)
+                        radialWarp *= 1.0 - edgeOnFactor * 0.6;
+                    }
+
+                    const ratio = (currentR + ringRadius * radialWarp) / currentR;
                     xCam *= ratio;
                     yCam *= ratio;
-                } else {
-                    yCam = ringRadius * lensingStrength;
+                }
+
+                // === VERTICAL CURVES: Only when camera is tilted ===
+                if (cameraTilt > 0.05) {
+                    // Arc shape - smooth curve
+                    const arcWidth = this.bhRadius * 5.0;
+                    const normalizedX = xCam / arcWidth;
+                    const arcCurve = Math.max(0, Math.cos(normalizedX * Math.PI * 0.5));
+
+                    // Depth factor - different for front vs back
+                    const depthFactor = isBehind
+                        ? Math.min(1.0, zCam / (this.bhRadius * 3))
+                        : Math.min(1.0, Math.abs(zCam) / (this.bhRadius * 3));
+
+                    // Ring height - scales with tilt
+                    const ringHeight = this.bhRadius * 2.0 * lensFactor * depthFactor * cameraTilt * lensingStrength;
+
+                    // Apply vertical displacement
+                    if (isBehind) {
+                        // Back particles: upper half UP, lower half DOWN
+                        if (isUpperHalf) {
+                            yCam -= ringHeight * arcCurve;
+                        } else {
+                            // Bottom ring: less vertical displacement too
+                            yCam += ringHeight * arcCurve * 0.5;
+                        }
+                    } else {
+                        // Front particles: curve DOWN slightly
+                        yCam += ringHeight * arcCurve * 0.4;
+                    }
                 }
             }
 

package/demos/js/tde/blackholescene.js

@@ -44,10 +44,10 @@ export class BlackHoleScene extends Scene3D {
         this.Z = {
             starBack: 10,    // Star when behind BH
             blackHole: 15,   // BlackHole: dark shadow at back
-            disk: 20,        // AccretionDisk: over the black hole
+            disk: 1,        // AccretionDisk: over the black hole
             starFront: 25,   // Star when in front of BH
             stream: 30,      // TidalStream: always on top of star and BH
-            jets: 40,        // Jets: always on top
+            jets: 1,        // Jets: always on top
         };
     }
 

package/demos/js/tde/config.js

@@ -6,7 +6,7 @@ export const CONFIG = {
 
     // Phase durations (seconds)
     durations: {
-        approach: 10.0,      // Stable wide orbit
+        approach: 12.0,      // Stable wide orbit
         stretch: 10.0,       // Orbit begins to decay
         disrupt: 20.0,      // Mass transfer (event-based exit)
         accrete: 1.0,       // Debris accretion
@@ -45,7 +45,7 @@ export const CONFIG = {
         startAngle: Math.PI * 1.85,  // Start lower-right, comes FROM right, swings up and around
     },
     sceneOptions: {
-        starCount: 3000,
+        starCount: 5000,
     },
 
     // Accretion disk settings

package/demos/js/tde/index.js

@@ -34,9 +34,9 @@ export class TDEDemo extends Game {
     this.updateScaledSizes();
 
     this.camera = new Camera3D({
-      rotationX: 0.3,
+      rotationX: 0.2,
       rotationY: 0,
-      rotationZ: 0,
+      rotationZ: 0.0,
       perspective: this.baseScale * 1.8, // Zoomed out for wider view
       autoRotate: true,
       autoRotateSpeed: 0.08,
@@ -81,13 +81,37 @@ export class TDEDemo extends Game {
     });
     applyAnchor(this.infoLabel, {
       anchor: Position.BOTTOM_LEFT,
-      anchorOffsetX: -60,
-      anchorMargin: 20,
+      anchorOffsetX: -70,
     });
     this.infoLabel.zIndex = 100;
     this.pipeline.add(this.infoLabel);
 
-    // Replay button (above phase text)
+    // Star View toggle button (above phase text)
+    this.starViewButton = new Button(this, {
+      width: 120,
+      height: 32,
+      text: "★ Star View",
+      font: "14px monospace",
+      colorDefaultBg: "rgba(0, 0, 0, 0.6)",
+      colorDefaultStroke: "#666",
+      colorDefaultText: "#aaa",
+      colorHoverBg: "rgba(30, 30, 30, 0.8)",
+      colorHoverStroke: "#44aaff",
+      colorHoverText: "#44aaff",
+      colorPressedBg: "rgba(50, 50, 50, 0.9)",
+      colorPressedStroke: "#66ccff",
+      colorPressedText: "#66ccff",
+      onClick: () => this.toggleStarView(),
+    });
+    applyAnchor(this.starViewButton, {
+      anchor: Position.BOTTOM_LEFT,
+      anchorMargin: 20,
+      anchorOffsetY: -30, // Above the phase text
+    });
+    this.starViewButton.zIndex = 100;
+    this.pipeline.add(this.starViewButton);
+
+    // Replay button (above star view button)
     this.replayButton = new Button(this, {
       width: 120,
       height: 32,
@@ -107,7 +131,7 @@ export class TDEDemo extends Game {
     applyAnchor(this.replayButton, {
       anchor: Position.BOTTOM_LEFT,
       anchorMargin: 20,
-      anchorOffsetY: -30, // Above the phase text
+      anchorOffsetY: -70, // Above the star view button
     });
     this.replayButton.zIndex = 100;
     this.pipeline.add(this.replayButton);
@@ -115,15 +139,22 @@ export class TDEDemo extends Game {
     // FPS Counter (bottom right)
     this.fpsCounter = new FPSCounter(this, {
       font: "12px monospace",
-      color: "#666",
-    });
-    applyAnchor(this.fpsCounter, {
       anchor: Position.BOTTOM_RIGHT,
-      anchorMargin: 20,
+      anchorMargin: 0,
+      color: "#00FF00",
     });
     this.fpsCounter.zIndex = 100;
     this.pipeline.add(this.fpsCounter);
 
+    // Camera Rotation Text (bottom right)
+    this.cameraRotationText = new Text(this, `Camera Rotation: X:${this.camera.rotationX.toFixed(2)} Y:${this.camera.rotationY.toFixed(2)} Z:${this.camera.rotationZ.toFixed(2)}`, {
+      font: "12px monospace",
+      anchor: Position.BOTTOM_CENTER,
+      color: "#ACACAC",
+    });
+    this.cameraRotationText.zIndex = 100;
+    this.pipeline.add(this.cameraRotationText);
+
     this.initStateMachine();
 
     // Initialize state properly (same as restart)
@@ -150,25 +181,26 @@ export class TDEDemo extends Game {
             if (star) {
               // === VIOLENT BRIGHTNESS FLARE ===
               star.tidalFlare = 2.0;
-              // Fade over 5 seconds
-              Tweenetik.to(star, { tidalFlare: 0 }, 5.0, Easing.easeOutQuad);
+              // Fade slowly - easeInQuad keeps it bright longer before dropping
+              Tweenetik.to(star, { tidalFlare: 0 }, 8.0, Easing.easeInQuad);
               
               // === GEOMETRY WOBBLE - comet-like trauma ===
               // Spike the wobble high - violent shaking
               star.tidalWobble = 1.2;
-              // Fade back to stable over 6 seconds (star tries to recover)
-              Tweenetik.to(star, { tidalWobble: 0.1 }, 6.0, Easing.easeOutElastic);
+              // Fade back to stable over 8 seconds (star tries to recover)
+              Tweenetik.to(star, { tidalWobble: 0.1 }, 8.0, Easing.easeOutElastic);
               
               // === SUDDEN STRETCH SPIKE - comet shape ===
               // Force immediate elongation like panels 2-3 in reference
               star.tidalStretch = 0.8;
               // Ease back toward spherical (but not fully - it can't recover)
-              Tweenetik.to(star, { tidalStretch: 0.2 }, 4.0, Easing.easeOutQuad);
+              Tweenetik.to(star, { tidalStretch: 0.3 }, 6.0, Easing.easeInQuad);
               
-              // === STRESS SPIKE ===
-              star.stressLevel = 0.6;
-              // Slowly calm down but not fully
-              Tweenetik.to(star, { stressLevel: 0.25 }, 5.0, Easing.easeOutQuad);
+              // === STRESS SPIKE (controls white color) ===
+              star.stressLevel = 0.8;
+              // Stay stressed longer - easeInQuad keeps it white before fading
+              // End at 0.4 (still visibly stressed, not back to original)
+              Tweenetik.to(star, { stressLevel: 0.4 }, 10.0, Easing.easeInQuad);
               
               // === PARTICLE BURST ===
               if (this.scene.stream) {
@@ -219,6 +251,41 @@ export class TDEDemo extends Game {
     });
   }
 
+  /**
+   * Toggle between star-following camera view and default view
+   */
+  toggleStarView() {
+    const star = this.scene.star;
+
+    if (this.camera.isFollowing()) {
+      // Switch back to default view
+      this.camera.unfollow(true); // true = animate back to initial position
+      this.starViewButton.text = "★ Star View";
+
+      // Re-enable auto-rotate
+      this.camera.autoRotate = true;
+    } else {
+      // Follow the star, looking at the black hole
+      // Position camera just above the star's surface (north pole perspective)
+      // Very close offset = immersive "standing on the star" feel
+      const offsetHeight = star.currentRadius * 0.3; // Just above surface
+
+      this.camera.follow(star, {
+        offsetX: 0,
+        offsetY: offsetHeight,  // Barely above the star's "north pole"
+        offsetZ: 0,
+        lookAt: true,
+        lookAtTarget: this.scene.bh, // Look at black hole
+        lerp: 0.12,  // Slightly snappier follow for immersion
+      });
+
+      this.starViewButton.text = "◉ BH View";
+
+      // Disable auto-rotate while following
+      this.camera.autoRotate = false;
+    }
+  }
+
   restart() {
     // Reset masses
     this.scene.bh.mass = CONFIG.blackHole.initialMass;
@@ -278,6 +345,21 @@ export class TDEDemo extends Game {
     // Reset velocity tracking to avoid spike after position reset
     this.scene.star.resetVelocity();
 
+    // Kill any lingering tweens on the star (from previous run's stretch phase)
+    Tweenetik.killTarget(this.scene.star);
+
+    // Reset star's tidal state (color, stress, stretch, etc.)
+    this.scene.star.tidalStretch = 0;
+    this.scene.star.pulsationPhase = 0;
+    this.scene.star.stressLevel = 0;
+    this.scene.star.tidalProgress = 0;
+    this.scene.star.tidalFlare = 0;
+    this.scene.star.tidalWobble = 0;
+    this.scene.star.angularVelocity = CONFIG.star.rotationSpeed ?? 0.5;
+    this.scene.star.rotation = 0;
+    this.scene.star.currentColor = null; // Force recalc
+    this.scene.star.updateVisual(); // Apply reset immediately
+
     // Clear tidal stream particles
     if (this.scene.stream) {
       this.scene.stream.clear();
@@ -310,6 +392,14 @@ export class TDEDemo extends Game {
       this.starField.lensingStrength = 0.15;
     }
 
+    // Reset camera to default view if following
+    if (this.camera.isFollowing()) {
+      this.camera.unfollow(false); // Don't animate, just reset
+      this.camera.reset();
+      if (this.starViewButton) this.starViewButton.text = "★ Star View";
+      this.camera.autoRotate = true;
+    }
+
     // Hide replay button
     if (this.replayButton) this.replayButton.visible = false;
 
@@ -381,6 +471,8 @@ export class TDEDemo extends Game {
     if (!this.fsm) return;
     this.fsm.update(dt);
 
+    this.cameraRotationText.text = `Camera Rotation: X:${this.camera.rotationX.toFixed(2)} Y:${this.camera.rotationY.toFixed(2)}`;
+
     const state = this.fsm.state;
     const progress = this.fsm.progress;
     const star = this.scene.star;
@@ -586,15 +678,42 @@ export class TDEDemo extends Game {
 
       const pos = polarToCartesian(star.orbitalRadius, star.phi);
 
-      // Vertical wobble - only after chaos builds
-      const verticalWobble = chaos > 0.01
-        ? Math.sin(time * 1.7) * chaos * baseRadius * 0.12
-        + Math.cos(time * 3.9) * chaos * baseRadius * 0.06
-        : 0;
+      // === ORBITAL PLANE TILT ===
+      // As chaos builds, the orbital plane itself starts wobbling
+      // This creates the effect of the orbit tilting dramatically
+      let tiltX = 0;  // Tilt around X-axis (makes orbit bob front-to-back)
+      let tiltZ = 0;  // Tilt around Z-axis (makes orbit bob left-to-right)
+
+      if (chaos > 0.005) {
+        // Max tilt in radians (~30 degrees = 0.52 rad) - very dramatic!
+        const maxTilt = 0.52 * (chaos / 0.6);  // Scale with chaos (0.6 is max chaos)
+
+        // Multiple frequencies for organic, unstable feel
+        // Slower base frequencies so the tilt is visible, faster harmonics for jitter
+        tiltX = Math.sin(time * 0.8) * maxTilt
+              + Math.sin(time * 2.1) * maxTilt * 0.5
+              + Math.sin(time * 4.5) * maxTilt * 0.15;  // High freq jitter
+        tiltZ = Math.cos(time * 0.6) * maxTilt * 0.8
+              + Math.sin(time * 1.9) * maxTilt * 0.4
+              + Math.cos(time * 5.2) * maxTilt * 0.1;   // High freq jitter
+      }
 
-      star.x = pos.x;
-      star.y = verticalWobble;
-      star.z = pos.z;
+      // Apply orbital plane tilt rotation
+      // Rotate around X-axis: affects Y and Z
+      const cosX = Math.cos(tiltX);
+      const sinX = Math.sin(tiltX);
+      let newY = -pos.z * sinX;
+      let newZ = pos.z * cosX;
+
+      // Rotate around Z-axis: affects X and Y
+      const cosZ = Math.cos(tiltZ);
+      const sinZ = Math.sin(tiltZ);
+      const finalX = pos.x * cosZ - newY * sinZ;
+      const finalY = pos.x * sinZ + newY * cosZ;
+
+      star.x = finalX;
+      star.y = finalY;
+      star.z = newZ;
 
       // Emit particles throughout disrupt phase (more than stretch)
       if (this.scene.stream && star.mass > 0) {
@@ -623,6 +742,12 @@ export class TDEDemo extends Game {
 
         // Trigger accrete state when star mass is depleted
         if (star.mass <= 0) {
+          // If camera was following the star, switch back to default view
+          if (this.camera.isFollowing()) {
+            this.camera.unfollow(true);
+            if (this.starViewButton) this.starViewButton.text = "★ Star View";
+            this.camera.autoRotate = true;
+          }
           this.fsm.trigger("starConsumed");
         }
       }

package/demos/js/tde/lensedstarfield.js

@@ -24,7 +24,8 @@ const LENSING_CONFIG = {
     minDistance: 5,
 
     // Occlusion radius multiplier (stars within BH radius * this are hidden)
-    occlusionMultiplier: 1.15,
+    // The dark shadow region extends to ~2.6x the event horizon (photon sphere)
+    occlusionMultiplier: 2.6,
 };
 
 export class LensedStarfield extends StarField {
@@ -68,49 +69,55 @@ export class LensedStarfield extends StarField {
         const lensingPower = LENSING_CONFIG.baseStrength * this.lensingStrength;
         const effectRadius = LENSING_CONFIG.effectRadiusPixels;
 
+        // Project black hole position once for all stars
+        // This is crucial when camera has moved (e.g., following the star)
+        const bhProjected = this.camera.project(0, 0, 0);
+        const bhScreenX = bhProjected.x;
+        const bhScreenY = bhProjected.y;
+
         Painter.useCtx((ctx) => {
             ctx.globalCompositeOperation = "source-over";
 
             for (const star of this.stars) {
-                // === CAMERA SPACE TRANSFORMATION ===
-                const cosY = Math.cos(this.camera.rotationY);
-                const sinY = Math.sin(this.camera.rotationY);
-                let xCam = star.x * cosY - star.z * sinY;
-                let zCam = star.x * sinY + star.z * cosY;
-
-                const cosX = Math.cos(this.camera.rotationX);
-                const sinX = Math.sin(this.camera.rotationX);
-                let yCam = star.y * cosX - zCam * sinX;
-                zCam = star.y * sinX + zCam * cosX;
+                // === USE CAMERA.PROJECT FOR PROPER POSITION HANDLING ===
+                // This accounts for camera position (translation) not just rotation
+                const projected = this.camera.project(star.x, star.y, star.z);
 
                 // Skip stars behind camera
-                if (zCam < -this.camera.perspective + 50) continue;
+                if (projected.scale <= 0) continue;
 
-                // === PERSPECTIVE PROJECTION ===
-                const perspectiveScale = this.camera.perspective / (this.camera.perspective + zCam);
-                let screenX = xCam * perspectiveScale;
-                let screenY = yCam * perspectiveScale;
+                let screenX = projected.x;
+                let screenY = projected.y;
+                const perspectiveScale = projected.scale;
+
+                // === GRAVITATIONAL LENSING (relative to BH screen position) ===
+                // Only apply to stars "behind" the black hole (positive z after projection)
+                if (lensingPower > 0 && projected.z > 0) {
+                    // Calculate position relative to BH's screen position
+                    const relX = screenX - bhScreenX;
+                    const relY = screenY - bhScreenY;
 
-                // === GRAVITATIONAL LENSING (screen space) ===
-                // Only apply to stars "behind" the black hole (zCam > 0)
-                if (lensingPower > 0 && zCam > 0) {
                     const lensed = applyGravitationalLensing(
-                        screenX, screenY,
+                        relX, relY,
                         effectRadius,
                         lensingPower,
                         LENSING_CONFIG.falloff,
                         LENSING_CONFIG.minDistance
                     );
-                    screenX = lensed.x;
-                    screenY = lensed.y;
+
+                    // Transform back to screen space
+                    screenX = lensed.x + bhScreenX;
+                    screenY = lensed.y + bhScreenY;
                 }
 
-                // === OCCLUSION CHECK ===
+                // === OCCLUSION CHECK (relative to BH screen position) ===
                 // Hide stars that fall within the black hole's occlusion radius
                 if (this.blackHole) {
                     const bhScreenRadius = this.blackHole.currentRadius * LENSING_CONFIG.occlusionMultiplier;
-                    const distFromCenter = Math.sqrt(screenX * screenX + screenY * screenY);
-                    if (distFromCenter < bhScreenRadius) continue;
+                    const dxBH = screenX - bhScreenX;
+                    const dyBH = screenY - bhScreenY;
+                    const distFromBH = Math.sqrt(dxBH * dxBH + dyBH * dyBH);
+                    if (distFromBH < bhScreenRadius) continue;
                 }
 
                 // Final screen position