@guinetik/gcanvas 1.0.0

package/demos/js/beziersignature.js

@@ -0,0 +1,241 @@
+import {
+  BezierShape,
+  Circle,
+  FPSCounter,
+  Game,
+  GameObject,
+  Tween,
+  Painter,
+  Scene,
+  Easing,
+} from "../../src/index";
+
+class MyGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.enableFluidSize();
+    this.backgroundColor = "black";
+  }
+
+  init() {
+    super.init();
+    // Set up scenes
+    this.scene = new Scene(this);
+    this.ui = new Scene(this);
+    this.pipeline.add(this.scene); // game layer
+    this.pipeline.add(this.ui); // UI layer
+
+    // Add signature animation
+    this.signature = new SignatureAnimation(this, {
+      debug: true,
+      anchor: "center",
+    });
+    this.signature.width = 400;
+    this.signature.height = 150;
+    this.scene.add(this.signature);
+
+    // Add FPS counter in the UI scene
+    this.ui.add(new FPSCounter(this, { anchor: "bottom-right" }));
+  }
+}
+
+// Signature Animation - A progressive bezier curve animation
+class SignatureAnimation extends GameObject {
+  constructor(game, options = {}) {
+    super(game, options);
+
+    // The signature path - represents a cursive signature
+    this.signaturePath = [
+      // First part - the cursive letter (stylized name)
+      ["M", -200, 20],
+      ["C", -180, -40, -160, 40, -140, 10],
+      ["C", -120, -30, -100, 40, -80, 0],
+      ["C", -60, -40, -40, 40, -20, 10],
+      ["C", 0, -20, 20, -30, 40, 10],
+      ["C", 60, 40, 80, 40, 100, 20],
+      ["C", 120, 0, 140, -10, 160, 10],
+      ["C", 180, 30, 200, 30, 220, 10],
+
+      // The underline swoop
+      ["M", -180, 40],
+      ["C", -100, 60, 100, 80, 250, 30],
+    ];
+
+    // Initialize state
+    this.progress = 0;
+    this.speed = 0.3; // Speed of animation
+    this.complete = false;
+
+    // Create visible bezier shape for the signature
+    this.signature = new BezierShape(
+      [], // Start with empty path
+      {
+        stroke: "#fff",
+        lineWidth: 3,
+        color: null,
+        debug: true,
+      }
+    );
+
+    // Create a circle to represent the pen tip
+    this.penTip = new Circle(8, {
+      x: game.width / 2,
+      y: game.height / 2,
+      color: "#4f8",
+      shadowColor: "rgba(64, 255, 128, 0.8)",
+      shadowBlur: 15,
+    });
+
+    // Canvas click handler to restart animation
+    game.canvas.addEventListener("click", () => this.restart());
+  }
+
+  // Restart the animation
+  restart() {
+    this.progress = 0;
+    this.complete = false;
+  }
+
+  // Calculate the current point along a particular bezier curve segment
+  getBezierPoint(segment, t) {
+    if (segment[0] === "M") {
+      // For move commands, just return the point
+      return { x: segment[1], y: segment[2] };
+    } else if (segment[0] === "C") {
+      // For Cubic Bezier curves, calculate the point at t
+      const startX = this.prevX || 0;
+      const startY = this.prevY || 0;
+      const cp1x = segment[1];
+      const cp1y = segment[2];
+      const cp2x = segment[3];
+      const cp2y = segment[4];
+      const endX = segment[5];
+      const endY = segment[6];
+
+      // Cubic Bezier formula
+      const x =
+        Math.pow(1 - t, 3) * startX +
+        3 * Math.pow(1 - t, 2) * t * cp1x +
+        3 * (1 - t) * Math.pow(t, 2) * cp2x +
+        Math.pow(t, 3) * endX;
+
+      const y =
+        Math.pow(1 - t, 3) * startY +
+        3 * Math.pow(1 - t, 2) * t * cp1y +
+        3 * (1 - t) * Math.pow(t, 2) * cp2y +
+        Math.pow(t, 3) * endY;
+
+      return { x, y };
+    }
+
+    return { x: 0, y: 0 };
+  }
+
+  // Get a subset of the path up to the current progress
+  getPartialPath() {
+    const result = [];
+    let totalSegments = this.signaturePath.length;
+    let segmentIndex = Math.floor(this.progress * totalSegments);
+    let segmentProgress = (this.progress * totalSegments) % 1;
+
+    // Add all completed segments
+    for (let i = 0; i < segmentIndex; i++) {
+      result.push([...this.signaturePath[i]]);
+
+      // Keep track of the last point for calculating bezier curves
+      if (this.signaturePath[i][0] === "M") {
+        this.prevX = this.signaturePath[i][1];
+        this.prevY = this.signaturePath[i][2];
+      } else if (this.signaturePath[i][0] === "C") {
+        this.prevX = this.signaturePath[i][5];
+        this.prevY = this.signaturePath[i][6];
+      }
+    }
+
+    // Add the current segment with partial progress
+    if (segmentIndex < totalSegments) {
+      const currentSegment = this.signaturePath[segmentIndex];
+
+      if (currentSegment[0] === "M") {
+        // For move commands, add the full command
+        result.push([...currentSegment]);
+        this.prevX = currentSegment[1];
+        this.prevY = currentSegment[2];
+
+        // Position pen tip at the move point
+        this.penTipPos = {
+          x: currentSegment[1],
+          y: currentSegment[2],
+        };
+      } else if (currentSegment[0] === "C") {
+        // For bezier curves, calculate the partial command
+        const point = this.getBezierPoint(currentSegment, segmentProgress);
+
+        // Add a partial curve to the result
+        result.push([
+          "C",
+          currentSegment[1],
+          currentSegment[2],
+          currentSegment[3],
+          currentSegment[4],
+          point.x,
+          point.y,
+        ]);
+
+        // Position pen tip at the end of the partial curve
+        this.penTipPos = point;
+      }
+    }
+
+    return result;
+  }
+
+  update(dt) {
+    // Update progress if animation not complete
+    if (!this.complete) {
+      this.progress += dt * this.speed;
+
+      if (this.progress >= 1) {
+        this.progress = 1;
+        this.complete = true;
+      }
+      // Calculate partial path based on current progress
+      this.currentPath = this.getPartialPath();
+      // Update signature path
+      this.signature.path = this.currentPath;
+    }
+
+    // Add gentle bouncing motion when complete
+    if (this.complete) {
+      const time = performance.now() / 1000;
+      this.signature.y = Math.sin(time * 2) * 5;
+    }
+
+    // Update pen tip position
+    if (this.penTipPos) {
+      this.penTip.x = this.penTipPos.x;
+      this.penTip.y = this.penTipPos.y;
+    }
+    super.update(dt);
+  }
+
+  draw() {
+    super.draw();
+    // Draw signature
+    this.signature.render();
+    // Draw pen tip if animation is not complete
+    if (!this.complete) {
+      this.penTip.render();
+    }
+  }
+
+  render() {
+    super.render();
+    Painter.text.setFont("18px monospace");
+    Painter.text.setTextAlign("center");
+    Painter.text.setTextBaseline("bottom");
+    Painter.text.fillText("Click anywhere to restart the signature animation", this.game.width / 2, this.game.height - 40, "#4f8");
+  }
+}
+
+export { MyGame };

