@guinetik/gcanvas 1.0.2 → 1.0.4

package/demos/js/beziersignature.js

@@ -1,241 +0,0 @@
-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

@@ -1,379 +0,0 @@
-/**
- * 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;
-  }
-}