@guinetik/gcanvas 1.0.0

package/demos/js/penrose/ship.js

@@ -0,0 +1,216 @@
+import { GameObject, Group, Keys, Rectangle } from "../../../src/index.js";
+import { CONFIG } from "./constants.js";
+// ============================================================================
+// PENROSE SHIP
+// ============================================================================
+
+export class PenroseShip extends GameObject {
+  constructor(game) {
+    super(game);
+
+    // Position in Penrose coordinates (u = space, v = time)
+    this.u = 0;
+    this.v = CONFIG.shipStartV;
+
+    // Heading angle (direction ship is traveling, 0 = straight up/forward)
+    this.heading = 0;
+
+    // Velocity is now derived from heading for compatibility
+    this.velocity = 0;
+
+    // Time progression speed (accelerates)
+    this.timeSpeed = CONFIG.shipTimeSpeed;
+
+    // Worldline trail
+    this.worldline = [];
+
+    // Ship visual (simple triangle pointing up)
+    this.shipGroup = new Group({});
+
+    // Main body
+    const body = new Rectangle({
+      width: 12,
+      height: 16,
+      color: "#0f0",
+    });
+
+    // Nose
+    const nose = new Rectangle({
+      width: 4,
+      height: 8,
+      y: -10,
+      color: "#0f0",
+    });
+
+    // Wings
+    const leftWing = new Rectangle({
+      width: 8,
+      height: 6,
+      x: -10,
+      y: 4,
+      color: "#0a0",
+    });
+    const rightWing = new Rectangle({
+      width: 8,
+      height: 6,
+      x: 10,
+      y: 4,
+      color: "#0a0",
+    });
+
+    // Engine glow
+    this.engineLeft = new Rectangle({
+      width: 4,
+      height: 4,
+      x: -4,
+      y: 10,
+      color: "#fa0",
+    });
+    this.engineRight = new Rectangle({
+      width: 4,
+      height: 4,
+      x: 4,
+      y: 10,
+      color: "#f60",
+    });
+
+    this.shipGroup.add(body);
+    this.shipGroup.add(nose);
+    this.shipGroup.add(leftWing);
+    this.shipGroup.add(rightWing);
+    this.shipGroup.add(this.engineLeft);
+    this.shipGroup.add(this.engineRight);
+
+    this.engineTimer = 0;
+    this.alive = true;
+
+    // Death animation
+    this.deathProgress = 0;
+    this.deathBlackHole = null;
+    this.deathFade = 0; // 0 to 1, when 1 = fully faded
+
+    // Ergosphere status (set by game)
+    this.inErgosphere = false;
+
+    // Boost status (set by game)
+    this.boostMultiplier = 1;
+
+    // Edge detection
+    this.hitSpatialInfinity = false;
+
+    // Collision radius (for circle collision)
+    this.radius = 0.02;
+  }
+
+  /**
+   * Get circle bounds for collision detection (Penrose coordinates)
+   */
+  getCircle() {
+    return { x: this.u, y: this.v, radius: this.radius };
+  }
+
+  reset() {
+    this.u = 0;
+    this.v = CONFIG.shipStartV;
+    this.heading = 0;
+    this.velocity = 0;
+    this.timeSpeed = CONFIG.shipTimeSpeed;
+    this.worldline = [];
+    this.alive = true;
+    this.deathProgress = 0;
+    this.deathBlackHole = null;
+    this.deathFade = 0;
+    this.inErgosphere = false;
+    this.boostMultiplier = 1;
+    this.hitSpatialInfinity = false;
+  }
+
+  update(dt) {
+    if (!this.alive) {
+      // Death animation - get pulled to singularity SLOWLY
+      this.deathProgress += dt * CONFIG.deathAttractionSpeed;
+      if (this.deathBlackHole) {
+        const t = Math.min(this.deathProgress, 1);
+        const eased = t * t * t; // Cubic easing - starts slow, speeds up
+        this.u += (this.deathBlackHole.u - this.u) * eased * dt * 1.5;
+        this.v += (this.deathBlackHole.v - this.v) * eased * dt * 1.5;
+
+        // Check if we've reached the singularity (close to center)
+        const dist = Math.sqrt(
+          Math.pow(this.u - this.deathBlackHole.u, 2) +
+            Math.pow(this.v - this.deathBlackHole.v, 2),
+        );
+        if (dist < 0.02) {
+          // Start fading out
+          this.deathFade += dt / CONFIG.deathFadeDuration;
+        }
+      }
+      return;
+    }
+
+    // Time always advances (accelerating) - boosted when using Kerr energy
+    this.timeSpeed *= Math.pow(CONFIG.shipAcceleration, dt);
+    this.v += this.timeSpeed * this.boostMultiplier * dt;
+
+    // Steering input - changes heading (direction you're traveling)
+    const leftPressed =
+      Keys.isDown("a") || Keys.isDown("A") || Keys.isDown(Keys.LEFT);
+    const rightPressed =
+      Keys.isDown("d") || Keys.isDown("D") || Keys.isDown(Keys.RIGHT);
+
+    if (leftPressed) {
+      this.heading -= CONFIG.shipSteering * dt;
+    }
+    if (rightPressed) {
+      this.heading += CONFIG.shipSteering * dt;
+    }
+
+    // When not steering, heading springs back to center
+    if (!leftPressed && !rightPressed) {
+      this.heading *= 0.92; // Decay toward 0
+    }
+
+    // Clamp heading (can't go more than ~60 degrees off forward - would be spacelike!)
+    const maxHeading = Math.PI / 3; // 60 degrees
+    this.heading = Math.max(-maxHeading, Math.min(maxHeading, this.heading));
+
+    // Update velocity for compatibility (used by camera rotation)
+    this.velocity = this.heading;
+
+    // Movement based on heading direction
+    // sin(heading) gives lateral movement, heading=0 means straight up
+    this.u += Math.sin(this.heading) * this.timeSpeed * dt;
+
+    // Clamp to diamond bounds (|u| + |v| <= 1)
+    // Hitting the edge = spatial infinity (i0) - you can never reach it!
+    const maxU = Math.max(0, 1 - Math.abs(this.v));
+    const prevU = this.u;
+    this.u = Math.max(-maxU, Math.min(maxU, this.u));
+
+    // If we hit spatial infinity, kill velocity - you can't escape to infinity
+    if (this.u !== prevU) {
+      this.velocity *= 0.3; // Bounce back effect
+      this.hitSpatialInfinity = true;
+    } else {
+      this.hitSpatialInfinity = false;
+    }
+
+    // Record worldline
+    this.worldline.push({ u: this.u, v: this.v });
+    if (this.worldline.length > CONFIG.worldlineMaxLength) {
+      this.worldline.shift();
+    }
+
+    // Engine flicker
+    this.engineTimer += dt * 20;
+    const flicker = Math.sin(this.engineTimer) > 0;
+    this.engineLeft.color = flicker ? "#fa0" : "#f60";
+    this.engineRight.color = flicker ? "#f60" : "#fa0";
+  }
+
+  die(blackHole) {
+    this.alive = false;
+    this.deathBlackHole = blackHole;
+    this.deathProgress = 0;
+  }
+}