package/demos/js/blackhole/accretiondisk.obj.js

@@ -0,0 +1,379 @@
+/**
+ * AccretionDisk - Manages disk particles and formation animation
+ *
+ * Handles particle creation, formation state transitions,
+ * camera-space projection with gravitational lensing, and Doppler effects.
+ */
+import { GameObject, Easing } from "../../../src/index.js";
+import { Particle } from "./particle.js";
+
+// Formation source configuration
+const INFALL_SOURCE_ANGLE = Math.PI * 1.25; // Top-right corner
+const INFALL_STREAM_WIDTH = 0.12;
+const INFALL_SPIRAL_TURNS = 1.5;
+
+export class AccretionDisk extends GameObject {
+  /**
+   * @param {Game} game - Game instance
+   * @param {Object} options
+   * @param {Camera3D} options.camera - Camera for projection
+   * @param {StateMachine} options.formationFSM - Formation state machine
+   * @param {number} options.baseScale - Base scale for sizing
+   * @param {number} options.bhRadius - Black hole radius
+   * @param {number} options.diskInner - Inner disk radius
+   * @param {number} options.diskOuter - Outer disk radius
+   * @param {number} [options.particleCount=2500] - Number of particles
+   * @param {number} [options.diskTilt=0] - Disk tilt in radians
+   * @param {Object} [options.colors] - Color configuration
+   */
+  constructor(game, options = {}) {
+    super(game, options);
+
+    this.camera = options.camera;
+    this.formationFSM = options.formationFSM;
+
+    // Sizing (updated from main demo on resize)
+    this.baseScale = options.baseScale ?? 500;
+    this.bhRadius = options.bhRadius ?? 40;
+    this.diskInner = options.diskInner ?? 60;
+    this.diskOuter = options.diskOuter ?? 175;
+    this.diskTilt = options.diskTilt ?? 0;
+
+    // Particle configuration
+    this.particleCount = options.particleCount ?? 2500;
+    this.particles = [];
+
+    // Colors for temperature gradient
+    this.colors = options.colors ?? {
+      inner: [255, 250, 220], // White-hot
+      mid: [255, 160, 50], // Orange
+      outer: [180, 40, 40], // Deep red
+    };
+
+    // Consumption tracking
+    this.particlesConsumed = 0;
+    this.totalParticleMass = this.particleCount;
+  }
+
+  /**
+   * Update sizing when window resizes.
+   */
+  updateSizing(baseScale, bhRadius, diskInner, diskOuter) {
+    this.baseScale = baseScale;
+    this.bhRadius = bhRadius;
+    this.diskInner = diskInner;
+    this.diskOuter = diskOuter;
+  }
+
+  /**
+   * Get temperature-based color for a particle at radius r.
+   */
+  getHeatColor(r) {
+    const t = (r - this.diskInner) / (this.diskOuter - this.diskInner);
+    const c1 = t < 0.3 ? this.colors.inner : this.colors.mid;
+    const c2 = t < 0.3 ? this.colors.mid : this.colors.outer;
+    const mix = t < 0.3 ? t / 0.3 : (t - 0.3) / 0.7;
+
+    return {
+      r: c1[0] + (c2[0] - c1[0]) * mix,
+      g: c1[1] + (c2[1] - c1[1]) * mix,
+      b: c1[2] + (c2[2] - c1[2]) * mix,
+      a: 1 - t,
+    };
+  }
+
+  /**
+   * Initialize particles at their final disk positions.
+   * Used for initial load and resize.
+   */
+  initParticles() {
+    this.particles = [];
+    for (let i = 0; i < this.particleCount; i++) {
+      const angle = Math.random() * Math.PI * 2;
+      const t = Math.random();
+      // Bias toward inner (hotter) region
+      const r = this.diskInner + t * t * (this.diskOuter - this.diskInner);
+
+      const speed = (1 / Math.sqrt(r)) * 600; // Keplerian
+      const yOffset = (Math.random() - 0.5) * this.baseScale * 0.006;
+      const baseColor = this.getHeatColor(r);
+
+      this.particles.push(
+        Particle.createForDisk(angle, r, yOffset, speed, baseColor),
+      );
+    }
+  }
+
+  /**
+   * Reset particles for infall animation.
+   * Sets up continuous stream from top-right corner.
+   */
+  initParticlesForInfall() {
+    this.particlesConsumed = 0;
+    this.totalParticleMass = this.particles.length;
+
+    for (let i = 0; i < this.particles.length; i++) {
+      const p = this.particles[i];
+
+      // Stream offset - like beads on a string
+      p.streamOffset = i / this.particles.length;
+
+      // Start position: far off-screen
+      const angleOffset = (Math.random() - 0.5) * INFALL_STREAM_WIDTH;
+      p.startAngle = INFALL_SOURCE_ANGLE + angleOffset;
+      p.startDistance =
+        this.baseScale * 0.9 + Math.random() * this.baseScale * 0.3;
+      p.startYOffset = (Math.random() - 0.5) * this.baseScale * 0.08;
+
+      // ~40% fall into black hole, ~60% form the disk
+      p.willFallIn = Math.random() < 0.4;
+      p.consumed = false;
+
+      if (p.willFallIn) {
+        p.targetDistance = 0;
+        p.spiralTurns = INFALL_SPIRAL_TURNS * (1.5 + Math.random() * 0.5);
+      } else {
+        p.targetAngle = Math.random() * Math.PI * 2;
+        const t = Math.random();
+        p.targetDistance =
+          this.diskInner + t * t * (this.diskOuter - this.diskInner);
+        p.spiralTurns =
+          INFALL_SPIRAL_TURNS +
+          (p.targetAngle - INFALL_SOURCE_ANGLE) / (Math.PI * 2);
+      }
+
+      p.targetYOffset = (Math.random() - 0.5) * this.baseScale * 0.006;
+
+      // Initialize to start position
+      p.angle = p.startAngle;
+      p.distance = p.startDistance;
+      p.yOffset = p.startYOffset;
+
+      // Color based on final position
+      p.baseColor = p.willFallIn
+        ? { r: 255, g: 200, b: 150, a: 1 }
+        : this.getHeatColor(p.targetDistance);
+    }
+  }
+
+  /**
+   * Normalize angle to [-PI, PI] range.
+   */
+  normalizeAngle(angle) {
+    while (angle > Math.PI) angle -= Math.PI * 2;
+    while (angle < -Math.PI) angle += Math.PI * 2;
+    return angle;
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.updateParticleFormation(dt);
+  }
+
+  /**
+   * Update particle positions based on formation state.
+   */
+  updateParticleFormation(dt) {
+    const state = this.formationFSM.state;
+    const progress = this.formationFSM.progress;
+
+    for (const p of this.particles) {
+      if (p.consumed) continue;
+
+      if (state === "infall") {
+        this.updateInfall(p, progress);
+      } else if (state === "collapse") {
+        this.updateCollapse(p, progress, dt);
+      } else if (state === "circularize") {
+        this.updateCircularize(p, progress, dt);
+      } else if (state === "stable") {
+        this.updateStable(p, dt);
+      }
+    }
+  }
+
+  updateInfall(p, progress) {
+    const particleProgress = progress + p.streamOffset * 0.5;
+    const t = Math.min(1, Easing.easeInQuad(Math.max(0, particleProgress)));
+
+    // Spiral inward
+    const spiralAngle = p.startAngle + p.spiralTurns * Math.PI * 2 * t;
+    p.angle = spiralAngle;
+
+    const targetDist = p.willFallIn ? 0 : this.bhRadius * 2;
+    p.distance = Easing.lerp(p.startDistance, targetDist, t);
+    p.yOffset = Easing.lerp(p.startYOffset, 0, t);
+
+    // Check if consumed
+    if (p.willFallIn && p.distance < this.bhRadius * 0.5) {
+      p.consumed = true;
+      this.particlesConsumed++;
+    }
+  }
+
+  updateCollapse(p, progress, dt) {
+    // Delay particle spreading so black hole grows first
+    // Particles wait until 20% into collapse before spreading
+    const delayedProgress = Math.max(0, (progress - 0.2) / 0.8);
+    const t = Easing.easeOutQuad(delayedProgress);
+
+    if (p.willFallIn) {
+      // Falling particles spiral in immediately
+      const fallT = Easing.easeInQuad(progress);
+      p.distance = Easing.lerp(p.distance, 0, fallT * 0.7);
+      p.angle += p.spiralTurns * 0.1 * (1 - progress);
+
+      if (p.distance < this.bhRadius * 0.5) {
+        p.consumed = true;
+        this.particlesConsumed++;
+      }
+    } else if (delayedProgress > 0) {
+      // Disk particles spread slowly - reduced factors for gradual expansion
+      p.distance = Easing.lerp(p.distance, p.targetDistance, t * 0.3);
+      p.angle = Easing.lerp(p.angle, p.targetAngle, t * 0.2);
+      p.yOffset = Easing.lerp(p.yOffset, p.targetYOffset, t * 0.2);
+    }
+  }
+
+  updateCircularize(p, progress, dt) {
+    const t = Easing.easeOutCubic(progress) * p.circularizeSpeed;
+    const clampedT = Math.min(1, t);
+
+    p.distance = Easing.lerp(p.distance, p.targetDistance, clampedT * 0.15);
+    p.yOffset = Easing.lerp(p.yOffset, p.targetYOffset, clampedT * 0.2);
+
+    // Start orbital motion
+    const orbitSpeed = p.speed * dt * 0.01 * clampedT;
+    p.angle += orbitSpeed;
+
+    // Drift toward target angle
+    const angleDiff = this.normalizeAngle(p.targetAngle - p.angle);
+    p.angle += angleDiff * 0.03 * clampedT;
+  }
+
+  updateStable(p, dt) {
+    // Occasionally a particle loses angular momentum and falls in
+    if (
+      !p.isFalling &&
+      p.distance < this.diskInner * 1.5 &&
+      Math.random() < 0.0001
+    ) {
+      p.isFalling = true;
+    }
+
+    if (p.isFalling) {
+      p.distance *= 0.985;
+      p.angle += p.speed * dt * 0.03;
+      p.yOffset *= 0.95;
+
+      if (p.distance < this.bhRadius * 0.5) {
+        p.consumed = true;
+        this.particlesConsumed++;
+      }
+    } else {
+      // Normal Keplerian orbits
+      p.angle += p.speed * dt * 0.01;
+      p.distance = Easing.lerp(p.distance, p.targetDistance, 0.02);
+      p.yOffset = Easing.lerp(p.yOffset, p.targetYOffset, 0.02);
+    }
+  }
+
+  /**
+   * Build render list with projected particles.
+   * Returns array of render items for depth sorting.
+   */
+  buildRenderList() {
+    const state = this.formationFSM.state;
+    const renderList = [];
+
+    const diskAlpha =
+      state === "infall" || state === "collapse"
+        ? 0.9
+        : state === "stable"
+          ? 1
+          : Math.max(0.5, this.formationFSM.progress);
+
+    // Calculate lensing strength based on formation state
+    let lensingStrength = 0;
+    if (state === "stable") {
+      lensingStrength = 1;
+    } else if (state === "circularize") {
+      lensingStrength =
+        0.4 + Easing.easeOutCubic(this.formationFSM.progress) * 0.6;
+    } else if (state === "collapse") {
+      lensingStrength = Easing.easeInQuad(this.formationFSM.progress) * 0.4;
+    }
+
+    const cosTilt = Math.cos(this.diskTilt);
+    const sinTilt = Math.sin(this.diskTilt);
+
+    for (const p of this.particles) {
+      if (p.consumed) continue;
+
+      // World coordinates (flat disk)
+      let x = Math.cos(p.angle) * p.distance;
+      let z = Math.sin(p.angle) * p.distance;
+      let y = p.yOffset;
+
+      // Apply disk tilt
+      const yTilted = y * cosTilt - z * sinTilt;
+      const zTilted = y * sinTilt + z * cosTilt;
+      y = yTilted;
+      z = zTilted;
+
+      // Transform to camera space
+      const cosY = Math.cos(this.camera.rotationY);
+      const sinY = Math.sin(this.camera.rotationY);
+      let xCam = x * cosY - z * sinY;
+      let zCam = x * sinY + z * cosY;
+
+      const cosX = Math.cos(this.camera.rotationX);
+      const sinX = Math.sin(this.camera.rotationX);
+      let yCam = y * cosX - zCam * sinX;
+      zCam = y * sinX + zCam * cosX;
+
+      // Apply gravitational lensing
+      if (lensingStrength > 0 && zCam > 0) {
+        const currentR = Math.sqrt(xCam * xCam + yCam * yCam);
+        const ringRadius = this.bhRadius * 1.3;
+        const lensFactor = Math.exp(-currentR / (this.bhRadius * 1.5));
+        const warp = lensFactor * 1.2 * lensingStrength;
+
+        if (currentR > 0) {
+          const ratio = (currentR + ringRadius * warp) / currentR;
+          xCam *= ratio;
+          yCam *= ratio;
+        } else {
+          yCam = ringRadius * lensingStrength;
+        }
+      }
+
+      // Perspective projection
+      const perspectiveScale =
+        this.camera.perspective / (this.camera.perspective + zCam);
+      const screenX = xCam * perspectiveScale;
+      const screenY = yCam * perspectiveScale;
+
+      if (zCam < -this.camera.perspective + 10) continue;
+
+      // Doppler effect
+      const velocityDir = Math.cos(p.angle + this.camera.rotationY);
+      const doppler = 1 + velocityDir * 0.4;
+
+      renderList.push({
+        type: "particle",
+        z: zCam,
+        x: screenX,
+        y: screenY,
+        scale: perspectiveScale,
+        color: p.baseColor,
+        doppler: doppler,
+        diskAlpha: diskAlpha,
+        isFalling: p.isFalling || p.willFallIn,
+        horizonProximity: p.distance / this.bhRadius,
+      });
+    }
+
+    return renderList;
+  }
+}