@guinetik/gcanvas 1.0.2 → 1.0.4

package/demos/js/tde_old/flare.obj.js

@@ -1,239 +0,0 @@
-/**
- * Flare - Luminous burst effect for TDE demo
- *
- * Renders a bright flare using direct canvas drawing.
- * State computed in update(), rendered in draw() via Painter.useCtx().
- */
-import { GameObject, Painter } from "../../../src/index.js";
-
-const CONFIG = {
-  // Colors - BRIGHTER
-  colorPeak: { r: 255, g: 255, b: 255 },
-  colorMid: { r: 255, g: 220, b: 150 },
-  colorFade: { r: 255, g: 150, b: 80 },
-
-  // Animation
-  pulseSpeed: 8,
-  pulseAmount: 0.2,
-
-  // Shadow/glow - MORE INTENSE
-  glowBlurBase: 100,
-
-  // Flare size multipliers - LARGER AND DENSER
-  outerMultiplier: 2.0,
-  innerMultiplier: 0.8,
-  coreMultiplier: 0.35,
-};
-
-export class Flare extends GameObject {
-  /**
-   * @param {Game} game - Game instance
-   * @param {Object} options
-   * @param {number} options.radius - Flare radius
-   * @param {Camera3D} options.camera - Camera for projection
-   */
-  constructor(game, options = {}) {
-    super(game, options);
-
-    this.radius = options.radius ?? 100;
-    this.intensity = 0;
-    this.targetIntensity = 0;
-    this.pulsePhase = 0;
-    this.camera = options.camera;
-
-    // Screen position (computed in update)
-    this.screenX = game.width / 2;
-    this.screenY = game.height / 2;
-    this.screenScale = 1;
-  }
-
-  /**
-   * Initialize flare.
-   */
-  init() {
-    // Nothing to pre-create
-  }
-
-  /**
-   * Get current color based on intensity.
-   */
-  getCurrentColor() {
-    if (this.intensity > 0.7) {
-      // Peak - white
-      const t = (this.intensity - 0.7) / 0.3;
-      return this.lerpColor(CONFIG.colorMid, CONFIG.colorPeak, t);
-    } else if (this.intensity > 0.3) {
-      // Mid - orange
-      const t = (this.intensity - 0.3) / 0.4;
-      return this.lerpColor(CONFIG.colorFade, CONFIG.colorMid, t);
-    } else {
-      // Fade - red
-      return CONFIG.colorFade;
-    }
-  }
-
-  /**
-   * Linearly interpolate between two colors.
-   */
-  lerpColor(c1, c2, t) {
-    return {
-      r: Math.round(c1.r + (c2.r - c1.r) * t),
-      g: Math.round(c1.g + (c2.g - c1.g) * t),
-      b: Math.round(c1.b + (c2.b - c1.b) * t),
-    };
-  }
-
-  /**
-   * Get effective intensity with pulse.
-   */
-  getEffectiveIntensity() {
-    const pulse = Math.sin(this.pulsePhase) * CONFIG.pulseAmount;
-    return Math.max(0, Math.min(1, this.intensity + pulse * this.intensity));
-  }
-
-  /**
-   * Update radius.
-   */
-  updateRadius(radius) {
-    this.radius = radius;
-  }
-
-  /**
-   * Trigger the flare.
-   */
-  trigger() {
-    this.intensity = 1;
-    this.targetIntensity = 1;
-  }
-
-  /**
-   * Set intensity directly.
-   */
-  setIntensity(intensity) {
-    this.intensity = Math.max(0, Math.min(1, intensity));
-    this.targetIntensity = this.intensity;
-  }
-
-  /**
-   * Start fading out.
-   */
-  fadeOut() {
-    this.targetIntensity = 0.3;
-  }
-
-  /**
-   * Reset flare.
-   */
-  reset() {
-    this.intensity = 0;
-    this.targetIntensity = 0;
-    this.pulsePhase = 0;
-  }
-
-  /**
-   * Update - compute render state.
-   */
-  update(dt) {
-    super.update(dt);
-
-    // Update pulse
-    this.pulsePhase += dt * CONFIG.pulseSpeed;
-
-    // Smooth intensity transition
-    const diff = this.targetIntensity - this.intensity;
-    if (Math.abs(diff) > 0.001) {
-      this.intensity += diff * dt * 2;
-    }
-
-    // Project (0,0,0) through camera to get screen position
-    if (this.camera) {
-      const projected = this.camera.project(0, 0, 0);
-      this.screenX = this.game.width / 2 + projected.x;
-      this.screenY = this.game.height / 2 + projected.y;
-      this.screenScale = projected.scale;
-    }
-  }
-
-  /**
-   * Draw the flare.
-   * Uses Painter.useCtx() for direct canvas drawing.
-   */
-  draw() {
-    const effectiveIntensity = this.getEffectiveIntensity();
-    if (effectiveIntensity < 0.01) return;
-
-    const scaledRadius = this.radius * this.screenScale;
-    const color = this.getCurrentColor();
-
-    Painter.useCtx((ctx) => {
-      // Outer glow (largest, most transparent)
-      const outerRadius =
-        scaledRadius * CONFIG.outerMultiplier * effectiveIntensity;
-      const outerGradient = ctx.createRadialGradient(
-        this.screenX,
-        this.screenY,
-        0,
-        this.screenX,
-        this.screenY,
-        outerRadius,
-      );
-      outerGradient.addColorStop(
-        0,
-        `rgba(${color.r}, ${color.g}, ${color.b}, ${effectiveIntensity * 0.6})`,
-      );
-      outerGradient.addColorStop(
-        0.3,
-        `rgba(${color.r}, ${Math.round(color.g * 0.7)}, ${Math.round(color.b * 0.5)}, ${effectiveIntensity * 0.4})`,
-      );
-      outerGradient.addColorStop(
-        0.6,
-        `rgba(${color.r}, ${Math.round(color.g * 0.5)}, ${Math.round(color.b * 0.3)}, ${effectiveIntensity * 0.2})`,
-      );
-      outerGradient.addColorStop(1, "rgba(255, 50, 0, 0)");
-
-      ctx.fillStyle = outerGradient;
-      ctx.shadowColor = `rgba(${color.r}, ${color.g}, ${color.b}, ${effectiveIntensity * 0.9})`;
-      ctx.shadowBlur = CONFIG.glowBlurBase * effectiveIntensity;
-      ctx.beginPath();
-      ctx.arc(this.screenX, this.screenY, outerRadius, 0, Math.PI * 2);
-      ctx.fill();
-
-      // Inner glow (smaller, brighter)
-      const innerRadius =
-        scaledRadius * CONFIG.innerMultiplier * effectiveIntensity;
-      const innerGradient = ctx.createRadialGradient(
-        this.screenX,
-        this.screenY,
-        0,
-        this.screenX,
-        this.screenY,
-        innerRadius,
-      );
-      innerGradient.addColorStop(
-        0,
-        `rgba(${color.r}, ${color.g}, ${color.b}, ${effectiveIntensity})`,
-      );
-      innerGradient.addColorStop(
-        0.5,
-        `rgba(${color.r}, ${color.g}, ${color.b}, ${effectiveIntensity * 0.6})`,
-      );
-      innerGradient.addColorStop(1, "rgba(255, 150, 50, 0)");
-
-      ctx.shadowBlur = CONFIG.glowBlurBase * 0.6 * effectiveIntensity;
-      ctx.fillStyle = innerGradient;
-      ctx.beginPath();
-      ctx.arc(this.screenX, this.screenY, innerRadius, 0, Math.PI * 2);
-      ctx.fill();
-
-      // Core (brightest center)
-      const coreRadius =
-        scaledRadius * CONFIG.coreMultiplier * effectiveIntensity;
-      ctx.shadowColor = "rgba(255, 255, 255, 1)";
-      ctx.shadowBlur = 25 * effectiveIntensity;
-      ctx.fillStyle = `rgba(255, 255, 255, ${effectiveIntensity})`;
-      ctx.beginPath();
-      ctx.arc(this.screenX, this.screenY, coreRadius, 0, Math.PI * 2);
-      ctx.fill();
-    });
-  }
-}