package/demos/js/penrose/sounds.js

@@ -0,0 +1,211 @@
+/**
+ * Penrose Game Sound Effects
+ *
+ * Procedural audio using the Synth system.
+ */
+
+import { Synth } from "../../../src/index.js";
+
+let initialized = false;
+
+export const PenroseSounds = {
+  /**
+   * Initialize the sound system (must be called after user interaction)
+   */
+  init() {
+    if (initialized) return;
+    Synth.init({ masterVolume: 0.4 });
+    initialized = true;
+    console.log("Sound initialized");
+  },
+
+  /**
+   * Check if sound is initialized
+   */
+  get isReady() {
+    return initialized;
+  },
+
+  /**
+   * Wormhole appears - ethereal rising sweep
+   */
+  wormholeSpawn() {
+    if (!initialized) return;
+
+    // Ethereal rising sweep with shimmer
+    Synth.osc.sweep(200, 800, 0.8, { type: "sine", volume: 0.3 });
+    Synth.osc.sweep(300, 1200, 0.6, { type: "triangle", volume: 0.15 });
+
+    // Sparkle effect
+    setTimeout(() => {
+      Synth.osc.tone(1200, 0.2, { type: "sine", volume: 0.1, attack: 0.01, release: 0.15 });
+    }, 200);
+    setTimeout(() => {
+      Synth.osc.tone(1600, 0.15, { type: "sine", volume: 0.08, attack: 0.01, release: 0.1 });
+    }, 350);
+  },
+
+  /**
+   * Enter wormhole - whoosh teleport
+   */
+  wormholeEnter() {
+    if (!initialized) return;
+
+    // Whoosh down + warble
+    Synth.osc.sweep(600, 100, 0.5, { type: "sine", volume: 0.4 });
+    Synth.osc.sweep(800, 150, 0.4, { type: "triangle", volume: 0.2 });
+    Synth.osc.fm(200, 8, 100, 0.6, { volume: 0.15 });
+  },
+
+  /**
+   * Artifact appears - mysterious chime
+   */
+  artifactSpawn() {
+    if (!initialized) return;
+
+    // Mysterious chime
+    Synth.osc.tone(523, 0.4, { type: "sine", volume: 0.25, attack: 0.01, release: 0.3 }); // C5
+    setTimeout(() => {
+      Synth.osc.tone(659, 0.3, { type: "sine", volume: 0.2, attack: 0.01, release: 0.25 }); // E5
+    }, 100);
+    setTimeout(() => {
+      Synth.osc.tone(784, 0.5, { type: "sine", volume: 0.25, attack: 0.01, release: 0.4 }); // G5
+    }, 200);
+  },
+
+  /**
+   * Collect artifact - triumphant arpeggio
+   */
+  artifactCollect() {
+    if (!initialized) return;
+
+    // Triumphant arpeggio
+    const notes = [523, 659, 784, 1047]; // C E G C
+    notes.forEach((freq, i) => {
+      setTimeout(() => {
+        Synth.osc.tone(freq, 0.4, { type: "triangle", volume: 0.2, attack: 0.01, release: 0.3 });
+      }, i * 80);
+    });
+  },
+
+  /**
+   * Kerr energy harvested - quick blip
+   */
+  kerrCollect() {
+    if (!initialized) return;
+
+    // Quick energetic blip
+    Synth.osc.sweep(400, 1000, 0.15, { type: "square", volume: 0.15 });
+    Synth.osc.tone(800, 0.1, { type: "sine", volume: 0.1 });
+  },
+
+  /**
+   * Enter void dimension - deep ominous
+   */
+  voidEnter() {
+    if (!initialized) return;
+
+    // Deep ominous rumble + descending
+    Synth.osc.sweep(400, 50, 1.5, { type: "sawtooth", volume: 0.25 });
+    Synth.osc.fm(60, 2, 30, 2, { volume: 0.3 });
+  },
+
+  /**
+   * Collect void particle - sparkle
+   */
+  voidParticle() {
+    if (!initialized) return;
+
+    // Quick sparkle
+    Synth.osc.tone(600 + Math.random() * 400, 0.15, {
+      type: "sine",
+      volume: 0.12,
+      attack: 0.01,
+      release: 0.1
+    });
+  },
+
+  /**
+   * Escape the void - triumphant rising
+   */
+  voidEscape() {
+    if (!initialized) return;
+
+    // Rising triumphant escape
+    Synth.osc.sweep(100, 800, 1, { type: "sine", volume: 0.3 });
+    Synth.osc.sweep(150, 1200, 0.8, { type: "triangle", volume: 0.2 });
+
+    // Fanfare
+    setTimeout(() => {
+      Synth.osc.tone(523, 0.3, { type: "triangle", volume: 0.2 });
+      Synth.osc.tone(659, 0.3, { type: "triangle", volume: 0.15 });
+    }, 400);
+    setTimeout(() => {
+      Synth.osc.tone(784, 0.5, { type: "triangle", volume: 0.25 });
+    }, 600);
+  },
+
+  /**
+   * Death by singularity - descending doom
+   */
+  death() {
+    if (!initialized) return;
+
+    // Descending doom
+    Synth.osc.sweep(400, 60, 1.5, { type: "sawtooth", volume: 0.2 });
+    Synth.osc.fm(100, 3, 50, 2, { volume: 0.15 });
+
+    this.stopEngine();
+  },
+
+  /**
+   * Continuous engine drone
+   */
+  engine: null,
+
+  startEngine() {
+    if (!initialized || this.engine) return;
+
+    // Create a rich droning sound using FM or a simple oscillator
+    // We use a low-frequency sawtooth for that 'engine' feel
+    this.engine = Synth.osc.continuous({
+      type: "sawtooth",
+      frequency: 60,
+      volume: 0, // Start silent, ramp up
+    });
+
+    this.engine.setVolume(0.1, 0.5);
+  },
+
+  updateEngine(timeSpeed, isBoosting) {
+    if (!this.engine) return;
+
+    // Base frequency increases with ship's time acceleration
+    const baseFreq = 60 + timeSpeed * 50;
+    // Frequency jumps when boosting
+    const targetFreq = isBoosting ? baseFreq * 1.5 : baseFreq;
+    // Volume also increases with boost
+    const targetVolume = isBoosting ? 0.25 : 0.12;
+
+    this.engine.setFrequency(targetFreq, 0.1);
+    this.engine.setVolume(targetVolume, 0.1);
+  },
+
+  stopEngine() {
+    if (this.engine) {
+      this.engine.stop(0.5);
+      this.engine = null;
+    }
+  },
+
+  /**
+   * Boost activation sound
+   */
+  boost() {
+    if (!initialized) return;
+
+    // Short energetic burst
+    Synth.osc.sweep(400, 1200, 0.2, { type: "square", volume: 0.2 });
+    Synth.osc.tone(800, 0.1, { type: "sine", volume: 0.15 });
+  },
+};

