@guinetik/gcanvas 1.0.0 → 1.0.2

package/demos/js/tde/tdestar.js

@@ -2,15 +2,12 @@ import { GameObject, Sphere3D } from "../../../src/index.js";
 import { polarToCartesian } from "../../../src/math/gr.js";
 import { CONFIG } from "./config.js";
 
-// Star shader configuration
-const STAR_SHADER_CONFIG = {
-    useShader: true,
-    shaderType: "star",
-    shaderUniforms: {
-        uStarColor: [1.0, 0.85, 0.3],  // Golden yellow
-        uTemperature: 5500,             // K (slightly cooler than Sun)
-        uActivityLevel: 0.75,            // Moderate surface activity
-    },
+// Performance tuning: reduce update frequency for expensive operations
+const PERF_CONFIG = {
+    geometryUpdateThreshold: 0.02,  // Only regenerate geometry if radius changes by 2%
+    uniformUpdateInterval: 2,        // Update shader uniforms every N frames
+    breathingEnabled: true,          // Toggle breathing effect
+    stressColorEnabled: true,        // Toggle dynamic color shifts
 };
 
 export class Star extends GameObject {
@@ -48,6 +45,11 @@ export class Star extends GameObject {
         this.tidalProgress = 0;     // External tidal progress from FSM (0-1)
         this.tidalFlare = 0;        // 0-1, sudden brightness burst at disruption start
         this.tidalWobble = 0;       // 0-1, violent geometry wobble during trauma
+
+        // Performance optimization state
+        this._frameCount = 0;
+        this._lastGeometryRadius = 0;
+        this._cachedUniforms = null;
     }
 
     init() {
@@ -93,109 +95,73 @@ export class Star extends GameObject {
         const massRatio = this.mass / this.initialMass;
 
         // === NON-LINEAR SIZE COLLAPSE ===
-        // Star resists at first (internal pressure), then collapses rapidly
-        // Use a power curve: slow start, rapid end
-        const collapseProgress = 1 - massRatio;  // 0 = full, 1 = gone
-        const resistanceCurve = Math.pow(collapseProgress, 0.5);  // sqrt = resists early
-        const effectiveMassRatio = 1 - resistanceCurve;
+        // Use sqrt for resistance curve (star resists early, then collapses)
+        const collapseProgress = 1 - massRatio;
+        const effectiveMassRatio = 1 - Math.sqrt(collapseProgress);
 
         // Base radius with non-linear collapse
         this.currentRadius = this.baseRadius * Math.max(0.05, effectiveMassRatio);
 
-        // Don't update geometry if star is consumed
+        // Don't update if star is consumed
         if (this.currentRadius <= 0 || this.mass <= 0) {
             return;
         }
 
-        // === TIDAL STRETCH (Spaghettification) ===
-        // Create comet/teardrop shape pointed toward black hole
-        const dist = Math.sqrt(this.x * this.x + (this.z || 0) * (this.z || 0)) || 1;
+        // === TIDAL STRETCH (Simplified) ===
+        const zVal = this.z || 0;
+        const distSq = this.x * this.x + zVal * zVal;
+        const dist = Math.sqrt(distSq) || 1;
+        const invDist = 1 / dist;
         
         // Direction toward black hole (unit vector)
-        let dirX = -this.x / dist;
-        let dirZ = -(this.z || 0) / dist;
+        const dirX = -this.x * invDist;
+        const dirZ = -zVal * invDist;
         
         // Proximity factor: closer to BH = more stretch
-        let proximityFactor = Math.max(0, 1 - dist / this.initialOrbitalRadius);
+        const proximityFactor = Math.max(0, 1 - dist / this.initialOrbitalRadius);
         
-        // Calculate stretch amount based on phase and proximity
+        // Simplified stretch calculation
         if (collapseProgress > 0.8) {
-            // Very late stage - reduce stretch as star becomes tiny
             this.tidalStretch = (1 - collapseProgress) * 2;
         } else {
-            // Main deformation: builds with tidalProgress and proximity
-            // tidalProgress is driven by FSM state (0 in approach, ramps in stretch/disrupt)
-            const baseStretch = this.tidalProgress * 1.2;  // Up to 1.2 stretch
-            const proximityBoost = proximityFactor * 0.5;  // Extra stretch when close
-            
-            this.tidalStretch = baseStretch + proximityBoost;
-            this.tidalStretch = Math.min(1.8, this.tidalStretch);  // Cap at 1.8
+            this.tidalStretch = Math.min(1.8, this.tidalProgress * 1.2 + proximityFactor * 0.5);
         }
 
-        // === BREATHING (Slow, ominous expansion/contraction) ===
-        // Very slow rhythm - like a dying star's final gasps
-        // No rapid bouncing - this should feel cosmic, not cartoonish
-        const breathingAmp = 0.03 * (1 - collapseProgress * 0.5);  // Subtle, weakens as disrupted
-        const breathing = Math.sin(this.pulsationPhase) * breathingAmp;
-
-        // Apply breathing to radius (very subtle)
-        this.currentRadius *= (1 + breathing);
+        // === BREATHING (Optional, can be disabled for performance) ===
+        if (PERF_CONFIG.breathingEnabled) {
+            const breathingAmp = 0.03 * (1 - collapseProgress * 0.5);
+            this.currentRadius *= (1 + Math.sin(this.pulsationPhase) * breathingAmp);
+        }
 
-        // === STRESS LEVEL ===
-        // Combines proximity and mass loss - drives surface chaos
-        // Use power curve so stress stays LOW for most of disruption, then ramps up sharply
-        // This gives more time to see the red-orange star with surface chaos
-        const rawStress = proximityFactor * 0.4 + collapseProgress * 0.6;  // Reduced weights
-        // Power of 3 = stays low longer, ramps up sharply at the end
-        this.stressLevel = Math.min(1, Math.pow(rawStress, 2.5));
+        // === STRESS LEVEL (Simplified power curve) ===
+        const rawStress = proximityFactor * 0.4 + collapseProgress * 0.6;
+        this.stressLevel = Math.min(1, rawStress * rawStress * rawStress);  // Cubic approximation
 
         // === ACTIVITY & ROTATION ===
-        const activityLevel = 0.3 + this.stressLevel * 0.7;  // 0.3 -> 1.0
-
-        // Angular momentum conservation: shrinking = faster spin
+        const activityLevel = 0.3 + this.stressLevel * 0.7;
         const baseRotationSpeed = CONFIG.star.rotationSpeed ?? 0.5;
-        const spinUpFactor = 1 / Math.max(0.2, effectiveMassRatio);  // Inverse of size
-        const rotationSpeed = Math.min(10, baseRotationSpeed * spinUpFactor);
-
-        // === COLOR SHIFT ===
-        // Start deep red-orange, transition through orange → yellow → white
-        // This lets us see the tidal chaos on a colorful surface before brightening
-        //
-        // Phase 1 (stress 0-0.5): Deep red-orange, surface chaos building
-        // Phase 2 (stress 0.5-0.8): Shift to orange-yellow, intense activity
-        // Phase 3 (stress 0.8-1.0): Rapid shift to white-hot, death throes
-
-        // Temperature increases with stress (tidal heating is real physics!)
-        const tempShift = this.stressLevel * this.stressLevel * 2500;  // Up to +2500K at max stress
-        const temperature = (CONFIG.star.temperature ?? 3800) + tempShift;
-
-        // Color transition: red-orange → orange → yellow → white
-        // R stays high, G increases with stress, B only increases late
-        let r = 1.0;
-        let g, b;
-
-        if (this.stressLevel < 0.5) {
-            // Phase 1: Deep red-orange → orange (stress 0-0.5)
-            const t = this.stressLevel * 2;  // 0 to 1 over this phase
-            g = 0.35 + t * 0.25;  // 0.35 → 0.6
-            b = 0.15 + t * 0.1;   // 0.15 → 0.25
-        } else if (this.stressLevel < 0.8) {
-            // Phase 2: Orange → yellow-orange (stress 0.5-0.8)
-            const t = (this.stressLevel - 0.5) / 0.3;  // 0 to 1
-            g = 0.6 + t * 0.2;    // 0.6 → 0.8
-            b = 0.25 + t * 0.1;   // 0.25 → 0.35
+        const rotationSpeed = Math.min(10, baseRotationSpeed / Math.max(0.2, effectiveMassRatio));
+
+        // === COLOR SHIFT (Simplified linear interpolation) ===
+        let r = 1.0, g, b;
+        const stress = this.stressLevel;
+        
+        if (PERF_CONFIG.stressColorEnabled) {
+            // Simplified color: lerp from red-orange to white based on stress
+            g = 0.35 + stress * 0.6;   // 0.35 → 0.95
+            b = 0.15 + stress * 0.7;   // 0.15 → 0.85
         } else {
-            // Phase 3: Yellow-orange → white-hot (stress 0.8-1.0)
-            const t = (this.stressLevel - 0.8) / 0.2;  // 0 to 1
-            g = 0.8 + t * 0.15;   // 0.8 → 0.95
-            b = 0.35 + t * 0.5;   // 0.35 → 0.85 (rapid blue increase = white)
+            g = 0.5;
+            b = 0.2;
         }
 
         const stressColor = [r, g, b];
-
-        // Expose current color for particle emission
         this.currentColor = stressColor;
 
+        // Temperature calculation
+        const temperature = (CONFIG.star.temperature ?? 3800) + stress * stress * 2500;
+
+        // === VISUAL UPDATE ===
         if (!this.visual) {
             this.visual = new Sphere3D(this.currentRadius, {
                 color: CONFIG.star.color,
@@ -215,23 +181,37 @@ export class Star extends GameObject {
                     uTidalWobble: this.tidalWobble,
                 },
             });
+            this._lastGeometryRadius = this.currentRadius;
         } else {
             this.visual.radius = this.currentRadius;
-            if (this.visual.useShader) {
-                this.visual.setShaderUniforms({
-                    uStarColor: stressColor,
-                    uTemperature: temperature,
-                    uActivityLevel: activityLevel,
-                    uRotationSpeed: rotationSpeed,
-                    uTidalStretch: this.tidalStretch,
-                    uStretchDirX: dirX,
-                    uStretchDirZ: dirZ,
-                    uStressLevel: this.stressLevel,
-                    uTidalFlare: this.tidalFlare,
-                    uTidalWobble: this.tidalWobble,
-                });
+            
+            // Only update shader uniforms every N frames
+            this._frameCount++;
+            if (this._frameCount >= PERF_CONFIG.uniformUpdateInterval) {
+                this._frameCount = 0;
+                
+                if (this.visual.useShader) {
+                    this.visual.setShaderUniforms({
+                        uStarColor: stressColor,
+                        uTemperature: temperature,
+                        uActivityLevel: activityLevel,
+                        uRotationSpeed: rotationSpeed,
+                        uTidalStretch: this.tidalStretch,
+                        uStretchDirX: dirX,
+                        uStretchDirZ: dirZ,
+                        uStressLevel: this.stressLevel,
+                        uTidalFlare: this.tidalFlare,
+                        uTidalWobble: this.tidalWobble,
+                    });
+                }
+            }
+            
+            // Only regenerate geometry if radius changed significantly
+            const radiusChange = Math.abs(this.currentRadius - this._lastGeometryRadius) / this._lastGeometryRadius;
+            if (radiusChange > PERF_CONFIG.geometryUpdateThreshold) {
+                this.visual._generateGeometry();
+                this._lastGeometryRadius = this.currentRadius;
             }
-            this.visual._generateGeometry();
         }
     }
 

package/demos/js/tde/tidalstream.js

@@ -13,8 +13,8 @@ import { applyGravitationalLensing } from "../../../src/math/gr.js";
 // Stream-specific config
 const STREAM_CONFIG = {
     gravity: 120000,        // Strong gravity (linear falloff G/r)
-    maxParticles: 5000,
-    particleLifetime: 12,   // Seconds - long lifetime so particles can orbit the BH
+    maxParticles: 10000,
+    particleLifetime: 20,   // Seconds - long lifetime so particles can orbit the BH
 
     // Velocity inheritance - how much of star's velocity particles get
     // Lower = particles emit more "from" the star, not ahead of it
@@ -42,7 +42,7 @@ const STREAM_CONFIG = {
 
     // Particle size
     sizeMin: 1,
-    sizeMax: 3,
+    sizeMax: 1.2,
 
     // Gravitational lensing (visual effect)
     // These are multipliers relative to the BH's current radius
@@ -259,6 +259,12 @@ export class TidalStream extends GameObject {
         // Build render list with projection
         const renderList = [];
 
+        // Project black hole position once for all particles
+        // 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;
+
         // Young particles stay invisible (appear to emerge from star)
         const fadeInTime = 0.05;  // seconds before particles become visible
         const fadeInDuration = 0.1;  // seconds to fade from invisible to full opacity
@@ -299,24 +305,34 @@ export class TidalStream extends GameObject {
             let screenY = projected.y;
 
             if (STREAM_CONFIG.lensing.enabled && this.bhRadius > 0) {
+                // Calculate particle position RELATIVE to black hole's screen position
+                const relX = screenX - bhScreenX;
+                const relY = screenY - bhScreenY;
+
                 const effectRadius = this.bhRadius * STREAM_CONFIG.lensing.effectRadiusMult;
                 const strength = this.bhRadius * STREAM_CONFIG.lensing.strengthMult;
                 const minDist = this.bhRadius * STREAM_CONFIG.lensing.minDistanceMult;
 
+                // Apply lensing in BH-relative space (lensing curves toward origin)
                 const lensed = applyGravitationalLensing(
-                    screenX, screenY,
+                    relX, relY,
                     effectRadius,
                     strength,
                     STREAM_CONFIG.lensing.falloff,
                     minDist
                 );
-                screenX = lensed.x;
-                screenY = lensed.y;
+
+                // Transform back to screen space
+                screenX = lensed.x + bhScreenX;
+                screenY = lensed.y + bhScreenY;
             }
 
             // Check if particle is visually inside the black hole
-            const screenDist = Math.sqrt(screenX * screenX + screenY * screenY);
-            const insideBH = screenDist < this.bhRadius;
+            // Use pre-calculated BH screen position
+            const dxBH = screenX - bhScreenX;
+            const dyBH = screenY - bhScreenY;
+            const screenDistFromBH = Math.sqrt(dxBH * dxBH + dyBH * dyBH);
+            const insideBH = screenDistFromBH < this.bhRadius;
 
             // Screen position = center + lensed offset
             renderList.push({

package/demos/plane3d.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Plane3D Showcase - GCanvas</title>
+    <link rel="stylesheet" href="demos.css" />
+    <script src="./js/info-toggle.js"></script>
+</head>
+<body>
+    <div id="info">
+        <strong>Plane3D Showcase</strong> — 3D plane rendering modes<br/>
+        <span style="color:#CCC">
+            <li>Solid Color (Canvas 2D rendering)</li>
+            <li>Gradient (WebGL shader)</li>
+            <li>Grid (WebGL shader)</li>
+            <li>Drag to rotate camera</li>
+            <li>Double-click to reset view</li>
+        </span>
+    </div>
+    <canvas id="game"></canvas>
+    <script type="module" src="./js/plane3d.js"></script>
+</body>
+</html>

package/demos/platformer.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Tron Platformer - GCanvas Demo</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+  <style>
+    /* Override for full immersion */
+    body {
+      background: #000;
+    }
+
+    canvas#game {
+      width: 100vw;
+      height: 100vh;
+    }
+
+    #info {
+      background: rgba(0, 0, 0, 0.9);
+      border-bottom: 1px solid #00ff00;
+    }
+
+    #info strong {
+      color: #00ff00;
+    }
+  </style>
+</head>
+<body>
+  <div id="info">
+    <strong>NETRUNNER.exe</strong> — platformer demo<br/>
+    <span style="color:#666">
+      <li>ARROWS / WASD: move left/right</li>
+      <li>SPACE / UP / W: jump</li>
+      <li>stomp enemies • collect data orbs</li>
+      <li>reach the portal to complete the level</li>
+    </span>
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module" src="./js/platformer.js"></script>
+</body>
+</html>

package/demos/sphere3d.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sphere3D Showcase - GCanvas</title>
+    <link rel="stylesheet" href="demos.css" />
+    <script src="./js/info-toggle.js"></script>
+</head>
+<body>
+    <div id="info">
+        <strong>Sphere3D Showcase</strong> — 3D sphere rendering modes<br/>
+        <span style="color:#CCC">
+            <li>Solid Color (Canvas 2D rendering)</li>
+            <li>Gas Giant (WebGL shader with bands)</li>
+            <li>Star (WebGL shader with glow)</li>
+            <li>Drag to rotate camera</li>
+            <li>Double-click to reset view</li>
+        </span>
+    </div>
+    <canvas id="game"></canvas>
+    <script type="module" src="./js/sphere3d.js"></script>
+</body>
+</html>

package/demos/sprite.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Sprite Timeline Demo</title>
+  <link rel="stylesheet" href="demos.css" />
+</head>
+
+<body>
+  <div id="info">
+    <strong>Sprite Demo</strong> - Demonstrates the Sprite class, a MovieClip-style GameObject with frame-by-frame timeline animation. Each Sprite contains a collection of Shapes as frames, with timeline controls including play(), pause(), stop(), goto(), gotoAndStop(), gotoAndPlay(), and rewind(). This showcases how to create frame-by-frame animations similar to Adobe Flash MovieClips within the gcanvas engine's abstractions.
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module" src="./js/sprite.js"></script>
+</body>
+
+</html>