package/demos/js/tde_old/index.js

@@ -1,448 +0,0 @@
-/**
- * Tidal Disruption Event - Cinematic Visualization
- *
- * A star torn apart by a supermassive black hole's tidal forces.
- * Uses ParticleSystem for debris, Shapes for black hole/flare,
- * and StateMachine for phase management.
- */
-import {
-  Game,
-  Camera3D,
-  StateMachine,
-  Painter,
-  Text,
-  Scene,
-} from "../../../src/index.js";
-
-import { BlackHole } from "./blackhole.obj.js";
-import { Star } from "./star.obj.js";
-import { DebrisManager } from "./debris.obj.js";
-import { Flare } from "./flare.obj.js";
-import { StarField } from "../blackhole/starfield.obj.js";
-
-// Configuration
-const CONFIG = {
-  // Sizing (as fraction of screen)
-  bhRadiusRatio: 0.08,
-  starRadiusRatio: 0.05, // Smaller base size - distance scaling makes it look bigger when far
-  tidalRadiusRatio: 0.35,
-
-  // Star - starts FAR, falls IN
-  starParticleCount: 8000, // Much denser for fluid look
-  starStartDistance: 0.6, // Matches apoapsisRatio - start at farthest point
-
-  // Camera
-  cameraDistance: 0.7,
-  autoRotateSpeed: 0.05, // Slower rotation to admire the view
-
-  // Phase durations (seconds) - FASTER, MORE DRAMATIC
-  phases: {
-    approach: 10.0, // Longer approach to build tension
-    stretch: 3.0, // Orbital stretching
-    disrupt: 5.0, // Extended disruption - particles spiral off
-    accrete: 6.0, // Longer accretion for more drama
-    flare: 2.0, // Bright flare
-  },
-
-  // Visual
-  backgroundColor: "#020206",
-};
-
-class TDEDemo extends Game {
-  constructor(canvas) {
-    super(canvas);
-    this.backgroundColor = CONFIG.backgroundColor;
-    this.enableFluidSize();
-  }
-
-  init() {
-    super.init();
-    this.time = 0;
-
-    // Calculate scaled sizes
-    this.updateScaledSizes();
-
-    // Setup Camera3D - lower perspective = stronger depth effect
-    this.camera = new Camera3D({
-      rotationX: 1.2, // ~70 degrees - lower angle for Interstellar look
-      rotationY: 0,
-      perspective: this.baseScale * CONFIG.cameraDistance,
-      autoRotate: true,
-      autoRotateSpeed: CONFIG.autoRotateSpeed,
-    });
-    this.camera.enableMouseControl(this.canvas);
-
-    // Create Starfield (background) - LOTS OF STARS
-    this.starfield = new StarField(this, {
-      camera: this.camera,
-      starCount: 5000,
-    });
-    this.starfield.init();
-    this.starfield.zIndex = 0;
-    this.pipeline.add(this.starfield);
-
-    // Create Flare (renders as background glow)
-    this.flare = new Flare(this, {
-      radius: this.bhRadius * 4,
-      camera: this.camera,
-    });
-    this.flare.init();
-    this.flare.zIndex = 10;
-    this.pipeline.add(this.flare);
-
-    // Create a Scene to properly manage z-ordering of star and black hole
-    this.mainScene = new Scene(this, { sortByZIndex: true });
-    this.mainScene.zIndex = 30;
-    this.pipeline.add(this.mainScene);
-
-    // Create Black Hole (event horizon at center)
-    this.blackHole = new BlackHole(this, {
-      radius: this.bhRadius,
-      glowIntensity: 0,
-      camera: this.camera,
-    });
-    this.blackHole.init();
-    this.blackHole.zIndex = 50; // Middle layer
-    this.mainScene.add(this.blackHole);
-
-    // Create Star (approaching from outside)
-    // zIndex updated dynamically: behind BH when z > 0, in front when z < 0
-    this.star = new Star(this, {
-      camera: this.camera,
-      radius: this.starRadius,
-      particleCount: CONFIG.starParticleCount,
-      baseScale: this.baseScale,
-      startDistance: this.baseScale * CONFIG.starStartDistance,
-    });
-    this.star.init();
-    this.star.zIndex = 25; // Start behind black hole
-    this.mainScene.add(this.star);
-
-    // Create Debris Manager (accretion disk particles with lensing)
-    this.debrisManager = new DebrisManager(this, {
-      camera: this.camera,
-      bhRadius: this.bhRadius,
-      baseScale: this.baseScale,
-    });
-    this.debrisManager.init();
-    this.debrisManager.zIndex = 75; // On top of black hole
-    this.mainScene.add(this.debrisManager);
-
-    // Initialize state machine
-    this.initStateMachine();
-
-    // Click to restart
-    this.canvas.addEventListener("click", () => {
-      if (this.fsm.is("stable")) {
-        this.restart();
-      }
-    });
-
-    // Info label (always on top)
-    this.infoLabel = new Text(this, "", {
-      x: 15,
-      y: this.height - 30,
-      color: "#888",
-      font: "11px monospace",
-    });
-    this.infoLabel.zIndex = 100;
-    this.pipeline.add(this.infoLabel);
-
-    // Flash overlay for dramatic collapse moment
-    this.flashIntensity = 0;
-    this.flashDecay = 3.0; // How fast flash fades (higher = faster)
-  }
-
-  initStateMachine() {
-    this.fsm = StateMachine.fromSequence(
-      [
-        {
-          name: "approach",
-          duration: CONFIG.phases.approach,
-          enter: () => this.onApproachEnter(),
-        },
-        {
-          name: "stretch",
-          duration: CONFIG.phases.stretch,
-          enter: () => this.onStretchEnter(),
-        },
-        {
-          name: "disrupt",
-          duration: CONFIG.phases.disrupt,
-          enter: () => this.onDisruptEnter(),
-        },
-        {
-          name: "accrete",
-          duration: CONFIG.phases.accrete,
-          enter: () => this.onAccreteEnter(),
-        },
-        {
-          name: "flare",
-          duration: CONFIG.phases.flare,
-          enter: () => this.onFlareEnter(),
-        },
-        {
-          name: "stable",
-          duration: Infinity,
-          enter: () => this.onStableEnter(),
-        },
-      ],
-      { context: this },
-    );
-  }
-
-  // Phase callbacks
-  onApproachEnter() {
-    this.star.startApproach();
-    // No pre-made disk - it forms organically from star particles
-  }
-
-  onStretchEnter() {
-    this.star.startStretch();
-    // Glow controlled by awakening - just set target intensity
-    this.blackHole.setGlowIntensity(0.5);
-  }
-
-  onDisruptEnter() {
-    this.star.startDisrupt();
-    // Glow controlled by awakening - just set target intensity
-    this.blackHole.setGlowIntensity(0.8);
-  }
-
-  onAccreteEnter() {
-    // Flash white when star collapses!
-    this.flashIntensity = 1.0;
-
-    // Transfer remaining star particles to debris - these form the final disk
-    const debris = this.star.releaseAllParticles();
-    this.debrisManager.addDebris(debris);
-
-    // FLARE TRIGGERS IMMEDIATELY ON COLLISION - not waiting for flare phase
-    this.flare.trigger();
-    this.blackHole.setGlowIntensity(1.0);
-
-    // Activate relativistic jets during accretion (only if BH is awakened enough)
-    this.blackHole.setJetsActive(true);
-  }
-
-  onFlareEnter() {
-    // Flare already triggered in accrete - this phase is just for decay
-    // Keep intensity high
-    this.flare.setIntensity(1.0);
-  }
-
-  onStableEnter() {
-    this.blackHole.setGlowIntensity(1.0); // Keep full glow after collision
-    this.blackHole.setJetsActive(false); // Turn off jets when stable
-    this.flare.fadeOut();
-  }
-
-  restart() {
-    this.star.reset();
-    this.debrisManager.clear();
-    this.flare.reset();
-    this.flashIntensity = 0;
-    this.blackHole.setGlowIntensity(0);
-    this.blackHole.resetMass();
-    this.fsm.setState("approach");
-  }
-
-  updateScaledSizes() {
-    this.baseScale = Math.min(this.width, this.height);
-    this.bhRadius = this.baseScale * CONFIG.bhRadiusRatio;
-    this.starRadius = this.baseScale * CONFIG.starRadiusRatio;
-    this.tidalRadius = this.baseScale * CONFIG.tidalRadiusRatio;
-  }
-
-  onResize() {
-    this.updateScaledSizes();
-
-    if (this.camera) {
-      this.camera.perspective = this.baseScale * CONFIG.cameraDistance;
-    }
-
-    if (this.blackHole) {
-      this.blackHole.updateRadius(this.bhRadius);
-    }
-
-    if (this.star) {
-      this.star.updateSizing(this.starRadius, this.baseScale);
-    }
-
-    if (this.debrisManager) {
-      this.debrisManager.updateSizing(this.bhRadius, this.baseScale);
-    }
-
-    if (this.flare) {
-      this.flare.updateRadius(this.bhRadius * 4);
-    }
-
-    if (this.infoLabel) {
-      this.infoLabel.y = this.height - 30;
-    }
-  }
-
-  update(dt) {
-    super.update(dt);
-    this.time += dt;
-
-    // Update camera
-    this.camera.update(dt);
-
-    // Update state machine
-    this.fsm.update(dt);
-
-    // Update components based on current phase
-    const state = this.fsm.state;
-    const progress = this.fsm.progress;
-
-    // Black hole feeds on debris during ALL phases (awakens progressively)
-    const accretionRate = this.debrisManager.getAccretionRate();
-    if (accretionRate > 0) {
-      this.blackHole.addMass(accretionRate * dt * 0.01);
-    }
-
-    if (state === "approach") {
-      this.star.updateApproach(dt, progress);
-      // ORGANIC STREAMING FROM THE VERY START
-      // As star approaches, tidal forces gradually pull matter off
-      // Drift starts immediately but very weak, builds up over time
-      const driftStrength = progress * progress; // Quadratic buildup
-      this.star.applyParticleDrift(dt, driftStrength);
-
-      // Start releasing particles from 10% onward - very slow at first
-      if (progress > 0.1) {
-        const releaseProgress = (progress - 0.1) / 0.9;
-        // Mild tidal stretch that builds up
-        this.star.applyTidalStretch(releaseProgress * 0.2);
-        // Release particles - slow at first, faster as star approaches
-        const released = this.star.releaseParticles(releaseProgress * 0.25);
-        if (released.length > 0) {
-          this.debrisManager.addDebris(released);
-          // BH GROWS as star releases particles
-          this.blackHole.addMass(released.length * 0.002);
-        }
-      }
-    } else if (state === "stretch") {
-      this.star.updateStretch(dt, progress, { x: 0, y: 0, z: 0 });
-      // DRIFT particles toward BH - stronger during stretch
-      this.star.applyParticleDrift(dt, 1.0 + progress);
-      // Continue streaming during stretch - more aggressively
-      const released = this.star.releaseParticles(0.3 + progress * 0.4);
-      if (released.length > 0) {
-        this.debrisManager.addDebris(released);
-        // BH GROWS as star releases particles
-        this.blackHole.addMass(released.length * 0.003);
-      }
-    } else if (state === "disrupt") {
-      this.star.updateDisrupt(dt, progress);
-      // DRIFT particles toward BH - maximum during disruption
-      this.star.applyParticleDrift(dt, 2.0 + progress);
-      // Continue releasing particles during disruption
-      const released = this.star.releaseParticles(0.7 + progress * 0.3);
-      if (released.length > 0) {
-        this.debrisManager.addDebris(released);
-        // BH GROWS as star releases particles
-        this.blackHole.addMass(released.length * 0.004);
-      }
-
-      // COLLISION CHECK - trigger accrete when star is close to BH
-      const starDist = Math.sqrt(
-        this.star.centerX ** 2 +
-          this.star.centerY ** 2 +
-          this.star.centerZ ** 2,
-      );
-      if (starDist < this.bhRadius * 2) {
-        // Star has reached the black hole - trigger accrete immediately
-        this.fsm.setState("accrete");
-      }
-    } else if (state === "flare") {
-      this.flare.setIntensity(1 - progress * 0.5);
-    }
-
-    // Update star z-ordering based on camera-space z position
-    // Star behind black hole (z > 0) = lower zIndex, in front (z < 0) = higher zIndex
-    // Use hysteresis to prevent jittering when star is near the z=0 plane
-    if (this.star && this.star.visible) {
-      const starCameraZ = this.star.getCameraZ();
-      const hysteresis = this.bhRadius * 0.5; // Threshold to prevent jittering
-
-      let newZIndex = this.star.zIndex;
-      if (starCameraZ > hysteresis) {
-        // Clearly behind BH
-        newZIndex = 25;
-      } else if (starCameraZ < -hysteresis) {
-        // Clearly in front of BH
-        newZIndex = 75;
-      }
-      // If within hysteresis range, keep current zIndex to avoid flickering
-
-      if (this.star.zIndex !== newZIndex) {
-        this.star.zIndex = newZIndex;
-        // Mark z-order as dirty for re-sorting
-        this.mainScene._collection._zOrderDirty = true;
-      }
-    }
-
-    // Decay flash intensity
-    if (this.flashIntensity > 0) {
-      this.flashIntensity = Math.max(
-        0,
-        this.flashIntensity - dt * this.flashDecay,
-      );
-    }
-
-    // Update info label
-    this.updateInfoLabel();
-  }
-
-  updateInfoLabel() {
-    const state = this.fsm.state;
-    const progress = this.fsm.progress;
-
-    const stateLabels = {
-      approach: "Star Approaching",
-      stretch: "Tidal Stretching",
-      disrupt: "Stellar Disruption",
-      accrete: "Debris Accretion",
-      flare: "Luminous Flare",
-      stable: "Stable Disk",
-    };
-
-    const stateColors = {
-      approach: "#88f",
-      stretch: "#fa8",
-      disrupt: "#f88",
-      accrete: "#ff8",
-      flare: "#fff",
-      stable: "#8a8",
-    };
-
-    this.infoLabel.color = stateColors[state] || "#888";
-
-    if (state === "stable") {
-      this.infoLabel.text = `${stateLabels[state]} — click to restart`;
-    } else {
-      this.infoLabel.text = `${stateLabels[state]}: ${Math.round(progress * 100)}%`;
-    }
-  }
-
-  render() {
-    // Pipeline already sorts by zIndex via ZOrderedCollection
-    super.render();
-
-    // Draw flash overlay on top of everything using direct canvas
-    if (this.flashIntensity > 0) {
-      Painter.useCtx((ctx) => {
-        ctx.fillStyle = `rgba(255, 255, 255, ${this.flashIntensity})`;
-        ctx.fillRect(0, 0, this.width, this.height);
-      });
-    }
-  }
-}
-
-window.addEventListener("load", () => {
-  const canvas = document.getElementById("game");
-  const demo = new TDEDemo(canvas);
-  demo.start();
-});