package/demos/js/penrose/voidparticle.js

@@ -0,0 +1,55 @@
+/**
+ * Void Particle
+ *
+ * Purple particles that appear inside the black hole void.
+ * Collect 10 to escape back to the origin.
+ */
+
+import { CONFIG } from "./constants.js";
+
+export class VoidParticle {
+  constructor(x, y) {
+    // Screen coordinates (not Penrose - we're in the void!)
+    this.x = x;
+    this.y = y;
+
+    // Animation
+    this.pulsePhase = Math.random() * Math.PI * 2;
+    this.driftX = (Math.random() - 0.5) * 20; // Slow drift
+    this.driftY = (Math.random() - 0.5) * 20;
+
+    // Size
+    this.radius = CONFIG.voidParticleRadius;
+
+    // State
+    this.collected = false;
+    this.collectAnimation = 0; // For collection effect
+  }
+
+  update(dt) {
+    this.pulsePhase += dt * 5;
+
+    // Slow drift
+    this.x += this.driftX * dt;
+    this.y += this.driftY * dt;
+
+    // Collection animation
+    if (this.collected) {
+      this.collectAnimation += dt * 3;
+    }
+  }
+
+  /**
+   * Get circle bounds for collision detection (screen coordinates)
+   */
+  getCircle() {
+    return { x: this.x, y: this.y, radius: this.radius };
+  }
+
+  /**
+   * Check if particle is active (not collected)
+   */
+  get active() {
+    return !this.collected;
+  }
+}